State management refactor

package.json

@@ -136,6 +136,9 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^13.5.0",
     "iframe-phone": "^1.3.1",
+    "mobx": "^6.13.2",
+    "mobx-react-lite": "^4.0.7",
+    "mobx-state-tree": "^6.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tslib": "^2.4.0"

src/components/app.tsx

@@ -8,13 +8,14 @@ import { ICaseObjCommon } from "../types";
 import css from "./app.scss";
 
 function App() {
-  const {connected, selectedDataSet, dataSets, collections, cases, interactiveState,
+  const {connected, selectedDataSet, dataSets, collectionsModel, cases, interactiveState,
          updateInteractiveState: _updateInteractiveState, init,
          handleSelectDataSet: _handleSelectDataSet, handleUpdateAttributePosition,
-         handleAddCollection, handleAddAttribute, handleSetCollections, handleSelectSelf,
+         handleAddCollection, handleAddAttribute, handleSelectSelf,
          updateTitle, selectCODAPCases, listenForSelectionChanges,
-         handleCreateCollectionFromAttribute, handleUpdateCollections
-        } = useCodapState();
+         handleCreateCollectionFromAttribute, handleSetCollections,
+         handleSortAttribute, editCaseValue } = useCodapState();
+  const collections = collectionsModel.collections;
 
   useEffect(() => {
     init();
@@ -102,9 +103,9 @@ function App() {
           updateInteractiveState={updateInteractiveState}
           handleShowComponent={handleShowComponent}
           handleUpdateAttributePosition={handleUpdateAttributePosition}
-          handleSetCollections={handleSetCollections}
           handleCreateCollectionFromAttribute={handleCreateCollectionFromAttribute}
-          handleUpdateCollections={handleUpdateCollections}
+          editCaseValue={editCaseValue}
+          handleSortAttribute={handleSortAttribute}
         />
       );
 
@@ -120,8 +121,8 @@ function App() {
           updateInteractiveState={updateInteractiveState}
           handleAddCollection={handleAddCollection}
           handleAddAttribute={handleAddAttribute}
-          handleSetCollections={handleSetCollections}
           handleShowComponent={handleShowComponent}
+          handleSetCollections={handleSetCollections}
         />
       );
 
@@ -130,7 +131,7 @@ function App() {
         <CardView
           selectedDataSet={selectedDataSet}
           dataSets={dataSets}
-          collections={collections}
+          collectionsModel={collectionsModel}
           interactiveState={interactiveState}
           handleSelectDataSet={handleSelectDataSet}
           updateTitle={updateTitle}

src/components/card-view/card-view.tsx

@@ -1,39 +1,31 @@
 import React, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
 import { InteractiveState } from "../../hooks/useCodapState";
-import { IDataSet, ICollections, ICaseObjCommon, ICollection } from "../../types";
+import { IDataSet, ICaseObjCommon, ICollection } from "../../types";
 import { Menu } from "../menu";
 import { CaseView } from "./case-view";
+import { CollectionsModelType } from "../../models/collections";
 
 import css from "./card-view.scss";
 
 interface ICardViewProps {
-  selectedDataSet: any;
+  selectedDataSet: IDataSet | null;
   dataSets: IDataSet[];
-  collections: ICollections;
+  collectionsModel: CollectionsModelType;
   interactiveState: InteractiveState
   handleSelectDataSet: (e: React.ChangeEvent<HTMLSelectElement>) => void
   updateTitle: (title: string) => Promise<void>
   selectCases: (caseIds: number[]) => Promise<void>
   codapSelectedCase: ICaseObjCommon|undefined;
 }
 
-export const CardView = (props: ICardViewProps) => {
-  const {collections, dataSets, selectedDataSet, updateTitle, selectCases, codapSelectedCase,
+export const CardView = observer(function CardView(props: ICardViewProps) {
+  const {collectionsModel, dataSets, selectedDataSet, updateTitle, selectCases, codapSelectedCase,
          handleSelectDataSet} = props;
 
-  const rootCollection = useMemo(() => {
-    return collections.find((c: ICollection) => !c.parent);
-  }, [collections]);
-
-  const attrs = useMemo(() => {
-    const result: Record<string, any> = {};
-    collections.forEach(collection => {
-      collection.attrs.forEach(attr => {
-        result[attr.name] = attr;
-      });
-    });
-    return result;
-  }, [collections]);
+  const collections = collectionsModel.collections;
+  const rootCollection = collectionsModel.rootCollection;
+  const attrs = collectionsModel.attrs;
 
   useEffect(() => {
     if (selectedDataSet?.title) {
@@ -59,7 +51,7 @@ export const CardView = (props: ICardViewProps) => {
       result.unshift(id);
 
       const collection = collectionsById[caseItem.collection.id];
-      const parentCollection = collection ? collectionsById[collection.parent] : undefined;
+      const parentCollection = collection?.parent ? collectionsById[collection.parent] : undefined;
       caseItem = parentCollection?.cases.find(c => c.id === parent) as ICaseObjCommon;
     }
 
@@ -88,5 +80,4 @@ export const CardView = (props: ICardViewProps) => {
       />
     </div>
   );
-};
-
+});

src/components/card-view/case-attr-view.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 
 import css from "./card-view.scss";
 
@@ -8,7 +9,7 @@ interface ICaseAttrViewProps {
   attr: any;
 }
 
-export const CaseAttrView = ({name, value, attr}: ICaseAttrViewProps) => {
+export const CaseAttrView = observer(function CaseAttrView({name, value, attr}: ICaseAttrViewProps) {
   const unit = attr.unit ? ` (${attr.unit})` : "";
 
   return (
@@ -17,4 +18,4 @@ export const CaseAttrView = ({name, value, attr}: ICaseAttrViewProps) => {
       <td className={css.value}>{value}</td>
     </tr>
   );
-};
+});

src/components/card-view/case-attrs-view.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 import { IProcessedCaseObj } from "../../types";
 import { CaseAttrView } from "./case-attr-view";
 
@@ -9,14 +10,14 @@ interface ICaseAttrsViewProps {
   attrs: Record<string, any>;
 }
 
-export const CaseAttrsView = ({caseItem: {values}, attrs}: ICaseAttrsViewProps) => {
-  const keys = Object.keys(values);
+export const CaseAttrsView = observer(function CaseAttrsView({caseItem: {values}, attrs}: ICaseAttrsViewProps) {
+  const keys = [...values.keys()];
 
   return (
     <table className={`${css.caseAttrs} ${css.fadeIn}`}>
       <tbody>
-        {keys.map(key => <CaseAttrView key={key} name={key} value={values[key]} attr={attrs[key]} />)}
+        {keys.map(key => <CaseAttrView key={key} name={String(key)} value={values.get(key)} attr={attrs[key]} />)}
       </tbody>
     </table>
   );
-};
+});

src/components/card-view/case-view.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { IProcessedCaseObj } from "../../types";
 import { CaseAttrsView } from "./case-attrs-view";
 import Arrow from "../../assets/arrow.svg";
@@ -22,7 +23,7 @@ interface ICaseViewProps {
   codapSelectedCaseLineage: number[];
 }
 
-export const CaseView = (props: ICaseViewProps) => {
+export const CaseView = observer(function CaseView(props: ICaseViewProps) {
   const {cases, attrs, level, selectCases, codapSelectedCaseLineage} = props;
 
   // default to the first case
@@ -84,4 +85,4 @@ export const CaseView = (props: ICaseViewProps) => {
       }
     </div>
   );
-};
+});