Merge pull request #168 from Wzixiao/mobile-option

Mobile option (template)

client/src/state/local_storage.ts

@@ -36,3 +36,24 @@ export async function saveState(state: any) {
     // Ignore
   }
 }
+
+const PREFERENCES_KEY = "preferences"
+
+/** Load from browser storage */
+export function loadPreferences() {
+  try {
+    const serializedState = localStorage.getItem(PREFERENCES_KEY);
+    return JSON.parse(serializedState)
+  } catch (e) {
+    return undefined;
+  }
+}
+
+export function savePreferences(state: any) {
+  try {
+    const serializedState = JSON.stringify(state)
+    localStorage.setItem(PREFERENCES_KEY, serializedState);
+  } catch (e) {
+    // Ignore
+  }
+}

client/src/state/preferences.ts

@@ -0,0 +1,37 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+import { loadPreferences } from "./local_storage";
+
+interface PreferencesState {
+  mobile: boolean;
+  lockMobile: boolean;
+}
+
+export function getWindowDimensions() {
+  const {innerWidth: width, innerHeight: height } = window
+  return {width, height}
+}
+
+const { width } = getWindowDimensions()
+
+export const AUTO_SWITCH_THRESHOLD = 800
+
+const initialState: PreferencesState = loadPreferences() ?? {
+    mobile: width < AUTO_SWITCH_THRESHOLD,
+    lockMobile: false
+}
+
+export const preferencesSlice = createSlice({
+  name: "preferences",
+  initialState,
+  reducers: {
+    setMobile: (state, action) => {
+      state.mobile = action.payload;
+    },
+    setLockMobile: (state, action) => {
+      state.lockMobile = action.payload;
+    },
+  },
+});
+
+export const { setMobile, setLockMobile } = preferencesSlice.actions;

client/src/state/store.ts

@@ -7,13 +7,15 @@ import { debounce } from "debounce";
 import { connection } from '../connection'
 import { apiSlice } from './api'
 import { progressSlice } from './progress'
-import { saveState } from "./local_storage";
+import { preferencesSlice } from "./preferences"
+import { saveState, savePreferences } from "./local_storage";
 
 
 export const store = configureStore({
   reducer: {
     [apiSlice.reducerPath]: apiSlice.reducer,
     [progressSlice.name]: progressSlice.reducer,
+    [preferencesSlice.name]: preferencesSlice.reducer,
   },
   // Make connection available in thunks:
   middleware: getDefaultMiddleware =>
@@ -31,6 +33,7 @@ export const store = configureStore({
 store.subscribe(
   debounce(() => {
     saveState(store.getState()[progressSlice.name]);
+    savePreferences(store.getState()[preferencesSlice.name]);
   }, 800)
 );