Merge pull request #22 from bcdev/forman-20-support_app_state

Support application state

Author: forman

dashi/TODO.md

@@ -0,0 +1,17 @@
+# Dashi UI TODOs
+
+- Keep state flat, avoid deep nesting!
+  
+  - Why: Changing a deeply nested property is more complex, error prone,
+    and takes more time to execute.
+    Deeply nested state models are harder to understand too.
+    It will also require changing all parent objects and arrays that contain the changed value
+    which potentially causes more UI renders and/or more tests whether component properties changed.
+  
+  - How: Go back to former design where initial contributions that stay constant
+    are separate from changing contribution states and components.
+
+- Consequently use `propertyPath: string[]` instead of `propertyName: string`  
+
+- Add true actions from `src/actions` to store state so that lib users
+  know what actions are public.

dashi/package-lock.json

@@ -49,6 +49,7 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.5",
+    "memoize-one": "^6.0.0",
     "microdiff": "^1.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

dashi/package.json

@@ -1,14 +1,17 @@
 import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
 import Typography from "@mui/material/Typography";
 
-import { configureLogging, initSystemStore } from "@/lib";
+import { initializeContributions } from "@/lib";
 import ExtensionsInfo from "./components/ExtensionInfo";
+import ControlBar from "@/demo/components/ControlBar";
 import PanelsControl from "./components/PanelsControl";
 import PanelsRow from "./components/PanelsRow";
+import { appStore } from "@/demo/store";
 
-configureLogging();
-
-initSystemStore();
+initializeContributions({
+  hostStore: appStore,
+  logging: { enabled: true },
+});
 
 // MUI's default font family
 const fontFamily = "Roboto, Arial, sans-serif";
