update locations array on get data, delete data and on cases deletion

src/assets/scss/location-tab.scss

@@ -24,7 +24,7 @@
   }
 
   .or {
-    display: none; // TODO: temporary, come back to this
+    display: none; // TODO: bring this or element back
     background-color: white;
     width: 40px;
     padding:0px 10px;

src/components/App.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { clsx } from "clsx";
 import { ILocation } from "../types";
-import { kInitialDimensions, kVersion, kPluginName, kDefaultOnAttributes, kSimulationTabDimensions } from "../constants";
-import { initializePlugin, codapInterface } from "@concord-consortium/codap-plugin-api";
+import { kInitialDimensions, kVersion, kPluginName, kDefaultOnAttributes, kSimulationTabDimensions, kDataContextName } from "../constants";
+import { initializePlugin, codapInterface, addDataContextChangeListener, ClientNotification } from "@concord-consortium/codap-plugin-api";
+import { useCodapData } from "../hooks/useCodapData";
 import { LocationTab } from "./location-tab";
 import { SimulationTab } from "./simulation-tab";
 import { Header } from "./header";
@@ -20,6 +21,8 @@ export const App: React.FC = () => {
   const [selectedAttrs, setSelectedAttributes] = useState<string[]>(kDefaultOnAttributes);
   const [dataContext, setDataContext] = useState<any>(null);
 
+  const { getUniqueLocationsInCodapData } = useCodapData();
+
   useEffect(() => {
     const initialize = async () => {
       try {
@@ -31,10 +34,24 @@ export const App: React.FC = () => {
       } catch (e) {
         console.error("Failed to initialize plugin, error:", e);
       }
+
+      const casesDeletedFromCodapListener = async (listenerRes: ClientNotification) => {
+        const { resource, values } = listenerRes;
+        const isResource = resource === `dataContextChangeNotice[${kDataContextName}]`;
+        if (!isResource) return;
+
+        const casesDeleted = values.operation === "selectCases" && values.result.cases.length === 0 && values.result.success;
+
+        if ( casesDeleted ) {
+          const uniqeLocations = await getUniqueLocationsInCodapData();
+          if (uniqeLocations) setLocations(uniqeLocations);
+        }
+      };
+      addDataContextChangeListener(kDataContextName, casesDeletedFromCodapListener);
     };
 
     initialize();
-  }, []);
+  }, [getUniqueLocationsInCodapData]);
 
   const handleTabClick = (tab: "location" | "simulation") => {
     setActiveTab(tab);

src/components/location-tab.tsx

@@ -39,10 +39,10 @@ export const LocationTab: React.FC<LocationTabProps> = ({
 }) => {
   const {
     dataContext,
-    handleClearDataClick,
+    handleClearData,
     getDayLengthData,
     updateAttributeVisibility,
-    calculateUniqueUserLocations
+    getUniqueLocationsInCodapData
   } = useCodapData();
 
   useEffect(() => {
@@ -90,19 +90,22 @@ export const LocationTab: React.FC<LocationTabProps> = ({
     }
   };
 
+  const handleClearDataClick = async () => {
+    await handleClearData();
+    setLocations([]);
+  };
+
   const handleGetDataClick = async () => {
     const locationExists = locations.some(item =>
       item.latitude === location?.latitude && item.longitude === location.longitude
     );
+    // if we already have the location or not all required fields are filled out, return
     if (locationExists || !latitude || !longitude) return;
-    // TODO separate this logic above ...
-    // TODO we should be doing this on an effect not on this click
-    // then we could be removing items when the location is removed without a listener, we'd
-    // just circle back to the CODAP data reliably.
 
+    // otherwise, get the data and set the locations
     const tableCreated = await getDayLengthData(Number(latitude), Number(longitude), location);
     if (tableCreated?.success) {
-      const uniqeLocations = await calculateUniqueUserLocations();
+      const uniqeLocations = await getUniqueLocationsInCodapData();
       if (uniqeLocations) setLocations(uniqeLocations);
     }
   };

src/hooks/useCodapData.ts

@@ -18,7 +18,7 @@ import {
 export const useCodapData = () => {
   const [dataContext, setDataContext] = useState<any>(null);
 
-  const handleClearDataClick = async () => {
+  const handleClearData = async () => {
     let result = await getDataContext(kDataContextName);
     if (result.success) {
       let dc = result.values;
@@ -125,7 +125,7 @@ export const useCodapData = () => {
   }
 
 
-  const calculateUniqueUserLocations = async () => {
+  const getUniqueLocationsInCodapData = async () => {
     const locationAttr = await getAttribute(kDataContextName, kParentCollectionName, "location");
     if (locationAttr.success){
       const allItems = await getAllItems(kDataContextName);
@@ -139,9 +139,9 @@ export const useCodapData = () => {
   return {
     dataContext,
     updateAttributeVisibility,
-    handleClearDataClick,
+    handleClearData,
     getDayLengthData,
-    calculateUniqueUserLocations,
+    getUniqueLocationsInCodapData,
     extractUniqueLocations
   };
 };