feat(theme): Add theme updating functionality

client/src/client-only-routes/ShowSettings.js

@@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
 import { Grid, Button } from '@freecodecamp/react-bootstrap';
 
 import { signInLoadingSelector, userSelector } from '../redux';
-import { submitNewAbout } from '../redux/settings';
+import { submitNewAbout, updateUserFlag } from '../redux/settings';
 
 import Layout from '../components/Layout';
 import Spacer from '../components/helpers/Spacer';
@@ -23,6 +23,7 @@ const propTypes = {
   showLoading: PropTypes.bool,
   submitNewAbout: PropTypes.func.isRequired,
   theme: PropTypes.string,
+  toggleNightMode: PropTypes.func.isRequired,
   username: PropTypes.string
 };
 
@@ -45,7 +46,10 @@ const mapStateToProps = createSelector(
 );
 
 const mapDispatchToProps = dispatch =>
-  bindActionCreators({ submitNewAbout }, dispatch);
+  bindActionCreators(
+    { submitNewAbout, toggleNightMode: theme => updateUserFlag({theme}) },
+    dispatch
+  );
 
 function ShowSettings(props) {
   const {
@@ -57,7 +61,8 @@ function ShowSettings(props) {
     theme,
     location,
     name,
-    submitNewAbout
+    submitNewAbout,
+    toggleNightMode
   } = props;
 
   if (showLoading) {
@@ -104,6 +109,7 @@ function ShowSettings(props) {
           picture={picture}
           points={points}
           submitNewAbout={submitNewAbout}
+          toggleNightMode={toggleNightMode}
           username={username}
         />
         <Spacer />

client/src/components/settings/About.js

@@ -19,6 +19,7 @@ const propTypes = {
   picture: PropTypes.string,
   points: PropTypes.number,
   submitNewAbout: PropTypes.func.isRequired,
+  toggleNightMode: PropTypes.func.isRequired,
   username: PropTypes.string
 };
 
@@ -124,8 +125,7 @@ class AboutSettings extends Component {
     const {
       formValues: { name, location, picture, about }
     } = this.state;
-    const { currentTheme, username } = this.props;
-    const toggleTheme = () => {};
+    const { currentTheme, username, toggleNightMode } = this.props;
     return (
       <div className='about-settings'>
         <UsernameSettings username={username} />
@@ -180,7 +180,7 @@ class AboutSettings extends Component {
         <FullWidthRow>
           <ThemeSettings
             currentTheme={currentTheme}
-            toggleNightMode={toggleTheme}
+            toggleNightMode={toggleNightMode}
           />
         </FullWidthRow>
       </div>

client/src/components/settings/Theme.js

@@ -19,7 +19,9 @@ export default function ThemeSettings({ currentTheme, toggleNightMode }) {
       </ControlLabel>
       <TB
         name='night-mode'
-        onChange={() => toggleNightMode(currentTheme)}
+        onChange={() =>
+          toggleNightMode(currentTheme === 'night' ? 'default' : 'night')
+        }
         value={currentTheme === 'night'}
       />
     </div>

client/src/redux/index.js

@@ -161,17 +161,32 @@ export const reducer = handleActions(
             }
           }
         : state,
-    [settingsTypes.submitNewAboutComplete]: (state, {payload}) => payload ? {
-      ...state,
-      user: {
-        ...state.user,
-        [state.appUsername]: {
-          ...state.user[state.appUsername],
-          ...payload
-        }
-      }
-    }
-  : state
+    [settingsTypes.submitNewAboutComplete]: (state, { payload }) =>
+      payload
+        ? {
+            ...state,
+            user: {
+              ...state.user,
+              [state.appUsername]: {
+                ...state.user[state.appUsername],
+                ...payload
+              }
+            }
+          }
+        : state,
+    [settingsTypes.updateUserFlagComplete]: (state, { payload }) =>
+      payload
+        ? {
+            ...state,
+            user: {
+              ...state.user,
+              [state.appUsername]: {
+                ...state.user[state.appUsername],
+                ...payload
+              }
+            }
+          }
+        : state
   },
   initialState
 );

client/src/redux/settings/index.js

@@ -23,17 +23,20 @@ export const types = createTypes(
   [
     ...createAsyncTypes('validateUsername'),
     ...createAsyncTypes('submitNewAbout'),
-    ...createAsyncTypes('submitNewUsername')
+    ...createAsyncTypes('submitNewUsername'),
+    ...createAsyncTypes('updateUserFlag')
   ],
   ns
 );
+const checkForSuccessPayload = ({ type, payload }) =>
+  type === 'success' ? payload : null;
 
 export const sagas = [...createSettingsSagas(types)];
 
 export const submitNewAbout = createAction(types.submitNewAbout);
 export const submitNewAboutComplete = createAction(
   types.submitNewAboutComplete,
-  ({ type, payload }) => (type === 'success' ? payload : null)
+  checkForSuccessPayload
 );
 export const submitNewAboutError = createAction(types.submitNewAboutError);
 
@@ -46,6 +49,13 @@ export const submitNewUsernameError = createAction(
   types.submitNewUsernameError
 );
 
+export const updateUserFlag = createAction(types.updateUserFlag);
+export const updateUserFlagComplete = createAction(
+  types.updateUserFlagComplete,
+  checkForSuccessPayload
+);
+export const updateUserFlagError = createAction(types.updateUserFlagError);
+
 export const validateUsername = createAction(types.validateUsername);
 export const validateUsernameComplete = createAction(
   types.validateUsernameComplete

client/src/redux/settings/settings-sagas.js

@@ -1,7 +1,9 @@
 import { delay } from 'redux-saga';
-import { call, put, takeLatest } from 'redux-saga/effects';
+import { call, put, takeLatest, takeEvery } from 'redux-saga/effects';
 
 import {
+  updateUserFlagComplete,
+  updateUserFlagError,
   validateUsernameComplete,
   validateUsernameError,
   submitNewAboutComplete,
@@ -12,7 +14,8 @@ import {
 import {
   getUsernameExists,
   putUpdateMyAbout,
-  putUpdateMyUsername
+  putUpdateMyUsername,
+  putUpdateUserFlag
 } from '../../utils/ajax';
 import { createFlashMessage } from '../../components/Flash/redux';
 
@@ -36,6 +39,16 @@ function* submitNewUsernameSaga({ payload: username }) {
   }
 }
 
+function* updateUserFlagSaga({ payload: update }) {
+  try {
+    const { data: response } = yield call(putUpdateUserFlag, update);
+    yield put(updateUserFlagComplete({ ...response, payload: update }));
+    yield put(createFlashMessage(response));
+  } catch (e) {
+    yield put(updateUserFlagError(e));
+  }
+}
+
 function* validateUsernameSaga({ payload }) {
   try {
     yield delay(500);
@@ -50,6 +63,7 @@ function* validateUsernameSaga({ payload }) {
 
 export function createSettingsSagas(types) {
   return [
+    takeEvery(types.updateUserFlag, updateUserFlagSaga),
     takeLatest(types.submitNewAbout, submitNewAboutSaga),
     takeLatest(types.submitNewUsername, submitNewUsernameSaga),
     takeLatest(types.validateUsername, validateUsernameSaga)

client/src/utils/ajax.js

@@ -48,6 +48,10 @@ export function putUpdateMyUsername(username) {
   return put('/update-my-username', { username });
 }
 
+export function putUpdateUserFlag(update) {
+  return put('/update-user-flag', update);
+}
+
 export function putUserAcceptsTerms(quincyEmails) {
   return put('/update-privacy-terms', { quincyEmails });
 }