retain toggle in dashboard, refresh when new devices loaded

interface/src/app/main/Dashboard.tsx

@@ -24,7 +24,7 @@ import { useRequest } from 'alova/client';
 import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
-import { useInterval } from 'utils';
+import { useInterval, usePersistState } from 'utils';
 
 import { readDashboard, writeDeviceValue } from '../../api/app';
 import DeviceIcon from './DeviceIcon';
@@ -44,11 +44,10 @@ const Dashboard = () => {
 
   useLayoutTitle(LL.DASHBOARD());
 
-  const [firstLoad, setFirstLoad] = useState<boolean>(true);
-  const [showAll, setShowAll] = useState<boolean>(true);
+  const [showAll, setShowAll] = usePersistState(true, 'showAll');
 
   const [deviceValueDialogOpen, setDeviceValueDialogOpen] = useState<boolean>(false);
-
+  const [parentNodes, setParentNodes] = useState<number>(0);
   const [selectedDashboardItem, setSelectedDashboardItem] =
     useState<DashboardItem>();
 
@@ -59,6 +58,10 @@ const Dashboard = () => {
     loading
   } = useRequest(readDashboard, {
     initialData: []
+  }).onSuccess((event) => {
+    if (event.data.length > parentNodes) {
+      setParentNodes(event.data.length); // count number of parents/devices
+    }
   });
 
   const { loading: submitting, send: sendDeviceValue } = useRequest(
@@ -145,13 +148,11 @@ const Dashboard = () => {
     }
   }, 3000);
 
-  // auto expand on first load
   useEffect(() => {
-    if (firstLoad && Array.isArray(data) && data.length && !tree.state.ids.length) {
-      tree.fns.onToggleAll({});
-      setFirstLoad(false);
-    }
-  }, [loading]);
+    showAll
+      ? tree.fns.onAddAll(data.map((item: DashboardItem) => item.id)) // expand tree
+      : tree.fns.onRemoveAll(); // collapse tree
+  }, [parentNodes]);
 
   const showType = (n?: string, t?: number) => {
     // if we have a name show it

interface/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './useRest';
 export * from './useInterval';
 export * from './props';
 export * from './file';
+export * from './usePersistState';

interface/src/utils/usePersistState.ts

@@ -0,0 +1,26 @@
+import { useEffect, useMemo, useState } from 'react';
+
+export const usePersistState = <T>(
+  initial_value: T,
+  id: string
+): [T, (new_state: T) => void] => {
+  // Set initial value
+  const _initial_value = useMemo(() => {
+    const local_storage_value_str = localStorage.getItem('state:' + id);
+    // If there is a value stored in localStorage, use that
+    if (local_storage_value_str) {
+      return JSON.parse(local_storage_value_str);
+    }
+    // Otherwise use initial_value that was passed to the function
+    return initial_value;
+  }, []);
+
+  const [state, setState] = useState(_initial_value);
+
+  useEffect(() => {
+    const state_str = JSON.stringify(state); // Stringified state
+    localStorage.setItem('state:' + id, state_str); // Set stringified state as item in localStorage
+  }, [state]);
+
+  return [state, setState];
+};