refactor: replace useLocalStorage with useBrowserStorage

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<HTMLInputElement>(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(() => {

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"])

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<string>()
 	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
-	const [sorting, setSorting] = useLocalStorage<SortingState>("sortMode",[{ id: "system", desc: false }])
-	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-	const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
-	const [viewMode, setViewMode] = useLocalStorage<ViewMode>(
-		"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<SortingState>(
+		"sortMode",
+		[{ id: "system", desc: false }],
+		sessionStorage
 	)
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+	const [columnVisibility, setColumnVisibility] = useBrowserStorage<VisibilityState>("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>(
+		"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) {

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<T>(key: string, defaultValue: T) {
+/** Hook to sync value in local or session storage */
+export function useBrowserStorage<T>(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]