chore(client): tidy Flash by tidying tone (#44320)

* chore(client): tidy Flash by tidying tone

* add store import

* fix enum, remove default switch case

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>

* typo galore

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* rejig everything, because refactoring is fun 🙃

* refactor: DRY playTone

* fix url to foss library

Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>

* alphabetasize FlashMessage enum

* add all FlashMessages to tone/index.ts

* remove redundant type

* my code is correctnpm run develop:client

* fix: remove circular dependency

* fix: typo

* remove logs, play special tones for nightmode

* play sound on challengeComplete

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

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

client/src/redux/prop-types.ts

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { HandlerProps } from 'react-reflex';
 import { SuperBlocks } from '../../../config/certification-settings';
+import { Themes } from '../components/settings/theme';
 import { certMap } from '../resources/cert-and-project-map';
 
 export const UserPropType = PropTypes.shape({
@@ -246,7 +247,7 @@ export type User = {
   progressTimestamps: Array<unknown>;
   sendQuincyEmail: boolean;
   sound: boolean;
-  theme: string;
+  theme: Themes;
   twitter: string;
   username: string;
   website: string;

client/src/redux/settings/danger-zone-saga.js

@@ -3,6 +3,7 @@ import { call, put, takeEvery, take } from 'redux-saga/effects';
 
 import { resetUserData, fetchUser } from '../';
 import { createFlashMessage } from '../../components/Flash/redux';
+import { FlashMessages } from '../../components/Flash/redux/flash-messages';
 import { postResetProgress, postDeleteAccount } from '../../utils/ajax';
 import { actionTypes as appTypes } from '../action-types';
 import { deleteAccountError, resetProgressError } from './';
@@ -13,7 +14,7 @@ function* deleteAccountSaga() {
     yield put(
       createFlashMessage({
         type: 'info',
-        message: 'flash.account-deleted'
+        message: FlashMessages.AccountDeleted
       })
     );
     // remove current user information from application state
@@ -30,7 +31,7 @@ function* resetProgressSaga() {
     yield put(
       createFlashMessage({
         type: 'info',
-        message: 'flash.progress-reset'
+        message: FlashMessages.ProgressReset
       })
     );
     // refresh current user data in application state

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

@@ -58,7 +58,9 @@ function* updateUserFlagSaga({ payload: update }) {
   try {
     const response = yield call(putUpdateUserFlag, update);
     yield put(updateUserFlagComplete({ ...response, payload: update }));
-    yield put(createFlashMessage(response));
+    yield put(
+      createFlashMessage({ ...response, variables: { theme: update.theme } })
+    );
   } catch (e) {
     yield put(updateUserFlagError(e));
   }

client/src/redux/webhook-saga.js

@@ -1,24 +1,25 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
 import { createFlashMessage } from '../components/Flash/redux';
+import { FlashMessages } from '../components/Flash/redux/flash-messages';
 import { postWebhookToken, deleteWebhookToken } from '../utils/ajax';
 import { postWebhookTokenComplete, deleteWebhookTokenComplete } from '.';
 
 const message = {
   created: {
     type: 'success',
-    message: 'flash.token-created'
+    message: FlashMessages.TokenCreated
   },
   createErr: {
     type: 'danger',
-    message: 'flash.create-token-err'
+    message: FlashMessages.CreateTokenErr
   },
   deleted: {
     type: 'info',
-    message: 'flash.token-deleted'
+    message: FlashMessages.TokenDeleted
   },
   deleteErr: {
     type: 'danger',
-    message: 'flash.delete-token-err'
+    message: FlashMessages.DeleteTokenErr
   }
 };