feat: improve detail view toggling

src/App.tsx

@@ -2,8 +2,6 @@ import { Provider as DevicesProvider } from './context/Devices.js'
 import { Provider as LwM2MProvider } from './context/LwM2M.js'
 import { Provider as MapProvider } from './context/Map.js'
 import { Provider as SettingsProvider } from './context/Settings.js'
-import { Provider as HistoryChartProvider } from './context/showHistoryChart.js'
-import { Provider as WirepasTopologyProvider } from './context/showWirepasTopology.js'
 import { Provider as VisibleDevicesProvider } from './context/VisibleDevices.js'
 import { Provider as WebsocketProvider } from './context/WebsocketConnection.js'
 import { Dashboard } from './Dashboard.js'
@@ -19,11 +17,7 @@ export const App = () => (
 						<WebsocketProvider>
 							<LwM2MProvider>
 								<MapProvider authHelper={authHelper}>
-									<HistoryChartProvider>
-										<WirepasTopologyProvider>
-											<Dashboard />
-										</WirepasTopologyProvider>
-									</HistoryChartProvider>
+									<Dashboard />
 								</MapProvider>
 							</LwM2MProvider>
 						</WebsocketProvider>

src/ConfigureCode.tsx

@@ -28,7 +28,6 @@ export const ConfigureCode = ({
 			<button
 				type="button"
 				onClick={() => {
-					console.log({ device: device.id, deviceCode })
 					onCode(deviceCode)
 					update({
 						managementCodes: {

src/DeviceList.tsx

@@ -8,11 +8,11 @@ import {
 	isWirepasGateway,
 	type GeoLocation,
 } from './context/Devices.js'
-import { useHistoryChart } from './context/showHistoryChart.js'
 import { NRPlusGatewayTile } from './NRPlusGatewayTile.js'
 import { WirepasGatewayTile } from './wirepas/WirepasGatewayTile.js'
 import { useVisibleDevices } from './context/VisibleDevices.js'
 import { useMap } from './context/Map.js'
+import { showDetails } from './hooks/useDetails.js'
 
 const DeviceState = styled.section`
 	color: var(--color-nordic-light-grey);
@@ -111,7 +111,6 @@ export const IssuerName = styled.dd`
 `
 
 export const DeviceList = () => {
-	const { show: showHistoryChart } = useHistoryChart()
 	const devicesToShow = useVisibleDevices()
 	const map = useMap()
 
@@ -162,7 +161,7 @@ export const DeviceList = () => {
 								<HistoryOnly
 									device={device}
 									onClick={() => {
-										showHistoryChart(device.id)
+										showDetails(device.id)
 									}}
 								/>
 							</li>

src/NRPlusGatewayTile.tsx

@@ -30,7 +30,7 @@ import { PinTile } from './PinTile.js'
 import { ConfigureCode } from './ConfigureCode.js'
 import { useSettings } from './context/Settings.js'
 import { cancelEvent } from './cancelEvent.js'
-import { useHistoryChart } from './context/showHistoryChart.js'
+import { hideDetails } from './hooks/useDetails.js'
 
 export const NRPlusGatewayTile = ({
 	gateway,
@@ -43,7 +43,6 @@ export const NRPlusGatewayTile = ({
 		settings: { managementCodes },
 	} = useSettings()
 	const { lastUpdateTs } = useDevices()
-	const { hide: hideHistoryChart } = useHistoryChart()
 	const lastUpdateTime = lastUpdateTs(gateway.id) as number
 	const [configureCode, setConfigureCode] = useState<boolean>(false)
 	const { location } = gateway
@@ -61,7 +60,7 @@ export const NRPlusGatewayTile = ({
 					if (deviceLocation !== undefined) {
 						onCenter(deviceLocation)
 					}
-					hideHistoryChart()
+					hideDetails()
 				})}
 			>
 				<NRPlus class="icon" />

src/Tracker.tsx

@@ -24,7 +24,6 @@ import {
 	type GeoLocation,
 } from './context/Devices.js'
 import { useSettings } from './context/Settings.js'
-import { useHistoryChart } from './context/showHistoryChart.js'
 import { DKIcon } from './icons/DKIcon.js'
 import { SIMIcon } from './icons/SIMIcon.js'
 import { SoftSIMIcon } from './icons/SoftSIMIcon.js'
@@ -34,6 +33,7 @@ import { sortLocations } from './sortLocations.js'
 import { FuelGauge } from './FuelGauge.js'
 import { removeOldLocation } from './removeOldLocation.js'
 import { PinTile } from './PinTile.js'
+import { showDetails } from './hooks/useDetails.js'
 
 const StyledSIMIcon = styled(SIMIcon)`
 	width: 20px;
@@ -54,7 +54,6 @@ export const Tracker = ({
 	onCenter: (location: GeoLocation) => void
 }) => {
 	const { lastUpdateTs } = useDevices()
-	const { toggle: toggleHistoryChart } = useHistoryChart()
 	const {
 		settings: { showUpdateWarning },
 	} = useSettings()
@@ -85,7 +84,7 @@ export const Tracker = ({
 					if (deviceLocation !== undefined) {
 						onCenter(deviceLocation)
 					}
-					toggleHistoryChart(device.id)
+					showDetails(device.id)
 				}}
 			>
 				<BoardIcon class="icon" />
@@ -135,14 +134,14 @@ export const Tracker = ({
 				<EnvironmentInfo
 					device={device}
 					onClick={() => {
-						toggleHistoryChart(device.id)
+						showDetails(device.id)
 					}}
 				/>
 				{state?.fg !== undefined && (
 					<FuelGauge
 						fg={state.fg}
 						onClick={() => {
-							toggleHistoryChart(device.id)
+							showDetails(device.id)
 						}}
 					/>
 				)}

src/chart/DeviceHistory.tsx

@@ -4,11 +4,11 @@ import { useRef } from 'preact/hooks'
 import styled from 'styled-components'
 import { colors } from '../colors.js'
 import { useDevices, type Reading } from '../context/Devices.js'
-import { useHistoryChart } from '../context/showHistoryChart.js'
 import { HistoryChart } from './HistoryChart.js'
 import type { Dataset } from './chartMath.js'
 import type { LucideProps } from '../icons/lucide.js'
 import type { Ref } from 'preact'
+import { useDetails, hideDetails } from '../hooks/useDetails.js'
 
 const chartBaseWidth = 0.6 // percent of window width
 const chartBaseHeight = 0.5 // percent of window width
@@ -64,7 +64,7 @@ const findLowerLimit = (v: Array<Reading>): number =>
  */
 export const DeviceHistory = () => {
 	const { devices } = useDevices()
-	const { deviceId } = useHistoryChart()
+	const deviceId = useDetails()
 
 	if (deviceId === undefined) return null
 
@@ -162,7 +162,6 @@ const IconWithText = styled.div`
 
 const Chart = ({ charts: charts }: { charts: ChartInfo[] }) => {
 	const containerRef = useRef<HTMLDivElement>()
-	const { hide } = useHistoryChart()
 	const [width, height] = [
 		window.innerWidth * chartBaseWidth,
 		((window.innerHeight * chartBaseHeight) / 3) * charts.length,
@@ -203,7 +202,7 @@ const Chart = ({ charts: charts }: { charts: ChartInfo[] }) => {
 					/>
 				</ChartWithIcon>
 			))}
-			<Button type={'button'} onClick={() => hide()}>
+			<Button type={'button'} onClick={() => hideDetails()}>
 				<X />
 			</Button>
 		</ChartContainer>

src/hooks/useDetails.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'preact/hooks'
+
+export const showDetails = (deviceId: string): void =>
+	document.location.assign(new URL(`/#${deviceId}`, document.location.href))
+
+export const hideDetails = (): void =>
+	document.location.assign(new URL('/#', document.location.href))
+
+export const useDetails = (): string | undefined => {
+	const [deviceId, setDeviceId] = useState<string>()
+
+	useEffect(() => {
+		const listener = (ev: HashChangeEvent) => {
+			try {
+				setDeviceId(new URL(ev.newURL).hash.slice(1))
+			} catch (err) {
+				console.debug(`[useDetails]`, err)
+			}
+		}
+		window.addEventListener('hashchange', listener)
+
+		return () => {
+			window.removeEventListener('hashchange', listener)
+		}
+	}, [])
+
+	return deviceId
+}

src/wirepas/WirepasGatewayTile.tsx

@@ -36,8 +36,7 @@ import { ButtonPressDiff } from '../ButtonPress.js'
 import { sum } from 'lodash-es'
 import { formatId } from './formatId.js'
 import { cancelEvent } from '../cancelEvent.js'
-import { useHistoryChart } from '../context/showHistoryChart.js'
-import { useWirepasTopology } from '../context/showWirepasTopology.js'
+import { showDetails } from '../hooks/useDetails.js'
 
 export const WirepasGatewayTile = ({
 	gateway,
@@ -59,8 +58,6 @@ export const WirepasGatewayTile = ({
 	const deviceLocation = rankedLocations[0]
 	const code = managementCodes[gateway.id]
 	const hasCode = code !== undefined
-	const { hide: hideHistoryChart } = useHistoryChart()
-	const { show: showTopology } = useWirepasTopology()
 	const [expandNodes, setExpandNodes] = useState<boolean>(false)
 
 	const nodes = Object.entries(gateway.state.nodes)
@@ -74,8 +71,7 @@ export const WirepasGatewayTile = ({
 					if (deviceLocation !== undefined) {
 						onCenter(deviceLocation)
 					}
-					hideHistoryChart()
-					showTopology(gateway.id)
+					showDetails(gateway.id)
 				})}
 			>
 				<FiveGMesh class="icon" />

src/wirepas/WirepasTopology.tsx

@@ -1,17 +1,16 @@
 import type { Ref } from 'preact'
 import { ChartContainer, Button } from '../chart/DeviceHistory.js'
 import { isWirepasGateway, useDevices } from '../context/Devices.js'
-import { useWirepasTopology } from '../context/showWirepasTopology.js'
 import { parseWirepasNodes } from './parseWirepasNodes.js'
 import { useRef } from 'preact/hooks'
 import { WirepasTopologyDiagram } from './WirepasTopologyDiagram.js'
 import { X } from 'lucide-preact'
+import { useDetails, hideDetails } from '../hooks/useDetails.js'
 
 export const WirepasTopology = () => {
-	const { deviceId, hide } = useWirepasTopology()
+	const deviceId = useDetails()
 	const { devices, type } = useDevices()
 	const containerRef = useRef<HTMLDivElement>()
-	console.log(deviceId)
 	if (deviceId === undefined) return null
 	const maybeDevice = devices[deviceId]
 	if (maybeDevice === undefined) return null
@@ -20,8 +19,6 @@ export const WirepasTopology = () => {
 
 	const parsedWirepasTopology = parseWirepasNodes(gw.state.nodes)
 
-	console.log(parsedWirepasTopology)
-
 	const [width, height] = [500, 500]
 
 	return (
@@ -33,7 +30,7 @@ export const WirepasTopology = () => {
 				connections={parsedWirepasTopology}
 				size={{ width: 500, height: 500 }}
 			/>
-			<Button type={'button'} onClick={() => hide()}>
+			<Button type={'button'} onClick={() => hideDetails()}>
 				<X />
 			</Button>
 		</ChartContainer>