tags owned by device are loaded with device page data, adding tag is object agnostic

src/device/DeviceActions.tsx

@@ -27,8 +27,8 @@ import {
   Wifi as WifiIcon
 } from "@mui/icons-material";
 import { Skeleton } from "@mui/material";
-import Datadog from "assets/external/datadog.png";
-import { ImgIcon } from "common/ImgIcon";
+// import Datadog from "assets/external/datadog.png";
+// import { ImgIcon } from "common/ImgIcon";
 import NotificationButton from "common/NotificationButton";
 // import ComponentOrder from "component/ComponentOrder";
 // import ComponentSettings from "component/ComponentSettings";
@@ -44,7 +44,7 @@ import { cloneDeep } from "lodash";
 // import { Component, Device, deviceScope, Interaction } from "models";
 import { Device, deviceScope } from "models";
 // import { MatchParams } from "navigation/Routes";
-import { isShareableLink } from "pbHelpers/Device";
+// import { isShareableLink } from "pbHelpers/Device";
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers";
 import React, { useState } from "react";
@@ -64,7 +64,7 @@ import { useNavigate } from "react-router-dom";
 import DeviceSettings from "device/DeviceSettings";
 import ObjectTeams from "teams/ObjectTeams";
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles((_theme: Theme) => {
   // const isMobile = useMobile()
   return ({
     greenIcon: {
@@ -373,7 +373,6 @@ export default function DeviceActions(props: Props) {
       isJsonDataDialogOpen
     } = dialogState;
 
-    console.log(canWrite)
     return (
       <React.Fragment>
         <DeviceSettings

src/device/DeviceOverview.tsx

@@ -39,11 +39,12 @@ interface Props {
   usage?: Usage;
   loading?: boolean;
   disableAddTag?: boolean;
+  tags: pond.Tag[];
 }
 
 export default function DeviceOverview(props: Props) {
   const [{ user, firmware }] = useGlobalState();
-  const { device, components, usage, loading, disableAddTag } = props;
+  const { device, components, usage, loading, disableAddTag, tags } = props;
   const prevComponents = usePrevious(components);
   const { info } = useSnackbar();
   const classes = useStyles();
@@ -224,7 +225,7 @@ export default function DeviceOverview(props: Props) {
             <StatusChip status="pending" />
           </Grid>
         )}
-        {user.allowedTo("provision") && <DeviceTags device={device} disableAdd={disableAddTag} />}
+        {user.allowedTo("provision") && <DeviceTags tags={tags} device={device} disableAdd={disableAddTag} />}
       </Grid>
     );
   };

src/device/DeviceTags.tsx

@@ -22,6 +22,7 @@ import { filterByTag } from "pbHelpers/Tag";
 import { useDeviceAPI, useSnackbar, useTagAPI } from "providers";
 import React, { useEffect, useRef, useState } from "react";
 import { pond } from "protobuf-ts/pond";
+import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 
 const useStyles = makeStyles((_theme: Theme) => {
   return ({
@@ -128,6 +129,7 @@ function DeviceTag(props: DeviceTagProps) {
 interface DeviceTagsProps {
   device: Device;
   disableAdd?: boolean;
+  tags: pond.Tag[];
 }
 
 export default function DeviceTags(props: DeviceTagsProps) {
@@ -155,19 +157,45 @@ export default function DeviceTags(props: DeviceTagsProps) {
   }
 
   useEffect(() => {
-    console.log(tags)
-  }, [tags])
+    console.log(props.tags)
+    let newTags: string[] = []
+    props.tags.forEach(tag => {
+      if (tag.settings) newTags.push(tag.settings?.key)
+    })
+    setDeviceTags(newTags)
+  }, [props.tags])
 
   useEffect(() => {
     loadTags()
   }, [])
 
-  useEffect(() => {
-    if (previousDeviceRef.current !== device) {
-      setDeviceTags(device.status.tagKeys);
-      previousDeviceRef.current = device;
-    }
-  }, [device]);
+  // useEffect(() => {
+  //   // if (previousDeviceRef.current !== device) {
+  //     let keys = getContextKeys()
+  //     keys.push(device.id().toString())
+  //     let types = getContextTypes()
+  //     types.push("device")
+  //     setDeviceTags(device.status.tagKeys);
+  //     previousDeviceRef.current = device;
+  //     tagAPI.listTags(
+  //       undefined,
+  //       undefined,
+  //       undefined,
+  //       undefined,
+  //       undefined,
+  //       undefined,
+  //       keys,
+  //       types, 
+  //     ).then(resp => {
+  //       // console.log(resp.data)
+  //       let newTagKeys: string[] = []
+  //       resp.data.tags.forEach((tag: any) => {
+  //         newTagKeys.push(tag.settings.key)
+  //       })
+  //       setDeviceTags(newTagKeys)
+  //     })
+  //   // }
+  // }, [device]);
 
   const addTag = (tag: Tag) => {
     if (!deviceTags.some(dt => dt === tag.key())) {
@@ -195,12 +223,6 @@ export default function DeviceTags(props: DeviceTagsProps) {
     return null;
   }
 
-  if (loading) {
-    return (
-      <CircularProgress />
-    )
-  }
-
   return (
     <React.Fragment>
       {deviceTags.map(key => {