Revert "WIP: move the alert message to header"

This reverts commit f5242d261a.

client/src/components/Flash/redux/index.ts

@@ -15,7 +15,7 @@ export const flashMessageSelector = (state: State): FlashState['message'] =>
 
 // ACTION DEFINITIONS
 
-export enum FlashActionTypes {
+enum FlashActionTypes {
   CreateFlashMessage = 'createFlashMessage',
   RemoveFlashMessage = 'removeFlashMessage'
 }
@@ -49,7 +49,7 @@ export const removeFlashMessage =
   });
 
 // REDUCER
-export type ReducerBase<T> = { type: T };
+type ReducerBase<T> = { type: T };
 type ReducerPayload<T extends FlashActionTypes> =
   T extends FlashActionTypes.CreateFlashMessage
     ? ReducerBase<T> & {

client/src/components/Header/index.tsx

@@ -4,50 +4,18 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import React from 'react';
 import Helmet from 'react-helmet';
-import { withTranslation } from 'react-i18next';
-import { connect } from 'react-redux';
-import { bindActionCreators, Dispatch } from 'redux';
-import { createSelector } from 'reselect';
 import { User } from '../../redux/prop-types';
-import { userSelector } from '../../redux/selectors';
-import { FlashMessageArg } from '../../redux/types';
-import Flash from '../Flash';
-import {
-  FlashActionTypes,
-  flashMessageSelector,
-  ReducerBase,
-  removeFlashMessage
-} from '../Flash/redux';
+
 import UniversalNav from './components/universal-nav';
 
 import './header.css';
 
-const mapStateToProps = createSelector(
-  flashMessageSelector,
-  userSelector,
-  flashMessage => ({
-    flashMessage,
-    hasMessage: !!flashMessage.message
-  })
-);
-const mapDispatchToProps = (dispatch: Dispatch) =>
-  bindActionCreators(
-    {
-      removeFlashMessage
-    },
-    dispatch
-  );
 interface HeaderProps {
   fetchState: { pending: boolean };
   user: User;
-  flashMessage: { id: string } & FlashMessageArg;
-  hasMessage: boolean;
-  removeFlashMessage: () => ReducerBase<FlashActionTypes.RemoveFlashMessage>;
 }
-type StateProps = ReturnType<typeof mapStateToProps> & HeaderProps;
-
 export class Header extends React.Component<
-  StateProps,
+  HeaderProps,
   { displayMenu: boolean; isLanguageMenuDisplayed: boolean }
 > {
   menuButtonRef: React.RefObject<HTMLButtonElement>;
@@ -115,8 +83,7 @@ export class Header extends React.Component<
 
   render(): JSX.Element {
     const { displayMenu, isLanguageMenuDisplayed } = this.state;
-    const { fetchState, user, hasMessage, flashMessage, removeFlashMessage } =
-      this.props;
+    const { fetchState, user } = this.props;
     return (
       <>
         <Helmet>
@@ -143,12 +110,6 @@ export class Header extends React.Component<
             user={user}
           />
         </header>
-        {hasMessage && flashMessage ? (
-          <Flash
-            flashMessage={flashMessage}
-            removeFlashMessage={removeFlashMessage}
-          />
-        ) : null}
       </>
     );
   }
@@ -156,7 +117,4 @@ export class Header extends React.Component<
 
 Header.displayName = 'Header';
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withTranslation()(Header));
+export default Header;

client/src/components/layouts/default.tsx

@@ -28,6 +28,8 @@ import {
 } from '../../redux/selectors';
 import { UserFetchState, User } from '../../redux/prop-types';
 import BreadCrumb from '../../templates/Challenges/components/bread-crumb';
+import Flash from '../Flash';
+import { flashMessageSelector, removeFlashMessage } from '../Flash/redux';
 import SignoutModal from '../signout-modal';
 import Footer from '../Footer';
 import Header from '../Header';
@@ -42,18 +44,22 @@ import './rtl-layout.css';
 
 const mapStateToProps = createSelector(
   isSignedInSelector,
+  flashMessageSelector,
   isOnlineSelector,
   isServerOnlineSelector,
   userFetchStateSelector,
   userSelector,
   (
     isSignedIn,
+    flashMessage,
     isOnline: boolean,
     isServerOnline: boolean,
     fetchState: UserFetchState,
     user: User
   ) => ({
     isSignedIn,
+    flashMessage,
+    hasMessage: !!flashMessage.message,
     isOnline,
     isServerOnline,
     fetchState,
@@ -68,6 +74,7 @@ const mapDispatchToProps = (dispatch: Dispatch) =>
   bindActionCreators(
     {
       fetchUser,
+      removeFlashMessage,
       onlineStatusChange,
       serverStatusChange,
       executeGA
@@ -131,10 +138,13 @@ class DefaultLayout extends Component<DefaultLayoutProps> {
   render() {
     const {
       children,
+      hasMessage,
       fetchState,
+      flashMessage,
       isOnline,
       isServerOnline,
       isSignedIn,
+      removeFlashMessage,
       showFooter = true,
       isChallenge = false,
       block,
@@ -216,6 +226,12 @@ class DefaultLayout extends Component<DefaultLayoutProps> {
             isServerOnline={isServerOnline}
             isSignedIn={isSignedIn}
           />
+          {hasMessage && flashMessage ? (
+            <Flash
+              flashMessage={flashMessage}
+              removeFlashMessage={removeFlashMessage}
+            />
+          ) : null}
           <SignoutModal />
           {isChallenge && (
             <div className='breadcrumbs-demo'>