feat(theme): Toggle and persist theme locally

client/src/redux/index.js

@@ -7,6 +7,7 @@ import { createAppMountSaga } from './app-mount-saga';
 import { createReportUserSaga } from './report-user-saga';
 import { createShowCertSaga } from './show-cert-saga';
 import { createUpdateMyEmailSaga } from './update-email-saga';
+import { createNightModeSaga } from './night-mode-saga';
 
 import { types as settingsTypes } from './settings';
 
@@ -49,7 +50,8 @@ export const sagas = [
   ...createFetchUserSaga(types),
   ...createUpdateMyEmailSaga(types),
   ...createShowCertSaga(types),
-  ...createReportUserSaga(types)
+  ...createReportUserSaga(types),
+  ...createNightModeSaga({ ...types, ...settingsTypes })
 ];
 
 export const appMount = createAction(types.appMount);

client/src/redux/night-mode-saga.js

@@ -0,0 +1,36 @@
+/* eslint-disable require-yield */
+
+import { takeEvery } from 'redux-saga/effects';
+import store from 'store';
+
+const themeKey = 'fcc-theme';
+const defaultTheme = 'default';
+const nightTheme = 'night';
+
+function setTheme(currentTheme = defaultTheme, theme) {
+  if (currentTheme !== theme) {
+    store.set(themeKey, theme);
+  }
+  const html = document.getElementById('__fcc-html');
+  html.classList.remove(theme === nightTheme ? defaultTheme : nightTheme);
+  html.classList.add(theme);
+}
+
+function* updateLocalThemeSaga({ payload }) {
+  const currentTheme = store.get(themeKey);
+  if ('user' in payload) {
+    const { theme = defaultTheme } = payload.user;
+    return setTheme(currentTheme, theme);
+  }
+  if ('theme' in payload) {
+    return setTheme(currentTheme, payload.theme);
+  }
+  return setTheme(currentTheme);
+}
+
+export function createNightModeSaga(types) {
+  return [
+    takeEvery(types.fetchUserComplete, updateLocalThemeSaga),
+    takeEvery(types.updateUserFlagComplete, updateLocalThemeSaga)
+  ];
+}