Save + get interactive state. (PT-186939189)

src/components/App.tsx

@@ -14,6 +14,8 @@ import { composeURL, formatData } from "../utils/noaaApiHelper";
 import { StationDSName } from "../constants";
 import { geoLocSearch } from "../utils/geonameSearch";
 import { DataReturnWarning } from "./data-return-warning";
+import { IState } from "../types";
+import dayjs from "dayjs";
 
 import "./App.scss";
 
@@ -33,7 +35,37 @@ export const App = () => {
   const weatherStations = getWeatherStations();
 
   useEffect(() => {
-    initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions});
+
+    const init = async () => {
+      const newState = await initializePlugin({pluginName: kPluginName, version: kVersion, dimensions: kInitialDimensions}) as IState;
+      // 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) {
+        setState((draft) => {
+          draft.location = newState.location;
+          draft.selectedFrequency = newState.selectedFrequency;
+          draft.units = newState.units;
+          draft.timezone = newState.timezone;
+          draft.weatherStation = newState.weatherStation;
+          draft.weatherStationDistance = newState.weatherStationDistance;
+          draft.zoomMap = newState.zoomMap;
+          draft.frequencies = newState.frequencies;
+          draft.didUserSelectDate = newState.didUserSelectDate;
+          draft.isMapOpen = newState.isMapOpen;
+
+          const startDateStr = newState.startDate;
+          const endDateStr = newState.endDate;
+          if (startDateStr) {
+            draft.startDate = dayjs(startDateStr).toDate();
+          }
+          if (endDateStr) {
+            draft.endDate = dayjs(endDateStr).toDate();
+          }
+        });
+      }
+    };
+
+    init();
 
 
     const stationSelectionHandler = async(req: any) =>{

src/hooks/use-state.tsx

@@ -1,6 +1,7 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect } from "react";
 import { Updater, useImmer } from "use-immer";
 import { IState, DefaultState } from "../types";
+import { codapInterface } from "@concord-consortium/codap-plugin-api";
 
 export interface IStateContext {
   state: IState;
@@ -10,10 +11,17 @@ export interface IStateContext {
 export const useStateContextInAppContainerOnly = (): IStateContext => {
   const [state, setState] = useImmer<IState>(DefaultState);
 
-  return { state, setState };
+  useEffect(() => {
+    codapInterface.updateInteractiveState(state);
+  }, [state]);
+
+
+  return {
+    state,
+    setState
+  };
 };
 
 // note: the "setState: () => undefined" is fine as it is overridden in the AppContainer.Provider tag
 export const StateContext = createContext<IStateContext>({state: DefaultState, setState: () => undefined});
-
 export const useStateContext = () => useContext(StateContext);