@@ -32,6 +35,7 @@ function App() {
         Dashi Demo
       </Typography>
       <ExtensionsInfo />
+      <ControlBar />
       <PanelsControl />
       <PanelsRow />
     </ThemeProvider>

dashi/src/demo/App.tsx

@@ -1,5 +1,6 @@
-import { setComponentVisibility } from "@/lib";
+import { updateContributionState } from "@/lib";
+import type { PanelState } from "@/demo/types";
 
 export function hidePanel(panelIndex: number) {
-  setComponentVisibility("panels", panelIndex, false);
+  updateContributionState<PanelState>("panels", panelIndex, { visible: false });
 }

dashi/src/demo/actions/hidePanel.ts

@@ -1,5 +1,6 @@
-import { setComponentVisibility } from "@/lib";
+import { updateContributionState } from "@/lib";
+import type { PanelState } from "@/demo/types";
 
 export function showPanel(panelIndex: number) {
-  setComponentVisibility("panels", panelIndex, true);
+  updateContributionState<PanelState>("panels", panelIndex, { visible: true });
 }

dashi/src/demo/actions/showPanel.ts

@@ -0,0 +1,33 @@
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+
+import { useAppStore } from "@/demo/store";
+
+function ControlBar() {
+  const { datasets, selectedDatasetId, setSelectedDatasetId } = useAppStore();
+
+  return (
+    <div>
+      <FormControl variant="filled" size="small" style={{ minWidth: 180 }}>
+        <InputLabel id="dataset">Dataset (App State)</InputLabel>
+        <Select
+          labelId="dataset"
+          value={selectedDatasetId}
+          onChange={(event) =>
+            void setSelectedDatasetId(event.target.value || null)
+          }
+        >
+          {datasets.map(({ id, title }) => (
+            <MenuItem key={id} value={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default ControlBar;

dashi/src/demo/components/ControlBar.tsx

@@ -1,12 +1,12 @@
-import { type CSSProperties, type ReactElement } from "react";
+import type { CSSProperties, ReactElement } from "react";
 import CircularProgress from "@mui/material/CircularProgress";
 
 import {
-  type Contribution,
+  type ComponentChangeHandler,
   type ContributionState,
-  type PropertyChangeHandler,
-  DashiComponent,
+  Component,
 } from "@/lib";
+import type { PanelState } from "@/demo/types";
 
 const panelContainerStyle: CSSProperties = {
   display: "flex",
@@ -32,40 +32,39 @@ const panelContentStyle: CSSProperties = {
   padding: 2,
 };
 
-interface PanelProps {
-  panelModel: Contribution;
-  panelState: ContributionState;
-  onPropertyChange: PropertyChangeHandler;
+interface PanelProps extends ContributionState<PanelState> {
+  onChange: ComponentChangeHandler;
 }
 
-function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
-  if (!panelState.visible) {
+function Panel({
+  name,
+  state,
+  component,
+  componentResult,
+  onChange,
+}: PanelProps) {
+  if (!state.visible) {
     return null;
   }
-  const componentState = panelState.componentState;
   let panelElement: ReactElement | null = null;
-  const componentModelResult = panelState.componentStateResult;
-  if (componentModelResult.data && componentState) {
-    panelElement = (
-      <DashiComponent {...componentState} onPropertyChange={onPropertyChange} />
-    );
-  } else if (componentModelResult.error) {
+  if (component) {
+    panelElement = <Component {...component} onChange={onChange} />;
+  } else if (componentResult.error) {
     panelElement = (
       <span>
-        Error loading {panelModel.name}: {componentModelResult.error.message}
+        Error loading {name}: {componentResult.error.message}
       </span>
     );
-  } else if (componentModelResult.status === "pending") {
+  } else if (componentResult.status === "pending") {
     panelElement = (
       <span>
-        <CircularProgress size={30} color="secondary" /> Loading{" "}
-        {panelModel.name}...
+        <CircularProgress size={30} color="secondary" /> Loading {name}...
       </span>
     );
   }
   return (
     <div style={panelContainerStyle}>
-      <div style={panelHeaderStyle}>{panelState.title}</div>
+      <div style={panelHeaderStyle}>{state.title}</div>
       <div style={panelContentStyle}>{panelElement}</div>
     </div>
   );

dashi/src/demo/components/Panel.tsx

@@ -2,15 +2,12 @@ import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormGroup from "@mui/material/FormGroup";
 
-import { useContributionStatesRecord } from "@/lib";
 import { hidePanel } from "@/demo/actions/hidePanel";
 import { showPanel } from "@/demo/actions/showPanel";
-
-const contribPoint = "panels";
+import { usePanelStates } from "@/demo/hooks";
 
 function PanelsControl() {
-  const contributionStatesRecord = useContributionStatesRecord();
-  const panelStates = contributionStatesRecord[contribPoint];
+  const panelStates = usePanelStates();
   if (!panelStates) {
     // Ok, not ready yet
     return null;
@@ -23,12 +20,12 @@ function PanelsControl() {
         return (
           <FormControlLabel
             key={panelIndex}
-            label={panelState.title}
+            label={panelState.state.title}
             control={
               <Checkbox
                 color="secondary"
                 id={id}
-                checked={panelState.visible || false}
+                checked={panelState.state.visible || false}
                 value={panelIndex}
                 onChange={(e) => {
                   if (e.currentTarget.checked) {

dashi/src/demo/components/PanelsControl.tsx

@@ -1,44 +1,30 @@
-import React from "react";
+import type { JSX } from "react";
 
-import {
-  type PropertyChangeEvent,
-  applyPropertyChange,
-  useContributionModelsRecord,
-  useContributionStatesRecord,
-} from "@/lib";
+import { type ComponentChangeEvent, handleComponentChange } from "@/lib";
+import { usePanelStates } from "@/demo/hooks";
 import Panel from "./Panel";
 
-const contribPoint = "panels";
-
 function PanelsRow() {
-  const contributionModelsRecord = useContributionModelsRecord();
-  const contributionStatesRecord = useContributionStatesRecord();
-  const panelModels = contributionModelsRecord[contribPoint];
-  const panelStates = contributionStatesRecord[contribPoint];
-  if (!panelModels || !panelStates) {
+  const panelStates = usePanelStates();
+  if (!panelStates) {
     // Ok, not ready yet
     return null;
   }
-  // TODO: assert panelModels.length === panelStates.length
-  if (panelModels.length != panelStates?.length) {
-    throw Error("internal state error");
-  }
 
-  const handlePropertyChange = (
+  const handlePanelChange = (
     panelIndex: number,
-    panelEvent: PropertyChangeEvent,
+    panelEvent: ComponentChangeEvent,
   ) => {
-    applyPropertyChange(contribPoint, panelIndex, panelEvent);
+    handleComponentChange("panels", panelIndex, panelEvent);
   };
-  const visiblePanels: React.JSX.Element[] = [];
+  const visiblePanels: JSX.Element[] = [];
   panelStates.forEach((panelState, panelIndex) => {
-    if (panelState.visible) {
+    if (panelState.state.visible) {
       visiblePanels.push(
         <Panel
           key={panelIndex}
-          panelState={panelState}
-          panelModel={panelModels[panelIndex]}
-          onPropertyChange={(e) => handlePropertyChange(panelIndex, e)}
+          {...panelState}
+          onChange={(e) => handlePanelChange(panelIndex, e)}
         />,
       );
     }