put update attribute visibility in useCallBack, begin refactor of lis…

…tener setup
concord-consortium · Aug 19, 2024 · 8c9d5db · 8c9d5db
1 parent da37943
commit 8c9d5db
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 39 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useCallback } from "react";
 import { clsx } from "clsx";
 import { ILocation } from "../types";
 import { debounce } from "../grasp-seasons/utils/utils";
@@ -90,7 +90,6 @@ export const App: React.FC = () => {
 
   useEffect(() => {
     const initialize = async () => {
-      console.log("| !! Initializing plugin");
       try {
         await initializePlugin({
           pluginName: kPluginName,
@@ -105,45 +104,49 @@ export const App: React.FC = () => {
     initialize();
   }, []);
 
-  useEffect(() => {
-    const handleDataContextChange = async (listenerRes: ClientNotification) => {
-      console.log("| dataContextChangeNotice: ", listenerRes);
-      // TODO: as per discussion with team, it might be more typical
-      // to use the notificaiton as catalyst to ask for state we interested in from CODAP
-      // rather than try to parse the notification for the data we need
+  const handleDataContextChange = useCallback(async (listenerRes: ClientNotification) => {
+    console.log("| dataContextChangeNotice: ", listenerRes);
+    // TODO: as per discussion with team, it might be more typical
+    // to use the notificaiton as catalyst to ask for state we interested in from CODAP
+    // rather than try to parse the notification for the data we need
 
-      const { resource, values } = listenerRes;
-      const isResource = resource === `dataContextChangeNotice[${kDataContextName}]`;
-      if (!isResource || !values.result.success) return;
+    const { resource, values } = listenerRes;
+    const isResource = resource === `dataContextChangeNotice[${kDataContextName}]`;
+    if (!isResource || !values.result.success) return;
 
-      const casesDeleted = values.operation === "selectCases" && values.result.cases.length === 0
-      const caseSelected = values.operation === "selectCases" && values.result.cases.length === 1;
+    const casesDeleted = values.operation === "selectCases" && values.result.cases.length === 0
+    const caseSelected = values.operation === "selectCases" && values.result.cases.length === 1;
 
-      // If cases were deleted, we should update the locations list
-      if (casesDeleted) {
-        const uniqeLocations = await getUniqueLocationsRef.current();
-        if (uniqeLocations) setLocations(uniqeLocations);
-      }
-      // If a case was selected, we should update the dayOfYear
-      else if (caseSelected) {
-        const parentCaseId = values.result.cases[0].parent;
-        const selectedDay = values.result.cases[0].values.dayOfYear;
-        const parentCase = await getCaseByID(kDataContextName, parentCaseId);
-        const selectedLatitude = parentCase.values.case.values.latitude;
-        const selectedLongitude = parentCase.values.case.values.longitude;
-        handleCaseSelectionInCodap(
-          selectedLatitude,
-          selectedLongitude,
-          selectedDay,
-          latitude,
-          longitude,
-          dayOfYear
-        );
-      }
-    };
-    addDataContextChangeListener(kDataContextName, handleDataContextChange);
+    // If cases were deleted, we should update the locations list
+    if (casesDeleted) {
+      const uniqeLocations = await getUniqueLocationsRef.current();
+      if (uniqeLocations) setLocations(uniqeLocations);
+    }
+    // If a case was selected, we should update the dayOfYear
+    else if (caseSelected) {
+      const parentCaseId = values.result.cases[0].parent;
+      const selectedDay = values.result.cases[0].values.dayOfYear;
+      const parentCase = await getCaseByID(kDataContextName, parentCaseId);
+      const selectedLatitude = parentCase.values.case.values.latitude;
+      const selectedLongitude = parentCase.values.case.values.longitude;
+      console.log(`| Selected case: ${latitude}, ${longitude}, ${dayOfYear}`);
+      // make an interface for this - then you could ref to that as ref that is { latitude, longitude, dayOfYear }
+      handleCaseSelectionInCodap(
+        selectedLatitude,
+        selectedLongitude,
+        selectedDay,
+        latitude,
+        longitude,
+        dayOfYear
+      );
+    }
   }, [latitude, longitude, dayOfYear]);
 
+  useEffect(() => {
+    addDataContextChangeListener(kDataContextName, handleDataContextChange);
+  },[handleDataContextChange]);
+  // and then above useEffect dependency array would be [] but make sure we know we are connected to CODAP
+
   const handleTabClick = (tab: "location" | "simulation") => {
     setActiveTab(tab);
     // Update dimensions of the plugin window when switching tabs.

diff --git a/src/hooks/useCodapData.ts b/src/hooks/useCodapData.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { kDataContextName, kChildCollectionName, kParentCollectionName, kParentCollectionAttributes, kChildCollectionAttributes } from "../constants";
 import { DaylightCalcOptions, ILocation } from "../types";
 import { getDayLightInfo, locationsEqual } from "../utils/daylight-utils";
@@ -23,6 +23,7 @@ export const useCodapData = () => {
     if (result.success) {
       let dc = result.values;
       let lastCollection = dc.collections[dc.collections.length - 1];
+      console.trace();
       return await codapInterface.sendRequest({
         action: "delete",
         resource: `dataContext[${kDataContextName}].collection[${lastCollection.name}].allCases`
@@ -33,6 +34,7 @@ export const useCodapData = () => {
   };
 
   const getDayLengthData = async (location: ILocation) => {
+    debugger;
     let createDC;
     const calcOptions: DaylightCalcOptions = {
       latitude: location.latitude,
@@ -84,7 +86,7 @@ export const useCodapData = () => {
     }
   };
 
-  const updateAttributeVisibility = (attributeName: string, hidden: boolean) => {
+  const updateAttributeVisibility = useCallback((attributeName: string, hidden: boolean) => {
     if (!dataContext) return;
 
     try {
@@ -98,7 +100,7 @@ export const useCodapData = () => {
     } catch (error) {
       console.error("Error updating attribute visibility:", error);
     }
-  };
+  }, [dataContext]);
 
   const extractUniqueLocations = (allItems: any): ILocation[] => {
     const uniqueLocations: ILocation[] = [];