frontend: persist relevant state in localStorage

vatger · Sep 24, 2023 · 351588b · 351588b
1 parent 5750b07
commit 351588b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 27 deletions.
diff --git a/atciss-frontend/src/app/utils.ts b/atciss-frontend/src/app/utils.ts
@@ -3,3 +3,15 @@ export const zn = (n: number) => (x: number | string) =>
 export const z2 = zn(2)
 export const z3 = zn(3)
 export const z4 = zn(4)
+
+export function localStorageOrDefault<T>(item: string, fallback: T): T {
+  const localStorageValue = localStorage.getItem(item)
+
+  return localStorageValue ? JSON.parse(localStorageValue) : fallback
+}
+
+export function setLocalStorage<T>(item: string, value: T): T {
+  localStorage.setItem(item, JSON.stringify(value))
+
+  return value
+}
diff --git a/atciss-frontend/src/services/activePositionSlice.ts b/atciss-frontend/src/services/activePositionSlice.ts
@@ -2,6 +2,7 @@ import { PayloadAction, createSelector, createSlice } from "@reduxjs/toolkit"
 import { RootState } from "../app/store"
 import { Position, SectorData, sectorApi } from "./airspaceApi"
 import { Controller, controllerApi } from "./controllerApi"
+import { localStorageOrDefault, setLocalStorage } from "../app/utils"
 
 type PositionStatus = {
   position: Position
@@ -20,19 +21,28 @@ const findSelectedPosition = (
   positions: Positions,
   syncedToOnline: boolean,
 ): string | null =>
-  previousSelected &&
-  positions[previousSelected][syncedToOnline ? "online" : "manual"]
-    ? previousSelected
-    : Object.entries(positions).find(
-        ([_, p]) => p[syncedToOnline ? "online" : "manual"],
-      )?.[0] ?? null
+  setLocalStorage(
+    "activePositions.selectedPosition",
+    previousSelected &&
+      positions[previousSelected][syncedToOnline ? "online" : "manual"]
+      ? previousSelected
+      : Object.entries(positions).find(
+          ([_, p]) => p[syncedToOnline ? "online" : "manual"],
+        )?.[0] ?? null,
+  )
 
 const activePositionSlice = createSlice({
   name: "activePositions",
   initialState: {
     positions: {},
-    selectedPosition: null,
-    syncedToOnline: true,
+    selectedPosition: localStorageOrDefault(
+      "activePositions.selectedPosition",
+      null,
+    ),
+    syncedToOnline: localStorageOrDefault(
+      "activePositions.syncedToOnline",
+      true,
+    ),
   } as ActivePositionState,
   reducers: {
     setPosition(
@@ -49,15 +59,21 @@ const activePositionSlice = createSlice({
       )
     },
     setSyncedToOnline(state, { payload: synced }: PayloadAction<boolean>) {
-      state.syncedToOnline = synced
+      state.syncedToOnline = setLocalStorage(
+        "activePositions.syncedToOnline",
+        synced,
+      )
       state.selectedPosition = findSelectedPosition(
         state.selectedPosition,
         state.positions,
         state.syncedToOnline,
       )
     },
     setSelectedPosition(state, { payload: pos }: PayloadAction<string>) {
-      state.selectedPosition = pos
+      state.selectedPosition = setLocalStorage(
+        "activePositions.selectedPosition",
+        pos,
+      )
     },
     enableAllPositions(state) {
       const positions = Object.keys(state.positions).reduce(

diff --git a/atciss-frontend/src/services/configSlice.ts b/atciss-frontend/src/services/configSlice.ts
@@ -1,6 +1,7 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
 import { RootState } from "../app/store"
 import { EBG_SETTINGS } from "../app/config"
+import { localStorageOrDefault, setLocalStorage } from "../app/utils"
 
 type ActivePositionState = {
   activeEbg: string
@@ -9,14 +10,14 @@ type ActivePositionState = {
 const configSlice = createSlice({
   name: "config",
   initialState: {
-    activeEbg: Object.keys(EBG_SETTINGS).shift(),
+    activeEbg: localStorageOrDefault(
+      "config.activeEbg",
+      Object.keys(EBG_SETTINGS).shift(),
+    ),
   } as ActivePositionState,
   reducers: {
     setActiveEbg(state, { payload }: PayloadAction<string>) {
-      return {
-        ...state,
-        activeEbg: payload,
-      }
+      state.activeEbg = setLocalStorage("config.activeEbg", payload)
     },
   },
 })

diff --git a/atciss-frontend/src/services/mapSlice.ts b/atciss-frontend/src/services/mapSlice.ts
@@ -1,5 +1,6 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
 import { RootState } from "../app/store"
+import { localStorageOrDefault, setLocalStorage } from "../app/utils"
 
 type MapState = {
   level: number
@@ -12,29 +13,29 @@ type MapState = {
 const mapSlice = createSlice({
   name: "map",
   initialState: {
-    level: 200,
-    ofm: true,
-    dfs: false,
-    dwd: false,
-    sectors: true,
+    level: localStorageOrDefault("map.level", 200),
+    ofm: localStorageOrDefault("map.ofm", true),
+    dfs: localStorageOrDefault("map.dfs", false),
+    dwd: localStorageOrDefault("map.dwd", false),
+    sectors: localStorageOrDefault("map.sectors", true),
   } as MapState,
   reducers: {
     setLevel(state, { payload: level }: PayloadAction<number>) {
-      state.level = level
+      state.level = setLocalStorage("map.level", level)
     },
     setOpenFlightmaps(state, { payload: active }: PayloadAction<boolean>) {
-      state.ofm = active
-      state.dfs = state.dfs && !active
+      state.ofm = setLocalStorage("map.ofm", active)
+      state.dfs = setLocalStorage("map.dfs", state.dfs && !active)
     },
     setDFS(state, { payload: active }: PayloadAction<boolean>) {
-      state.dfs = active
-      state.ofm = state.ofm && !active
+      state.dfs = setLocalStorage("map.dfs", active)
+      state.ofm = setLocalStorage("map.ofm", state.ofm && !active)
     },
     setDWD(state, { payload: active }: PayloadAction<boolean>) {
-      state.dwd = active
+      state.dwd = setLocalStorage("map.dwd", active)
     },
     setSectors(state, { payload: active }: PayloadAction<boolean>) {
-      state.sectors = active
+      state.sectors = setLocalStorage("map.sectors", active)
     },
   },
 })