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

fixed devices page websocket context

Browse source
This commit is contained in:
Carter 2026-03-20 11:16:59 -06:00
parent 25973506b1
commit 31f7e8ee07
4 changed files with 83 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/pages/Device.tsx
View file

@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid2';
import { Component, Device, Interaction, User } from "models";
import { getContextKeys, getContextTypes } from "pbHelpers/Context";
import { useDeviceAPI, useGlobalState, useSnackbar } from "providers";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { useLocation, useParams } from "react-router-dom";
import PageContainer from "./PageContainer";
import { useHTTP, useMobile } from "hooks";
@ -38,7 +38,7 @@ export default function DevicePage() {
const isMobile = useMobile()
const deviceID = useParams<{ deviceID: string }>()?.deviceID ?? "";
const groupID = useParams<{ groupID: string }>()?.groupID ?? "";
const { state } = useLocation();
const { state, pathname: locationPathname } = useLocation();
const [{ as, team, user }] = useGlobalState()
// console.log(state)
const [device, setDevice] = useState<Device>(state?.device ? Device.create(state.device) : Device.create())
@ -68,6 +68,14 @@ export default function DevicePage() {
const { token } = useHTTP();
const liveContextKeys = useMemo(() => getContextKeys(), [locationPathname]);
const liveContextTypes = useMemo(() => getContextTypes(), [locationPathname]);
/** Matches getDevicePageData: omit ?as= when first context type is "team". */
const liveAs =
as && !(liveContextTypes.length > 0 && liveContextTypes[0] === "team")
? as
: undefined;
const loadDevice = () => {
if (loading) return
if (state?.devicePageData) {
@ -173,7 +181,7 @@ export default function DevicePage() {
// When the backend receives a new reading and updates a component,
// this fires and updates the component in state without a page refresh.
useWebSocket<{ key: string; component: Component } | null>({
path: `/live/devices/${deviceID}/components`,
path: `/v1/live/devices/${deviceID}/components`,
parse: (e) => {
try {
const raw = JSON.parse(e.data);
@ -197,6 +205,9 @@ export default function DevicePage() {
return updated;
});
},
keys: liveContextKeys,
types: liveContextTypes,
as: liveAs,
token,
enabled: !!deviceID,
});
@ -204,7 +215,7 @@ export default function DevicePage() {
// --- Real-time device updates (optional) ---
// Updates device-level info (name, status, lastActive, etc.)
useWebSocket<Device | null>({
path: `/live/devices/${deviceID}`,
path: `/v1/live/devices/${deviceID}`,
parse: (e) => {
try {
const raw = JSON.parse(e.data);
@ -223,6 +234,9 @@ export default function DevicePage() {
if (!updatedDevice) return;
setDevice(updatedDevice);
},
keys: liveContextKeys,
types: liveContextTypes,
as: liveAs,
token,
enabled: !!deviceID,
});