feat: update keyboard shortcuts client endpoint (#46378)

* feat: update keyboard shortcuts client endpoint

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

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* Update putUpdateMyKeyboardShortcuts return type

* Use new saga in shortcuts-modal

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/client-only-routes/show-settings.tsx

@@ -33,6 +33,7 @@ import {
   updateMyQuincyEmail,
   updateMySound,
   updateMyTheme,
+  updateMyKeyboardShortcuts,
   updateUserFlag,
   verifyCert
 } from '../redux/settings';
@@ -79,7 +80,7 @@ const mapDispatchToProps = {
   toggleNightMode: (theme: Themes) => updateMyTheme({ theme }),
   toggleSoundMode: (sound: boolean) => updateMySound({ sound }),
   toggleKeyboardShortcuts: (keyboardShortcuts: boolean) =>
-    updateUserFlag({ keyboardShortcuts }),
+    updateMyKeyboardShortcuts({ keyboardShortcuts }),
   updateInternetSettings: updateUserFlag,
   updateIsHonest: updateMyHonesty,
   updatePortfolio: updateMyPortfolio,

client/src/redux/index.js

@@ -19,7 +19,6 @@ import hardGoToEpic from './hard-go-to-epic';
 import { createReportUserSaga } from './report-user-saga';
 import { actionTypes as settingsTypes } from './settings/action-types';
 import { createShowCertSaga } from './show-cert-saga';
-import { createKeyboardShortcuts } from './keyboard-shortcuts-mode-saga';
 import updateCompleteEpic from './update-complete-epic';
 import { createUserTokenSaga } from './user-token-saga';
 import { createSaveChallengeSaga } from './save-challenge-saga';
@@ -82,7 +81,6 @@ export const sagas = [
   ...createFetchUserSaga(actionTypes),
   ...createShowCertSaga(actionTypes),
   ...createReportUserSaga(actionTypes),
-  ...createKeyboardShortcuts({ ...actionTypes, ...settingsTypes }),
   ...createUserTokenSaga(actionTypes),
   ...createSaveChallengeSaga(actionTypes)
 ];
@@ -752,6 +750,8 @@ export const reducer = handleActions(
       payload ? spreadThePayloadOnUser(state, payload) : state,
     [settingsTypes.updateMyThemeComplete]: (state, { payload }) =>
       payload ? spreadThePayloadOnUser(state, payload) : state,
+    [settingsTypes.updateMyKeyboardShortcutsComplete]: (state, { payload }) =>
+      payload ? spreadThePayloadOnUser(state, payload) : state,
     [settingsTypes.updateMyHonestyComplete]: (state, { payload }) =>
       payload ? spreadThePayloadOnUser(state, payload) : state,
     [settingsTypes.updateMyQuincyEmailComplete]: (state, { payload }) =>

client/src/redux/keyboard-shortcuts-mode-saga.js

@@ -1,27 +0,0 @@
-/* eslint-disable require-yield */
-
-import { takeEvery } from 'redux-saga/effects';
-import store from 'store';
-
-const shortcutsKey = 'fcc-keyboard-shortcuts';
-
-export function setKeyboardShortcuts(setting) {
-  store.set(shortcutsKey, setting);
-}
-
-function* updateLocalKeyboardShortcutsSaga({ payload }) {
-  const { user, keyboardShortcuts } = payload ?? {};
-  if (user) {
-    const { keyboardShortcuts = false } = user;
-    setKeyboardShortcuts(keyboardShortcuts);
-  } else if (typeof keyboardShortcuts !== 'undefined') {
-    setKeyboardShortcuts(keyboardShortcuts);
-  }
-}
-
-export function createKeyboardShortcuts(types) {
-  return [
-    takeEvery(types.fetchUserComplete, updateLocalKeyboardShortcutsSaga),
-    takeEvery(types.updateUserFlagComplete, updateLocalKeyboardShortcutsSaga)
-  ];
-}

client/src/redux/settings/action-types.js

@@ -12,6 +12,7 @@ export const actionTypes = createTypes(
     ...createAsyncTypes('updateMySocials'),
     ...createAsyncTypes('updateMySound'),
     ...createAsyncTypes('updateMyTheme'),
+    ...createAsyncTypes('updateMyKeyboardShortcuts'),
     ...createAsyncTypes('updateMyHonesty'),
     ...createAsyncTypes('updateMyQuincyEmail'),
     ...createAsyncTypes('updateMyPortfolio'),

client/src/redux/settings/index.js

@@ -84,6 +84,17 @@ export const updateMyThemeComplete = createAction(
 );
 export const updateMyThemeError = createAction(types.updateMyThemeError);
 
+export const updateMyKeyboardShortcuts = createAction(
+  types.updateMyKeyboardShortcuts
+);
+export const updateMyKeyboardShortcutsComplete = createAction(
+  types.updateMyKeyboardShortcutsComplete,
+  checkForSuccessPayload
+);
+export const updateMyKeyboardShortcutsError = createAction(
+  types.updateMyKeyboardShortcutsError
+);
+
 export const updateMyHonesty = createAction(types.updateMyHonesty);
 export const updateMyHonestyComplete = createAction(
   types.updateMyHonestyComplete,

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

@@ -22,7 +22,8 @@ import {
   putVerifyCert,
   putUpdateMyPortfolio,
   putUpdateMyTheme,
-  putUpdateMySound
+  putUpdateMySound,
+  putUpdateMyKeyboardShortcuts
 } from '../../utils/ajax';
 import { certMap } from '../../resources/cert-and-project-map';
 import { completedChallengesSelector } from '..';
@@ -54,7 +55,9 @@ import {
   updateMyThemeComplete,
   updateMyThemeError,
   updateMySoundComplete,
-  updateMySoundError
+  updateMySoundError,
+  updateMyKeyboardShortcutsComplete,
+  updateMyKeyboardShortcutsError
 } from './';
 
 function* submitNewAboutSaga({ payload }) {
@@ -130,6 +133,16 @@ function* updateMyThemeSaga({ payload: update }) {
   }
 }
 
+function* updateMyKeyboardShortcutsSaga({ payload: update }) {
+  try {
+    const { data } = yield call(putUpdateMyKeyboardShortcuts, update);
+    yield put(updateMyKeyboardShortcutsComplete({ ...data, payload: update }));
+    yield put(createFlashMessage({ ...data }));
+  } catch (e) {
+    yield put(updateMyKeyboardShortcutsError);
+  }
+}
+
 function* updateMyHonestySaga({ payload: update }) {
   try {
     const { data } = yield call(putUpdateMyHonesty, update);
@@ -227,6 +240,7 @@ export function createSettingsSagas(types) {
     takeEvery(types.updateMyHonesty, updateMyHonestySaga),
     takeEvery(types.updateMySound, updateMySoundSaga),
     takeEvery(types.updateMyTheme, updateMyThemeSaga),
+    takeEvery(types.updateMyKeyboardShortcuts, updateMyKeyboardShortcutsSaga),
     takeEvery(types.updateMyQuincyEmail, updateMyQuincyEmailSaga),
     takeEvery(types.updateMyPortfolio, updateMyPortfolioSaga),
     takeLatest(types.submitNewAbout, submitNewAboutSaga),

client/src/templates/Challenges/components/shortcuts-modal.tsx

@@ -6,7 +6,7 @@ import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
 
 import { closeModal, isShortcutsModalOpenSelector } from '../redux';
-import { updateUserFlag } from '../../../redux/settings';
+import { updateMyKeyboardShortcuts } from '../../../redux/settings';
 import { userSelector } from '../../../redux';
 import { User } from '../../../redux/prop-types';
 import KeyboardShortcutsSettings from '../../../components/settings/keyboard-shortcuts';
@@ -31,7 +31,7 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
     {
       closeShortcutsModal: () => closeModal('shortcuts'),
       toggleKeyboardShortcuts: (keyboardShortcuts: boolean) =>
-        updateUserFlag({ keyboardShortcuts })
+        updateMyKeyboardShortcuts({ keyboardShortcuts })
     },
     dispatch
   );

client/src/utils/ajax.ts

@@ -324,6 +324,12 @@ export function putUpdateMyTheme(
   return put('/update-my-theme', update);
 }
 
+export function putUpdateMyKeyboardShortcuts(
+  update: Record<string, string>
+): Promise<ResponseWithData<void>> {
+  return put('/update-my-keyboard-shortcuts', update);
+}
+
 export function putUpdateMyHonesty(
   update: Record<string, string>
 ): Promise<ResponseWithData<void>> {