implemented new tag method

src/device/DeviceOverview.tsx

@@ -16,7 +16,7 @@ import { notNull, or } from "utils/types";
 // import { MatchParams } from "navigation/Routes";
 // import DeviceHologram from "./DeviceHologram";
 import { makeStyles } from "@mui/styles";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 const useStyles = makeStyles((_theme: Theme) => {
   return ({
@@ -39,13 +39,12 @@ interface Props {
   usage?: Usage;
   loading?: boolean;
   disableAddTag?: boolean;
-  tags: pond.Tag[];
   groupID?: number;
 }
 
 export default function DeviceOverview(props: Props) {
   const [{ user, firmware }] = useGlobalState();
-  const { device, components, groupID, usage, loading, disableAddTag, tags } = props;
+  const { device, components, groupID, usage, loading, disableAddTag } = props;
   const prevComponents = usePrevious(components);
   const { info } = useSnackbar();
   const classes = useStyles();
@@ -156,8 +155,8 @@ export default function DeviceOverview(props: Props) {
                 variant={modemComponent ? "filled" : "outlined"}
                 clickable={modemComponent !== null}
                 onClick={() => {
-                  console.log(modemComponent)
-                  console.log(modemComponent?.key())
+                  // console.log(modemComponent)
+                  // console.log(modemComponent?.key())
                   if (modemComponent && modemComponent.key()) {
                     navigate(pathToDevice() + "/components/" + modemComponent.key());
                   }
@@ -234,7 +233,7 @@ export default function DeviceOverview(props: Props) {
             <StatusChip status="pending" />
           </Grid>
         )}
-        {user.allowedTo("provision") && <DeviceTags tags={tags} device={device} disableAdd={disableAddTag} />}
+        {user.allowedTo("provision") && <DeviceTags device={device} disableAdd={disableAddTag} />}
       </Grid>
     );
   };

src/device/DeviceSettings.tsx

@@ -17,7 +17,6 @@ import {
   Theme,
   Typography
 } from "@mui/material";
-// import { Theme } from "@material-ui/core/styles/createMuiTheme";
 import DeleteButton from "common/DeleteButton";
 import PeriodSelect from "common/time/PeriodSelect";
 import ResponsiveDialog from "common/ResponsiveDialog";
@@ -27,7 +26,6 @@ import { IsExtended, ListDeviceProductDescribers } from "products/DeviceProduct"
 import { pond } from "protobuf-ts/pond";
 import { useGlobalState } from "providers";
 import React, { useEffect, useState } from "react";
-// import { useHistory } from "react-router";
 import { quack } from "protobuf-ts/quack";
 import LinearMutationBuilder from "common/LinearMutationBuilder";
 import { makeStyles } from "@mui/styles";

src/device/DeviceTags.tsx

@@ -19,7 +19,7 @@ import TagSettings from "common/TagSettings";
 import { Device, Tag } from "models";
 import { filterByTag } from "pbHelpers/Tag";
 import { useDeviceAPI, useSnackbar, useTagAPI } from "providers";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { pond } from "protobuf-ts/pond";
 
 const useStyles = makeStyles((_theme: Theme) => {
@@ -32,7 +32,7 @@ const useStyles = makeStyles((_theme: Theme) => {
 
 interface AddDeviceTagProps {
   device: Device;
-  deviceTags: string[];
+  deviceTags: pond.TagSettings[];
   addTagToDevice: (tag: Tag) => void;
 }
 
@@ -60,7 +60,7 @@ function AddDeviceTag(props: AddDeviceTagProps) {
   }, [])
 
   const tagItems = tags
-    .filter(tag => !deviceTags.some(key => key === tag.settings.key))
+    .filter(tag => !deviceTags.some(tagSettings => tagSettings.key === tag.settings.key))
     .filter(tag => filterByTag(searchValue, tag))
     .sort((a, b) => (a.name().toLowerCase() > b.name().toLowerCase() ? 1 : -1))
     .map((tag, index, array) => (
@@ -102,7 +102,10 @@ function AddDeviceTag(props: AddDeviceTagProps) {
           </List>
         </DialogContent>
       </Dialog>
-      <TagSettings open={createNewOpen} mode="add" onClose={() => setCreateNewOpen(false)} />
+      <TagSettings open={createNewOpen} mode="add" onClose={() => {
+        setCreateNewOpen(false)
+        loadTags()
+      }} />
     </React.Fragment>
   );
 }
@@ -127,7 +130,6 @@ function DeviceTag(props: DeviceTagProps) {
 interface DeviceTagsProps {
   device: Device;
   disableAdd?: boolean;
-  tags: pond.Tag[];
 }
 
 export default function DeviceTags(props: DeviceTagsProps) {
@@ -138,8 +140,8 @@ export default function DeviceTags(props: DeviceTagsProps) {
   // const [loading, setLoading] = useState(false)
   const deviceAPI = useDeviceAPI();
   const { error } = useSnackbar();
-  const [deviceTags, setDeviceTags] = useState<string[]>(device.status.tagKeys);
-  // const previousDeviceRef = useRef(device);
+  const [deviceTags, setDeviceTags] = useState<pond.TagSettings[]>(device.status.tags);
+  const previousDeviceRef = useRef(device);
 
   const loadTags = () => {
     // setLoading(true)
@@ -155,36 +157,35 @@ export default function DeviceTags(props: DeviceTagsProps) {
   }
 
   useEffect(() => {
-    let newTags: string[] = []
-    props.tags.forEach(tag => {
-      if (tag.settings) newTags.push(tag.settings?.key)
-    })
-    setDeviceTags(newTags)
-  }, [props.tags])
+    if (previousDeviceRef.current !== device) {
+      setDeviceTags(device.status.tags);
+      previousDeviceRef.current = device;
+    }
+  }, [device]);
 
   useEffect(() => {
     loadTags()
   }, [])
 
   const addTag = (tag: Tag) => {
-    if (!deviceTags.some(dt => dt === tag.key())) {
+    if (!deviceTags.some(dt => dt.key === tag.settings.key)) {
       deviceAPI
-        .tag(device.id(), tag.key())
+        .tag(device.id(), tag.settings.key)
         .then(() => {
-          setDeviceTags([...deviceTags, tag.key()]);
+          setDeviceTags([...deviceTags, tag.settings]);
         })
-        .catch(() => error("Failed to tag device as " + tag.name()));
+        .catch(() => error("Failed to tag device as " + tag.name));
     }
   };
 
   const removeTagFromDevice = (tag: Tag) => {
-    if (deviceTags.some(dt => dt === tag.key())) {
+    if (deviceTags.some(dt => dt.key === tag.settings.key)) {
       deviceAPI
         .untag(device.id(), tag.key())
         .then(() => {
-          setDeviceTags(deviceTags.filter(t => tag.key() !== t));
+          setDeviceTags(deviceTags.filter(t => tag.key() !== t.key));
         })
-        .catch(() => error("Failed to remove tag " + tag.name() + " from device"));
+        .catch(() => error("Failed to remove tag " + tag.name + " from device"));
     }
   };
 
@@ -194,14 +195,11 @@ export default function DeviceTags(props: DeviceTagsProps) {
 
   return (
     <React.Fragment>
-      {deviceTags.map(key => {
-        let tag = tags.find(t => t.settings.key === key);
-        if (!tag) {
-          return null;
-        }
+      {deviceTags?.map(tagSettings => {
+        let pondTag = pond.Tag.create({ settings: tagSettings })
         return (
-          <Grid key={tag.settings.key}>
-            <DeviceTag tag={tag} removeTagFromDevice={removeTagFromDevice} />
+          <Grid key={"device-tags-"+tagSettings.key}>
+            <DeviceTag tag={Tag.create(pondTag)} removeTagFromDevice={removeTagFromDevice} />
           </Grid>
         );
       })}