Refactor settings to use stack to allow dark theme. Move theme to app reducer to allow persistence.

redux/app/app.actions.js

@@ -27,3 +27,8 @@ export const documentUploadFailure = (error) => ({
 export const toggleDeleteAfterUpload = () => ({
   type: AppActionTypes.TOGGLE_DLETE_AFTER_UPLOAD,
 });
+
+export const setTheme = (theme) => ({
+  type: AppActionTypes.SET_THEME,
+  payload: theme,
+});

redux/app/app.reducer.js

@@ -6,6 +6,7 @@ const INITIAL_STATE = {
   documentUploadInProgress: null,
   documentUploadError: null,
   deleteAfterUpload: false,
+  theme: "system",
 };
 
 const appReducer = (state = INITIAL_STATE, action) => {
@@ -43,6 +44,8 @@ const appReducer = (state = INITIAL_STATE, action) => {
         ...state,
         deleteAfterUpload: !state.deleteAfterUpload,
       };
+    case AppActionTypes.SET_THEME:
+      return { ...state, theme: action.payload };
     default:
       return state;
   }

redux/app/app.selectors.js

@@ -26,3 +26,8 @@ export const selectDeleteAfterUpload = createSelector(
   [selectApp],
   (app) => app.deleteAfterUpload
 );
+
+export const selectTheme = createSelector(
+  [selectApp],
+  (app) => app.theme
+);

redux/app/app.types.js

@@ -5,5 +5,6 @@ const AppActionTypes = {
   DOCUMENT_UPLOAD_SUCCESS: "DOCUMENT_UPLOAD_SUCCESS",
   DOCUMENT_UPLOAD_FAILURE: "DOCUMENT_UPLOAD_FAILURE",
   TOGGLE_DLETE_AFTER_UPLOAD: "TOGGLE_DLETE_AFTER_UPLOAD",
+  SET_THEME: "SET_THEME",
 };
 export default AppActionTypes;

redux/user/user.actions.js

@@ -98,7 +98,3 @@ export const validatePasswordResetFailure = (error) => ({
   type: UserActionTypes.VALIDATE_PASSWORD_RESET_FAILURE,
   payload: error,
 });
-export const setTheme = (theme) => ({
-  type: UserActionTypes.SET_THEME,
-  payload: theme,
-});

redux/user/user.reducer.js

@@ -49,8 +49,7 @@ const userReducer = (state = INITIAL_STATE, action) => {
 
     case UserActionTypes.SET_SHOP_DETAILS:
       return { ...state, bodyshop: action.payload };
-    case UserActionTypes.SET_THEME:
-      return { ...state, theme: action.payload };
+
     case UserActionTypes.SIGN_IN_FAILURE:
     case UserActionTypes.SIGN_OUT_FAILURE:
     case UserActionTypes.EMAIL_SIGN_UP_FAILURE:

redux/user/user.selectors.js

@@ -32,7 +32,3 @@ export const selectSigningIn = createSelector(
   (user) => user.signingIn
 );
 
-export const selectTheme = createSelector(
-  [selectUser],
-  (user) => user.theme
-);

redux/user/user.types.js

@@ -26,6 +26,5 @@ const UserActionTypes = {
   VALIDATE_PASSWORD_RESET_START: "VALIDATE_PASSWORD_RESET_START",
   VALIDATE_PASSWORD_RESET_SUCCESS: "VALIDATE_PASSWORD_RESET_SUCCESS",
   VALIDATE_PASSWORD_RESET_FAILURE: "VALIDATE_PASSWORD_RESET_FAILURE",
-  SET_THEME: "SET_THEME",
 };
 export default UserActionTypes;