From 5a9180b42691e9fb1cf2fe16ad03f92ed045a0f0 Mon Sep 17 00:00:00 2001
From: Oleksii Trukhanov <trukhantech@gmail.com>
Date: Fri, 25 Aug 2023 15:35:37 +0300
Subject: [PATCH] DASH-309 Fix notification emails settings state

---
 client/src/components/PrivateRoute/PrivateRoute.tsx      | 4 +++-
 client/src/pages/SettingsPage/SettingsPage.tsx           | 6 +++---
 .../EmailNotifications/EmailNotificationContext.tsx      | 9 +++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/components/PrivateRoute/PrivateRoute.tsx b/client/src/components/PrivateRoute/PrivateRoute.tsx
index ec9e27bc1..a2954f67c 100644
--- a/client/src/components/PrivateRoute/PrivateRoute.tsx
+++ b/client/src/components/PrivateRoute/PrivateRoute.tsx
@@ -10,6 +10,7 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import {
+  isAuthenticated as isAuthenticatedSelector,
   loading as loadingSelector,
   noProfileLoaded as noProfileLoadedSelector,
 } from '../../redux/profile/selectors';
@@ -29,12 +30,13 @@ export const PrivateRoute: React.FC<RouteProps & OwnProps> = ({
 }) => {
   const loading = useSelector(loadingSelector);
   const noProfileLoaded = useSelector(noProfileLoadedSelector);
+  const isAuthenticated = useSelector(isAuthenticatedSelector);
 
   return (
     <Route
       {...rest}
       render={(props: RouteComponentProps) => {
-        if (loading) {
+        if (loading && !isAuthenticated) {
           return (
             <FontAwesomeIcon
               icon={faSpinner}
diff --git a/client/src/pages/SettingsPage/SettingsPage.tsx b/client/src/pages/SettingsPage/SettingsPage.tsx
index 2d7202b00..9b3945320 100644
--- a/client/src/pages/SettingsPage/SettingsPage.tsx
+++ b/client/src/pages/SettingsPage/SettingsPage.tsx
@@ -18,8 +18,8 @@ import { changeRecoveryQuestionsOpen } from '../../redux/edge/actions';
 
 import { showRecovery as showRecoverySelector } from '../../redux/modal/selectors';
 import {
+  isAuthenticated as isAuthenticatedSelector,
   loading as loadingSelector,
-  user as userSelector,
 } from '../../redux/profile/selectors';
 
 import useEffectOnce from '../../hooks/general';
@@ -32,9 +32,9 @@ export const PREOPENED_MODALS = {
 };
 
 const SettingsPage: React.FC = () => {
-  const user = useSelector(userSelector);
   const loading = useSelector(loadingSelector);
   const showRecovery = useSelector(showRecoverySelector);
+  const isAuthenticated = useSelector(isAuthenticatedSelector);
 
   const dispatch = useDispatch();
 
@@ -55,7 +55,7 @@ const SettingsPage: React.FC = () => {
     }
   }, [dispatch, openSettingsModal, showRecovery]);
 
-  if (loading || user == null)
+  if (loading && !isAuthenticated)
     return (
       <LayoutContainer title="Settings">
         <div className="d-flex justify-content-center align-items-center h-100 pt-5 pb-5">
diff --git a/client/src/pages/SettingsPage/components/EmailNotifications/EmailNotificationContext.tsx b/client/src/pages/SettingsPage/components/EmailNotifications/EmailNotificationContext.tsx
index 7a2bfe597..97215d189 100644
--- a/client/src/pages/SettingsPage/components/EmailNotifications/EmailNotificationContext.tsx
+++ b/client/src/pages/SettingsPage/components/EmailNotifications/EmailNotificationContext.tsx
@@ -1,10 +1,12 @@
 import { useCallback, useState } from 'react';
 
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { log } from '../../../../util/general';
 import apis from '../../../../api';
 
+import { loadProfile } from '../../../../redux/profile/actions';
+
 import { user as userSelector } from '../../../../redux/profile/selectors';
 
 import {
@@ -54,6 +56,8 @@ export const useContext = (): UseContextProps => {
   const [loading, setLoading] = useState<boolean>(false);
   const [showSuccessModal, toggleSuccessModal] = useState<boolean>(false);
 
+  const dispatch = useDispatch();
+
   const toggleCheckClick = useCallback(
     (emailNotificationType: EmailNotificationParamsNamesType) => {
       setEmailNotificationParams(prevValue => {
@@ -79,6 +83,7 @@ export const useContext = (): UseContextProps => {
 
       if (updateNotificationsRes?.success) {
         toggleSuccessModal(true);
+        dispatch(loadProfile());
       }
       hasError && setHasError(false);
     } catch (err) {
@@ -87,7 +92,7 @@ export const useContext = (): UseContextProps => {
     } finally {
       setLoading(false);
     }
-  }, [emailNotificationParams, hasError]);
+  }, [dispatch, emailNotificationParams, hasError]);
 
   const onSuccessClose = useCallback(() => toggleSuccessModal(false), []);