Save editor preferences to localStorage (#541 / #553)

* Added editor-preferences to redux store

* Add local-storage saving and retrieval of EditorConfig

* Change import to be in a single line

* Add equality check to redux-selector (as suggested by @mrdrogdrog)

* Save and load editor-config to/from localStorage

src/redux/editor/methods.ts

@@ -1,6 +1,34 @@
+import { EditorConfiguration } from 'codemirror'
 import { store } from '..'
 import { EditorMode } from '../../components/editor/app-bar/editor-view-mode'
-import { EditorConfigActionType, SetEditorConfigAction, SetEditorSyncScrollAction } from './types'
+import {
+  EditorConfig,
+  EditorConfigActionType,
+  SetEditorConfigAction,
+  SetEditorPreferencesAction,
+  SetEditorSyncScrollAction
+} from './types'
+
+export const loadFromLocalStorage = (): EditorConfig | undefined => {
+  try {
+    const stored = window.localStorage.getItem('editorConfig')
+    if (!stored) {
+      return undefined
+    }
+    return JSON.parse(stored) as EditorConfig
+  } catch (_) {
+    return undefined
+  }
+}
+
+export const saveToLocalStorage = (editorConfig: EditorConfig): void => {
+  try {
+    const json = JSON.stringify(editorConfig)
+    localStorage.setItem('editorConfig', json)
+  } catch (e) {
+    console.error('Can not persist editor config in local storage: ', e)
+  }
+}
 
 export const setEditorMode = (editorMode: EditorMode): void => {
   const action: SetEditorConfigAction = {
@@ -17,3 +45,13 @@ export const setEditorSyncScroll = (syncScroll: boolean): void => {
   }
   store.dispatch(action)
 }
+
+export const setEditorPreferences = (preferences: EditorConfiguration): void => {
+  const action: SetEditorPreferencesAction = {
+    type: EditorConfigActionType.SET_EDITOR_PREFERENCES,
+    preferences: {
+      ...preferences
+    }
+  }
+  store.dispatch(action)
+}

src/redux/editor/reducers.ts

@@ -1,30 +1,54 @@
 import { Reducer } from 'redux'
+import { EditorMode } from '../../components/editor/app-bar/editor-view-mode'
+import { loadFromLocalStorage, saveToLocalStorage } from './methods'
 import {
   EditorConfig,
   EditorConfigActions,
   EditorConfigActionType,
   SetEditorConfigAction,
+  SetEditorPreferencesAction,
   SetEditorSyncScrollAction
 } from './types'
-import { EditorMode } from '../../components/editor/app-bar/editor-view-mode'
 
-export const initialState: EditorConfig = {
+const initialState: EditorConfig = {
   editorMode: EditorMode.BOTH,
-  syncScroll: true
+  syncScroll: true,
+  preferences: {
+    theme: 'one-dark',
+    keyMap: 'sublime',
+    indentUnit: 4,
+    indentWithTabs: false
+  }
 }
 
-export const EditorConfigReducer: Reducer<EditorConfig, EditorConfigActions> = (state: EditorConfig = initialState, action: EditorConfigActions) => {
+const getInitialState = (): EditorConfig => {
+  return loadFromLocalStorage() ?? initialState
+}
+
+export const EditorConfigReducer: Reducer<EditorConfig, EditorConfigActions> = (state: EditorConfig = getInitialState(), action: EditorConfigActions) => {
+  let newState: EditorConfig
   switch (action.type) {
     case EditorConfigActionType.SET_EDITOR_VIEW_MODE:
-      return {
+      newState = {
         ...state,
         editorMode: (action as SetEditorConfigAction).mode
       }
+      saveToLocalStorage(newState)
+      return newState
     case EditorConfigActionType.SET_SYNC_SCROLL:
-      return {
+      newState = {
         ...state,
         syncScroll: (action as SetEditorSyncScrollAction).syncScroll
       }
+      saveToLocalStorage(newState)
+      return newState
+    case EditorConfigActionType.SET_EDITOR_PREFERENCES:
+      newState = {
+        ...state,
+        preferences: (action as SetEditorPreferencesAction).preferences
+      }
+      saveToLocalStorage(newState)
+      return newState
     default:
       return state
   }

src/redux/editor/types.ts

@@ -1,14 +1,17 @@
+import { EditorConfiguration } from 'codemirror'
 import { Action } from 'redux'
 import { EditorMode } from '../../components/editor/app-bar/editor-view-mode'
 
 export enum EditorConfigActionType {
   SET_EDITOR_VIEW_MODE = 'editor/mode/set',
-  SET_SYNC_SCROLL = 'editor/syncScroll/set'
+  SET_SYNC_SCROLL = 'editor/syncScroll/set',
+  SET_EDITOR_PREFERENCES = 'editor/preferences/set'
 }
 
 export interface EditorConfig {
   editorMode: EditorMode;
   syncScroll: boolean;
+  preferences: EditorConfiguration
 }
 
 export interface EditorConfigActions extends Action<EditorConfigActionType> {
@@ -22,3 +25,7 @@ export interface SetEditorSyncScrollAction extends EditorConfigActions {
 export interface SetEditorConfigAction extends EditorConfigActions {
   mode: EditorMode
 }
+
+export interface SetEditorPreferencesAction extends EditorConfigActions {
+  preferences: EditorConfiguration
+}