chore: expand collections model

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, handleSelectSelf,
          updateTitle, selectCODAPCases, listenForSelectionChanges,
          handleCreateCollectionFromAttribute, handleSetCollections,
          handleSortAttribute, editCaseValue } = useCodapState();
+  const collections = collectionsModel.collections;
 
   useEffect(() => {
     init();
@@ -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,16 +1,17 @@
 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: IDataSet | null;
   dataSets: IDataSet[];
-  collections: ICollections;
+  collectionsModel: CollectionsModelType;
   interactiveState: InteractiveState
   handleSelectDataSet: (e: React.ChangeEvent<HTMLSelectElement>) => void
   updateTitle: (title: string) => Promise<void>
@@ -19,24 +20,12 @@ interface ICardViewProps {
 }
 
 export const CardView = observer(function CardView(props: ICardViewProps) {
-  const {collections, dataSets, selectedDataSet, updateTitle, selectCases, codapSelectedCase,
+  const {collectionsModel, dataSets, selectedDataSet, updateTitle, selectCases, codapSelectedCase,
          handleSelectDataSet} = props;
 
-  const rootCollection = useMemo(() => {
-    return collections.find((c: ICollection) => !c.parent);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [collections, collections.length]);
-
-  const attrs = useMemo(() => {
-    const result: Record<string, any> = {};
-    collections.forEach(collection => {
-      collection.attrs.forEach(attr => {
-        result[attr.name] = attr;
-      });
-    });
-    return result;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [collections, collections.length]);
+  const collections = collectionsModel.collections;
+  const rootCollection = collectionsModel.rootCollection;
+  const attrs = collectionsModel.attrs;
 
   useEffect(() => {
     if (selectedDataSet?.title) {

src/hooks/useCodapState.tsx

@@ -48,7 +48,7 @@ export const useCodapState = () => {
   });
   const [selectedDataSet, setSelectedDataSet] = useState<IDataSet|null>(null);
   const [selectedDataSetName, setSelectedDataSetName] = useState<string>("");
-  const [collections] = useState<CollectionsModelType>(() => {
+  const [collectionsModel] = useState<CollectionsModelType>(() => {
     const newCollectionsModel = CollectionsModel.create();
     unprotect(newCollectionsModel);
     return newCollectionsModel;
@@ -159,8 +159,8 @@ export const useCodapState = () => {
         collapseChildren, guid, id, name, parent, title, type
       };
     });
-    applySnapshot(collections, newCollectionModels);
-  }, [collections]);
+    applySnapshot(collectionsModel, {collections: newCollectionModels});
+  }, [collectionsModel]);
 
   const updateCollections = useCallback(async () => {
     const colls = await getDataSetCollections(selectedDataSetName);
@@ -171,33 +171,33 @@ export const useCodapState = () => {
     if (selectedDataSet) {
       updateCollections();
     } else {
-      runInAction(() => collections.clear());
+      runInAction(() => collectionsModel.collections.clear());
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDataSet]);
 
   useEffect(() => {
     const fetchCases = async () => {
       if (selectedDataSet) {
-        const fetchedCases = await getCases(selectedDataSet.name, collections[0].name);
+        const fetchedCases = await getCases(selectedDataSet.name, collectionsModel.collections[0].name);
         setCases(fetchedCases);
       }
     };
 
-    if (collections.length === 1 && selectedDataSet) {
+    if (collectionsModel.collections.length === 1 && selectedDataSet) {
       fetchCases();
     } else {
       setCases([]);
     }
-  }, [collections, selectedDataSet]);
+  }, [collectionsModel, selectedDataSet]);
 
 
   const handleSelectDataSet = (name: string) => {
     handleSetDataSet(name);
   };
 
   const getCollectionNameFromId = (id: number) => {
-    return collections.find(c => c.id === id)?.name;
+    return collectionsModel.collections.find(c => c.id === id)?.name;
   };
 
   const handleUpdateAttributePosition = async (coll: ICollection, attrName: string, position: number) => {
@@ -233,7 +233,7 @@ export const useCodapState = () => {
     const proposedName = attrName.length ? attrName : "newAttr";
     let newAttributeName;
     const allAttributes: Array<any> = [];
-    collections.map((coll) => coll.attrs.map((attr) => allAttributes.push(attr)));
+    collectionsModel.collections.map((coll) => coll.attrs.map((attr) => allAttributes.push(attr)));
     const attrNameAlreadyUsed = allAttributes.find((attr) => attr.name === proposedName);
     if (!attrNameAlreadyUsed) {
       newAttributeName = proposedName;
@@ -314,7 +314,7 @@ export const useCodapState = () => {
     handleSelectSelf,
     dataSets,
     selectedDataSet,
-    collections,
+    collectionsModel,
     handleSetCollections,
     handleSelectDataSet,
     getCollectionNameFromId,

src/models/collections.ts

@@ -19,6 +19,22 @@ export const CollectionModel = types.model("CollectionModel", {
 
 export type CollectionModelType = Instance<typeof CollectionModel>;
 
-export const CollectionsModel = types.array(CollectionModel);
+export const CollectionsModel = types.model("CollectionsModel", {
+  collections: types.array(CollectionModel)
+})
+.views(self => ({
+  get rootCollection() {
+    return self.collections.find(c => !c.parent);
+  },
+  get attrs() {
+    const result: Record<string, any> = {};
+    self.collections.forEach(collection => {
+      collection.attrs.forEach(attr => {
+        result[attr.name] = attr;
+      });
+    });
+    return result;
+  }
+}));
 
 export type CollectionsModelType = Instance<typeof CollectionsModel>;