brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

using callback for tags

Browse source
This commit is contained in:
Carter 2026-05-25 12:25:22 -06:00
parent 07b0e6c41e
commit a13c9d5946
1 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/device/DeviceTags.tsx
View file

@ -8,7 +8,6 @@ import {
ListItem,
ListItemIcon,
ListItemText,
Theme,
Typography
} from "@mui/material";
import { makeStyles } from "@mui/styles";
@ -19,10 +18,10 @@ import TagSettings from "common/TagSettings";
import { Device, Tag } from "models";
import { filterByTag } from "pbHelpers/Tag";
import { useDeviceAPI, useSnackbar, useTagAPI } from "providers";
import React, { useEffect, useRef, useState } from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { pond } from "protobuf-ts/pond";
const useStyles = makeStyles((_theme: Theme) => {
const useStyles = makeStyles(() => {
return ({
addIcon: {
color: "var(--status-ok)"
@ -45,19 +44,19 @@ function AddDeviceTag(props: AddDeviceTagProps) {
const [searchValue, setSearchValue] = useState("");
const [tags, setTags] = useState<Tag[]>([])
const loadTags = () => {
const loadTags = useCallback(() => {
tagAPI.listTags().then(resp => {
let newTags: Tag[] = [];
const newTags: Tag[] = [];
resp.data.tags.forEach((tag: pond.Tag) => {
newTags.push(Tag.create(tag))
})
setTags(newTags)
})
}
}, [tagAPI])
useEffect(() => {
loadTags()
}, [])
}, [loadTags])
const tagItems = tags
.filter(tag => !deviceTags.some(tagSettings => tagSettings.key === tag.settings.key))
@ -144,10 +143,10 @@ export default function DeviceTags(props: DeviceTagsProps) {
const [deviceTags, setDeviceTags] = useState<pond.TagSettings[]>(device.status.tags);
const previousDeviceRef = useRef(device);
const loadTags = () => {
const loadTags = useCallback(() => {
// setLoading(true)
tagAPI.listTags().then(resp => {
let newTags: Tag[] = [];
const newTags: Tag[] = [];
resp.data.tags.forEach((tag: pond.Tag) => {
newTags.push(Tag.create(tag))
})
@ -155,7 +154,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
}).finally(() => {
// setLoading(false)
})
}
}, [tagAPI])
useEffect(() => {
if (previousDeviceRef.current !== device) {
@ -166,14 +165,16 @@ export default function DeviceTags(props: DeviceTagsProps) {
useEffect(() => {
loadTags()
}, [])
}, [loadTags])
const addTag = (tag: Tag) => {
if (!deviceTags.some(dt => dt.key === tag.settings.key)) {
deviceAPI
.tag(device.id(), tag.settings.key)
.then(() => {
setDeviceTags([...deviceTags, tag.settings]);
setDeviceTags(current =>
current.some(dt => dt.key === tag.settings.key) ? current : [...current, tag.settings]
);
})
.catch(() => error("Failed to tag device as " + tag.name));
}
@ -184,7 +185,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
deviceAPI
.untag(device.id(), tag.key())
.then(() => {
setDeviceTags(deviceTags.filter(t => tag.key() !== t.key));
setDeviceTags(current => current.filter(t => tag.key() !== t.key));
})
.catch(() => error("Failed to remove tag " + tag.name + " from device"));
}
@ -197,7 +198,7 @@ export default function DeviceTags(props: DeviceTagsProps) {
return (
<React.Fragment>
{deviceTags?.map(tagSettings => {
let pondTag = pond.Tag.create({ settings: tagSettings })
const pondTag = pond.Tag.create({ settings: tagSettings })
return (
<Grid key={"device-tags-"+tagSettings.key}>
<DeviceTag tag={Tag.create(pondTag)} removeTagFromDevice={removeTagFromDevice} />