Modify logic for all preferences

client/src/state/local_storage.ts

@@ -57,3 +57,12 @@ export function savePreferences(state: any) {
     // Ignore
   }
 }
+
+export function removePreferences() {
+  try {
+    localStorage.removeItem(PREFERENCES_KEY);
+  } catch (e) {
+    // Ignore
+  }
+}
+

client/src/state/preferences.ts

@@ -1,10 +1,10 @@
 import { createSlice } from "@reduxjs/toolkit";
 
-import { loadPreferences } from "./local_storage";
+import { loadPreferences, removePreferences, savePreferences } from "./local_storage";
 
-interface PreferencesState {
-  mobile: boolean;
-  lockMobile: boolean;
+export interface PreferencesState {
+  layout: "mobile" | "auto" | "desktop";
+  isSavePreferences: boolean;
 }
 
 export function getWindowDimensions() {
@@ -12,26 +12,25 @@ export function getWindowDimensions() {
   return {width, height}
 }
 
-const { width } = getWindowDimensions()
-
 export const AUTO_SWITCH_THRESHOLD = 800
 
-const initialState: PreferencesState = loadPreferences() ?? {
-    mobile: width < AUTO_SWITCH_THRESHOLD,
-    lockMobile: false
+const initialState: PreferencesState = loadPreferences() ??{
+    layout: "auto",
+    isSavePreferences: false
 }
 
 export const preferencesSlice = createSlice({
   name: "preferences",
   initialState,
   reducers: {
-    setMobile: (state, action) => {
-      state.mobile = action.payload;
+    setLayout: (state, action) => {
+      state.layout = action.payload;
     },
-    setLockMobile: (state, action) => {
-      state.lockMobile = action.payload;
+    setisSavePreferences: (state, action) => {
+      state.isSavePreferences = action.payload;
+      action.payload ? savePreferences(state) : removePreferences()
     },
   },
 });
 
-export const { setMobile, setLockMobile } = preferencesSlice.actions;
+export const { setLayout, setisSavePreferences } = preferencesSlice.actions;

client/src/state/store.ts

@@ -8,7 +8,7 @@ import { connection } from '../connection'
 import { apiSlice } from './api'
 import { progressSlice } from './progress'
 import { preferencesSlice } from "./preferences"
-import { saveState, savePreferences } from "./local_storage";
+import { saveState, savePreferences, removePreferences} from "./local_storage";
 
 
 export const store = configureStore({
@@ -29,7 +29,9 @@ export const store = configureStore({
 store.subscribe(
   debounce(() => {
     saveState(store.getState()[progressSlice.name]);
-    savePreferences(store.getState()[preferencesSlice.name]);
+
+    const preferencesState= store.getState()[preferencesSlice.name]
+    preferencesState.isSavePreferences ? savePreferences(preferencesState) : removePreferences()
   }, 800)
 );