Moves CODAP handshake on app load.

Changes collection updating to wait for CODAP notification.
concord-consortium · Apr 5, 2024 · 30ca6c2 · 30ca6c2
1 parent 3a5a87e
commit 30ca6c2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 48 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -9,13 +9,18 @@ import css from "./app.scss";
 
 function App() {
   const {connected, selectedDataSet, dataSets, collections, items, interactiveState,
-         updateInteractiveState: _updateInteractiveState,
+         updateInteractiveState: _updateInteractiveState, init,
          handleSelectDataSet: _handleSelectDataSet, handleUpdateAttributePosition,
          handleAddCollection, handleAddAttribute, handleSetCollections, handleSelectSelf,
          updateTitle, selectCODAPCases, listenForSelectionChanges,
          handleCreateCollectionFromAttribute
         } = useCodapState();
 
+  useEffect(() => {
+    init();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const updateInteractiveState = useCallback((update: Partial<InteractiveState>) => {
     const newState = {...interactiveState, ...update};
     if (JSON.stringify(newState) !== JSON.stringify(interactiveState)) {

diff --git a/src/hooks/useCodapState.tsx b/src/hooks/useCodapState.tsx
@@ -43,7 +43,6 @@ export const useCodapState = () => {
   const [selectedDataSetName, setSelectedDataSetName] = useState<string>("");
   const [collections, setCollections] = useState<ICollections>([]);
   const [items, setItems] = useState<any[]>([]);
-  const [numUpdates, setNumUpdates] = useState<number>(0);
   const [interactiveState, setInteractiveState] = useState<InteractiveState>({
     view: null,
     dataSetName: null,
@@ -68,24 +67,19 @@ export const useCodapState = () => {
     setSelectedDataSet(dataSetInfo?.values);
   };
 
-  useEffect(() => {
-
-    const init = async () => {
-      const newState = await initializePlugin(iFrameDescriptor);
-      addDataContextsListListener(handleDocumentChangeNotice);
-      await getDataSets();
-
-      // plugins in new documents return an empty object for the interactive state
-      // so ignore the new state and keep the default starting state in that case
-      if (Object.keys(newState || {}).length > 0) {
-        setInteractiveState(newState);
-      }
+  const init = async () => {
+    const newState = await initializePlugin(iFrameDescriptor);
+    addDataContextsListListener(handleDocumentChangeNotice);
+    await getDataSets();
 
-      setConnected(true);
-    };
+    // plugins in new documents return an empty object for the interactive state
+    // so ignore the new state and keep the default starting state in that case
+    if (Object.keys(newState || {}).length > 0) {
+      setInteractiveState(newState);
+    }
 
-    init();
-  }, [handleDocumentChangeNotice]);
+    setConnected(true);
+  };
 
   useEffect(() => {
     const handleDataContextChangeNotice = (iMessage: any) => {
@@ -120,19 +114,19 @@ export const useCodapState = () => {
     };
 
     const refreshDataSetInfo = () => {
-      handleSetDataSet(selectedDataSetName);
+      updateCollections();
     };
 
-    const setUpNotifications = async () => {
-      addDataContextChangeListener(selectedDataSet, handleDataContextChangeNotice);
+    const setUpNotifications = () => {
+      addDataContextChangeListener(selectedDataSet.name, handleDataContextChangeNotice);
     };
 
     if (selectedDataSet) {
       setUpNotifications();
     }
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDataSetName]);
+  }, [selectedDataSet, selectedDataSetName]);
 
   const updateCollections = useCallback(async () => {
     const colls = await getDataSetCollections(selectedDataSet.name);
@@ -145,7 +139,8 @@ export const useCodapState = () => {
     } else {
       setCollections([]);
     }
-  }, [selectedDataSet, updateCollections]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDataSet]);
 
   useEffect(() => {
     const fetchItems = async () => {
@@ -166,11 +161,6 @@ export const useCodapState = () => {
     return selected.length ? handleSetDataSet(selected[0].name) : handleSetDataSet(null);
   };
 
-  const handleRefreshDataSet = () => {
-    setNumUpdates(numUpdates + 1);
-    return selectedDataSet ? handleSetDataSet(selectedDataSet) : handleSetDataSet(null);
-  };
-
   const getCollectionNameFromId = (id: number) => {
     return collections.find((c: ICollection) => c.id === id)?.name;
   };
@@ -186,12 +176,7 @@ export const useCodapState = () => {
   };
 
   const handleCreateCollectionFromAttribute = async (collection: ICollection, attr: any, parent: number|string) => {
-    const result = await createCollectionFromAttribute(selectedDataSet.name, collection.name, attr, parent);
-    console.log("***** in handleCreateCollectionFromAttribute, result: ", result);
-    // update collections because CODAP does not send dataContextChangeNotice
-    const newCollectionList = await getCollectionList(selectedDataSet.name);
-    console.log("***** in handleCreateCollectionFromAttribute, newCollectionList: ", newCollectionList);
-    updateCollections();
+    await createCollectionFromAttribute(selectedDataSet.name, collection.name, attr, parent);
   };
 
   const handleAddAttribute = async (collection: ICollection, attrName: string) => {
@@ -260,13 +245,13 @@ export const useCodapState = () => {
   }, [selectedDataSet]);
 
   return {
+    init,
     handleSelectSelf,
     dataSets,
     selectedDataSet,
     collections,
     handleSetCollections: setCollections,
     handleSelectDataSet,
-    handleRefreshDataSet,
     getCollectionNameFromId,
     updateInteractiveState,
     interactiveState,

diff --git a/src/hooks/useDraggableTable.ts b/src/hooks/useDraggableTable.ts
@@ -1,6 +1,5 @@
 import React, { useContext, useState, createContext, useCallback, useRef } from "react";
 import { ICollection } from "../types";
-import { updateCollectionAttributes } from "./useDragging";
 
 export type Side = "left"|"right";
 
@@ -37,8 +36,7 @@ interface IUseDraggableTableOptions {
 }
 
 export const useDraggableTable = (options: IUseDraggableTableOptions) => {
-  const {collections, handleSetCollections, handleUpdateAttributePosition,
-         handleCreateCollectionFromAttribute} = options;
+  const {collections, handleUpdateAttributePosition, handleCreateCollectionFromAttribute} = options;
   const [dragId, setDragId] = useState<string|undefined>(undefined);
   const [dragOverId, setDragOverId] = useState<string|undefined>(undefined);
   const [dragSide, setDragSide] = useState<Side|undefined>("left");
@@ -148,26 +146,17 @@ export const useDraggableTable = (options: IUseDraggableTableOptions) => {
 
         if (target.collection.id === source.collection.id) {
           if (sourceIndex !== newIndex) {
-            const newCollections = updateCollectionAttributes(collections, source.collection, target.collection,
-              sourceIndex, newIndex, null);
-            handleSetCollections(newCollections);
             handleUpdateAttributePosition(source.collection, source.attr.name, newIndex);
           }
         } else {
-          const newCollections = updateCollectionAttributes(collections, source.collection, target.collection,
-            sourceIndex, newIndex, source.attr);
-          handleSetCollections(newCollections);
           handleUpdateAttributePosition(target.collection, source.attr.name, newIndex);
         }
       }
     }
 
     setDragging(false);
     setDragOverId(undefined);
-  }, [
-    dragSide, collections, dragId, getCollectionAndAttribute, handleSetCollections, handleUpdateAttributePosition,
-    handleCreateCollectionFromAttribute
-  ]);
+  }, [dragSide, dragId, getCollectionAndAttribute, handleUpdateAttributePosition, handleCreateCollectionFromAttribute]);
 
   const handleDragEnd = (e: React.DragEvent<HTMLTableCellElement>) => setDragging(false);