From d2aed0dc72418bd69d68600524b79ce1d360a8a4 Mon Sep 17 00:00:00 2001 From: henrygd Date: Mon, 1 Sep 2025 17:28:13 -0400 Subject: [PATCH] refactor: replace useLocalStorage with useBrowserStorage --- beszel/site/src/components/add-system.tsx | 4 +-- beszel/site/src/components/routes/system.tsx | 4 +-- .../systems-table/systems-table.tsx | 25 ++++++++----------- beszel/site/src/lib/utils.ts | 14 +++++------ 4 files changed, 22 insertions(+), 25 deletions(-) diff --git a/beszel/site/src/components/add-system.tsx b/beszel/site/src/components/add-system.tsx index f3fd059..79b495a 100644 --- a/beszel/site/src/components/add-system.tsx +++ b/beszel/site/src/components/add-system.tsx @@ -14,7 +14,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { $publicKey } from "@/lib/stores" -import { cn, generateToken, tokenMap, useLocalStorage } from "@/lib/utils" +import { cn, generateToken, tokenMap, useBrowserStorage } from "@/lib/utils" import { pb, isReadOnlyUser } from "@/lib/api" import { useStore } from "@nanostores/react" import { ChevronDownIcon, ExternalLinkIcon, PlusIcon } from "lucide-react" @@ -77,7 +77,7 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) => const port = useRef(null) const [hostValue, setHostValue] = useState(system?.host ?? "") const isUnixSocket = hostValue.startsWith("/") - const [tab, setTab] = useLocalStorage("as-tab", "docker") + const [tab, setTab] = useBrowserStorage("as-tab", "docker") const [token, setToken] = useState(system?.token ?? "") useEffect(() => { diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index 65100a5..b3e34d5 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -26,7 +26,7 @@ import { listen, parseSemVer, toFixedFloat, - useLocalStorage, + useBrowserStorage, } from "@/lib/utils" import { getPbTimestamp, pb } from "@/lib/api" import { Separator } from "../ui/separator" @@ -123,7 +123,7 @@ export default function SystemDetail({ name }: { name: string }) { const systems = useStore($systems) const chartTime = useStore($chartTime) const maxValues = useStore($maxValues) - const [grid, setGrid] = useLocalStorage("grid", true) + const [grid, setGrid] = useBrowserStorage("grid", true) const [system, setSystem] = useState({} as SystemRecord) const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[]) const [containerData, setContainerData] = useState([] as ChartData["containerData"]) diff --git a/beszel/site/src/components/systems-table/systems-table.tsx b/beszel/site/src/components/systems-table/systems-table.tsx index f897cab..060734f 100644 --- a/beszel/site/src/components/systems-table/systems-table.tsx +++ b/beszel/site/src/components/systems-table/systems-table.tsx @@ -59,14 +59,13 @@ export default function SystemsTable() { const { i18n, t } = useLingui() const [filter, setFilter] = useState() const [statusFilter, setStatusFilter] = useState("all") - const [sorting, setSorting] = useLocalStorage("sortMode",[{ id: "system", desc: false }]) - const [columnFilters, setColumnFilters] = useState([]) - const [columnVisibility, setColumnVisibility] = useLocalStorage("cols", {}) - const [viewMode, setViewMode] = useLocalStorage( - "viewMode", - // show grid view on mobile if there are less than 200 systems (looks better but table is more efficient) - window.innerWidth < 1024 && data.length < 200 ? "grid" : "table" + const [sorting, setSorting] = useBrowserStorage( + "sortMode", + [{ id: "system", desc: false }], + sessionStorage ) + const [columnFilters, setColumnFilters] = useState([]) + const [columnVisibility, setColumnVisibility] = useBrowserStorage("cols", {}) const locale = i18n.locale @@ -78,13 +77,11 @@ export default function SystemsTable() { return data.filter((system) => system.status === statusFilter) }, [data, statusFilter]) - const runningRecords = useMemo(() => { - return data.filter((record) => record.status === "up").length - }, [data]) - - const totalRecords = useMemo(() => { - return data.length - }, [data]) + const [viewMode, setViewMode] = useBrowserStorage( + "viewMode", + // show grid view on mobile if there are less than 200 systems (looks better but table is more efficient) + window.innerWidth < 1024 && filteredData.length < 200 ? "grid" : "table" + ) useEffect(() => { if (filter !== undefined) { diff --git a/beszel/site/src/lib/utils.ts b/beszel/site/src/lib/utils.ts index f9c3bae..2ed94ab 100644 --- a/beszel/site/src/lib/utils.ts +++ b/beszel/site/src/lib/utils.ts @@ -152,20 +152,20 @@ export function decimalString(num: number, digits = 2) { return formatter.format(num) } -/** Get value from local storage */ -function getStorageValue(key: string, defaultValue: any) { - const saved = localStorage?.getItem(key) +/** Get value from local or session storage */ +function getStorageValue(key: string, defaultValue: any, storageInterface: Storage = localStorage) { + const saved = storageInterface?.getItem(key) return saved ? JSON.parse(saved) : defaultValue } -/** Hook to sync value in local storage */ -export function useLocalStorage(key: string, defaultValue: T) { +/** Hook to sync value in local or session storage */ +export function useBrowserStorage(key: string, defaultValue: T, storageInterface: Storage = localStorage) { key = `besz-${key}` const [value, setValue] = useState(() => { - return getStorageValue(key, defaultValue) + return getStorageValue(key, defaultValue, storageInterface) }) useEffect(() => { - localStorage?.setItem(key, JSON.stringify(value)) + storageInterface?.setItem(key, JSON.stringify(value)) }, [key, value]) return [value, setValue]