support page caches page data to the bread crumbs for quick navigation back to device page

src/device/DeviceActions.tsx

@@ -48,7 +48,7 @@ import { Component, Device, deviceScope, Interaction } from "models";
 // import { isShareableLink } from "pbHelpers/Device";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 // import { useHistory, useRouteMatch } from "react-router";
 import { isOffline } from "utils/environment";
 import { or } from "utils/types";
@@ -72,6 +72,7 @@ import Connection from "./Connection";
 import ComponentOrder from "component/ComponentOrder";
 import ArcGISDeviceData from "./ArcGISDeviceData";
 import UpgradeDevice from "./UpgradeDevice";
+import { DevicePageData } from "pages/Device";
 
 const useStyles = makeStyles((_theme: Theme) => {
   // const isMobile = useMobile()
@@ -170,6 +171,19 @@ export default function DeviceActions(props: Props) {
     isJsonDataDialogOpen: false
   });
 
+  const [devicePageData, setDevicePageData] = useState<DevicePageData | undefined>(undefined);
+
+  useEffect(() => {
+    let newPageData: DevicePageData = {
+      device: device,
+      components: components,
+      interactions: interactions,
+      preferences: preferences,
+      permissions: permissions,
+    }
+    setDevicePageData(newPageData)
+  }, [device, components, interactions, preferences, permissions])
+
   const openDialog = (target: keyof DialogState) => {
     let updatedDialogState = cloneDeep(dialogState);
     updatedDialogState[target] = true;
@@ -500,7 +514,7 @@ export default function DeviceActions(props: Props) {
     return (
       <React.Fragment>
         {user.allowedTo("provision") && <Tooltip title="Support">
-          <IconButton onClick={() => navigate("support", { state: {device: device} })}>
+          <IconButton onClick={() => navigate("support", { state: {device: device, devicePageData: devicePageData }})}>
             <Visibility />
           </IconButton>
         </Tooltip>}

src/pages/Device.tsx

@@ -22,6 +22,15 @@ import { or } from "utils";
 import ComponentDiagnostics from "component/ComponentDiagnostics";
 import DeviceWizard from "device/DeviceWizard";
 
+export interface DevicePageData {
+  device: Device;
+  components: Component[];
+  interactions: Interaction[];
+  permissions: pond.Permission[];
+  preferences: pond.DevicePreferences;
+  // componentPreferences: Map<string, pond.DeviceComponentPreferences>
+}
+
 export default function DevicePage() {
   const deviceAPI = useDeviceAPI()
   const snackbar = useSnackbar()
@@ -52,16 +61,21 @@ export default function DevicePage() {
 
   const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
 
+  // const [devicePageData, setDevicePageData] = useState(pond.GetDevicePageDataResponse.create())
+
   const loadDevice = () => {
-    // console.log("load device page data")
     if (loading) return
-    console.log(state)
+    if (state?.devicePageData) {
-    if (state?.device) {
+      setDevice(Device.create(state.devicePageData.device))
-      console.log(Device.create(state.device))
+      setComponents(state.devicePageData.components.map((comp: pond.Component) => Component.create(comp)))
+      setInteractions(state.devicePageData.interactions.map((inter: pond.Interaction) => Interaction.create(inter)))
+      setPreferences(state.devicePageData.preferences)
+      setPermissions(state.devicePageData.permissions)
       return
     }
     setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes(), as).then(resp => {
+      // setDevicePageData(resp.data)
       let device = Device.any(resp.data.device)
       // console.log(resp.data.device)
       setDevice(device)

src/pages/DeviceSupport.tsx

@@ -5,9 +5,10 @@ import LogsDisplay from "common/LogsDisplay";
 import { useEffect, useState } from "react";
 import { useDeviceAPI, useSnackbar } from "hooks";
 import { useLocation, useParams } from "react-router-dom";
-import { Device } from "models";
+import { Component, Device, Interaction } from "models";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
+import { DevicePageData } from "./Device";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -37,7 +38,8 @@ export default function DeviceSupport() {
   const theme = useTheme()
 
   const { state } = useLocation();
-  const [device, setDevice] = useState<Device>(state?.device ? Device.create(state.device) : Device.create())
+  const [device, setDevice] = useState<Device>(Device.create())
+  const [devicePageData, setDevicePageData] = useState<DevicePageData>(state?.devicePageData ? state.devicePageData : undefined)
   const [tabNumber, setTabNumber] = useState(0)
   const [newCap, setNewCap] = useState(0);
   const [datacap, setDatacap] = useState<number>();
@@ -48,12 +50,29 @@ export default function DeviceSupport() {
     pond.DevicePlatform.DEVICE_PLATFORM_INVALID
   );
 
-  useEffect(() => {
+  // useEffect(() => {
-    if (state?.device) return
+  //   if (state?.device) return
-    deviceAPI.get(deviceID, undefined, getContextKeys(), getContextTypes()).then(resp => {
+  //   deviceAPI.get(deviceID, undefined, getContextKeys(), getContextTypes()).then(resp => {
-      setDevice(Device.create(resp.data))
+  //     setDevice(Device.create(resp.data))
+  //   })
+  // }, [deviceID, state?.device])
+
+	useEffect(() => {
+    if (state?.devicePageData) {
+			setDevice(Device.create(state?.devicePageData.device))
+			return
+		}
+    deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
+      setDevice(resp.data?.device ? Device.create(resp.data?.device) : Device.create())
+			setDevicePageData({
+				device: resp.data.device ? Device.create(resp.data.device) : Device.create(),
+				components: resp.data.components.map(comp => Component.create(comp)),
+				interactions: resp.data.interactions.map(interaction => Interaction.create(interaction)),
+				permissions: resp.data.permissions,
+				preferences: resp.data.user?.preferences as pond.DevicePreferences
+			})
     })
-  }, [deviceID, state?.device])
+  }, [deviceID, state?.devicePageData])
 
   const handleChange = (_event: React.ChangeEvent<{}>, newValue: number) => {
     setTabNumber(newValue);
@@ -134,7 +153,7 @@ export default function DeviceSupport() {
 
 	return (
 		<PageContainer>
-      <SmartBreadcrumb deviceName={device.name()} state={{device: device}} />
+      <SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} />
 			<Tabs
 				style={{ position: "sticky" }}
 				value={tabNumber}