fix: redirects (#34)

Author: vigneshd332

src/api/ApiConfig.ts

@@ -27,8 +27,10 @@ export const apiConfig = new Configuration({
       post: async context => {
         const statusCode = context.response.status;
         if (statusCode === 401) {
+          localStorage.removeItem('token');
           window.location.href = `${homeUrl}/#/login`;
           window.history.forward();
+          window.location.reload();
         } else if (statusCode === 403) {
           const authApi = new AuthApi(apiConfig);
           authApi.getAuthStatus().then(res => {

src/components/Auth/Auth/Login/Login.tsx

@@ -5,14 +5,21 @@ import styles from '../auth.module.css';
 import { useNavigate } from 'react-router-dom';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { BASE_PATH } from '../../../../config/config';
-import { loginAction, loginError } from '../../../../store/User/UserSlice';
+import {
+  isloggedIn,
+  loginAction,
+  loginError,
+  loading,
+} from '../../../../store/User/UserSlice';
 import { useAppSelector, useAppDispatch } from '../../../../store/hooks';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import ForgetPassword from './ForgetPassword/ForgetPassword';
 import toast from 'react-hot-toast';
 
 function Login(): JSX.Element {
   const navigate = useNavigate();
+  const isLoggedIn = useAppSelector(isloggedIn);
+  const loadingAuth = useAppSelector(loading);
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [open, isOpen] = useState<boolean>(false);
@@ -23,10 +30,10 @@ function Login(): JSX.Element {
   }, [loggedInError]);
 
   useEffect(() => {
-    if (localStorage.getItem('token') != null) {
+    if (isLoggedIn && !loadingAuth) {
       navigate('/dashboard', { replace: true });
     }
-  }, [localStorage.getItem('token')]);
+  }, [isLoggedIn, loadingAuth]);
   const handleForgetPassword = () => {
     if (open == false) isOpen(true);
     else isOpen(false);

src/components/NavBar/NavBar.tsx

@@ -9,6 +9,7 @@ import {
   loggedIn,
   user,
   logout,
+  loading,
 } from '../../store/User/UserSlice';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { AuthApi } from '@codecharacter-2023/client';
@@ -35,6 +36,7 @@ const NavBar: React.FunctionComponent = () => {
   const location = useLocation();
   const loggedInUser = useAppSelector(user);
   const isLogged = useAppSelector(isloggedIn);
+  const loadingAuth = useAppSelector(loading);
   const dcCompletionstatus = useAppSelector(dailyChallengeCompletionState);
   useEffect(() => {
     const cookieValue = document.cookie;
@@ -140,8 +142,17 @@ const NavBar: React.FunctionComponent = () => {
             </NavLink>
           </div>
         )}
+        {location.pathname === '/' && isLogged && (
+          <div className={styles.navContainer}>
+            <NavLink to="/dashboard" className={`${styles.navLink}`}>
+              <img src={signInIcon} />
+              Dashboard
+            </NavLink>
+          </div>
+        )}
       </div>
-      {localStorage.getItem('token') != null &&
+      {isLogged &&
+      !loadingAuth &&
       location.pathname != '/incomplete-profile' &&
       location.pathname != '/' ? (
         <div className={styles.profileIcons}>