feat: store sound settings in local storage (#51374)

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

api-server/src/common/models/user.json

@@ -343,10 +343,6 @@
       "type": "string",
       "default": "default"
     },
-    "sound": {
-      "type": "boolean",
-      "default": false
-    },
     "keyboardShortcuts": {
       "type": "boolean",
       "default": false

api-server/src/server/boot/settings.js

@@ -44,7 +44,6 @@ export default function settingsController(app) {
   api.put('/update-my-username', ifNoUser401, updateMyUsername);
   api.put('/update-user-flag', ifNoUser401, updateUserFlag);
   api.put('/update-my-socials', ifNoUser401, updateMySocials);
-  api.put('/update-my-sound', ifNoUser401, updateMySound);
   api.put(
     '/update-my-keyboard-shortcuts',
     ifNoUser401,
@@ -288,16 +287,6 @@ function updateMyTheme(...args) {
   )(...args);
 }
 
-function updateMySound(...args) {
-  const buildUpdate = body => _.pick(body, 'sound');
-  const validate = ({ sound }) => typeof sound === 'boolean';
-  createUpdateUserProperties(
-    buildUpdate,
-    validate,
-    'flash.updated-sound'
-  )(...args);
-}
-
 function updateMyKeyboardShortcuts(...args) {
   const buildUpdate = body => _.pick(body, 'keyboardShortcuts');
   const validate = ({ keyboardShortcuts }) =>

api-server/src/server/utils/publicUserProps.js

@@ -50,7 +50,6 @@ export const userPropsForSession = [
   'id',
   'sendQuincyEmail',
   'theme',
-  'sound',
   'keyboardShortcuts',
   'completedChallengeCount',
   'acceptedPrivacyTerms'

api/prisma/schema.prisma

@@ -125,7 +125,6 @@ model user {
   // rand Float? // Undefined removed, as new API never uses it.
   savedChallenges              SavedChallenge[] // Undefined | SavedChallenge[]
   sendQuincyEmail              Boolean
-  sound                        Boolean? // Undefined
   theme                        String? // Undefined
   timezone                     String? // Undefined
   twitter                      String? // Null | Undefined

api/src/routes/user.test.ts

@@ -87,7 +87,6 @@ const testUserData: Prisma.userCreateInput = {
       ]
     }
   ],
-  sound: true,
   yearsTopContributor: ['2018'],
   twitter: '@foobar',
   linkedin: 'linkedin.com/foobar'
@@ -214,7 +213,6 @@ const publicUserData = {
   sendQuincyEmail: testUserData.sendQuincyEmail,
   theme: testUserData.theme,
   twitter: 'https://twitter.com/foobar',
-  sound: testUserData.sound,
   keyboardShortcuts: testUserData.keyboardShortcuts,
   completedChallengeCount: 3,
   acceptedPrivacyTerms: testUserData.acceptedPrivacyTerms,

api/src/routes/user.ts

@@ -175,7 +175,6 @@ export const userRoutes: FastifyPluginCallbackTypebox = (
             progressTimestamps: true,
             savedChallenges: true,
             sendQuincyEmail: true,
-            sound: true,
             theme: true,
             twitter: true,
             username: true,

api/src/schemas.ts

@@ -307,7 +307,6 @@ export const schemas = {
             twitter: Type.Optional(Type.String()),
             website: Type.Optional(Type.String()),
             yearsTopContributor: Type.Array(Type.String()), // TODO(Post-MVP): convert to number?
-            sound: Type.Optional(Type.Boolean()),
             isEmailVerified: Type.Boolean(),
             joinDate: Type.String(),
             savedChallenges: Type.Optional(

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

@@ -5,6 +5,8 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import { Container } from '@freecodecamp/ui';
+
+import store from 'store';
 import envData from '../../config/env.json';
 import { createFlashMessage } from '../components/Flash/redux';
 import { Loader, Spacer } from '../components/helpers';
@@ -37,7 +39,6 @@ import {
   updateMyKeyboardShortcuts,
   verifyCert
 } from '../redux/settings/actions';
-
 const { apiLocation } = envData;
 
 // TODO: update types for actions
@@ -125,7 +126,6 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
       about,
       picture,
       theme,
-      sound,
       keyboardShortcuts,
       location,
       name,
@@ -154,7 +154,7 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
     navigate(`${apiLocation}/signin`);
     return <Loader fullScreen={true} />;
   }
-
+  const sound = (store.get('fcc-sound') as boolean) ?? false;
   return (
     <>
       <Helmet title={`${t('buttons.settings')} | freeCodeCamp.org`} />

client/src/redux/fetch-user-saga.js

@@ -1,5 +1,4 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
-import store from 'store';
 import { getSessionUser, getUserProfile } from '../utils/ajax';
 import {
   fetchProfileForUserComplete,
@@ -20,12 +19,6 @@ function* fetchSessionUser() {
     } = yield call(getSessionUser);
     const appUser = user[result] || {};
 
-    const [userId] = Object.keys(user);
-
-    const sound = user[userId].sound;
-
-    store.set('fcc-sound', sound);
-
     yield put(fetchUserComplete({ user: appUser, username: result }));
   } catch (e) {
     console.log('failed to fetch user', e);

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

@@ -24,7 +24,6 @@ import {
   putUpdateMyProfileUI,
   putUpdateMyQuincyEmail,
   putUpdateMySocials,
-  putUpdateMySound,
   putUpdateMyTheme,
   putUpdateMyUsername,
   putVerifyCert
@@ -100,7 +99,10 @@ function* updateMySocialsSaga({ payload: update }) {
 function* updateMySoundSaga({ payload: update }) {
   try {
     store.set('fcc-sound', !!update.sound);
-    const { data } = yield call(putUpdateMySound, update);
+    const data = {
+      message: 'flash.updated-sound',
+      type: 'success'
+    };
     yield put(updateMySoundComplete({ ...data, payload: update }));
     yield put(createFlashMessage({ ...data }));
   } catch (e) {

client/src/utils/ajax.ts

@@ -316,12 +316,6 @@ export function putUpdateMySocials(
   return put('/update-my-socials', update);
 }
 
-export function putUpdateMySound(
-  update: Record<string, string>
-): Promise<ResponseWithData<void>> {
-  return put('/update-my-sound', update);
-}
-
 export function putUpdateMyTheme(
   update: Record<string, string>
 ): Promise<ResponseWithData<void>> {