Merge pull request #100 from ctk-hq/fix/bad-userflow

fix: userflow improvements

services/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { useReducer, useEffect } from "react";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useNavigate } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
@@ -30,6 +30,7 @@ const queryClient = new QueryClient();
 export default function App() {
   const [state, dispatch] = useReducer(reducer, initialState);
   const auth = useLocalStorageAuth();
+  const navigate = useNavigate();
   const isAuthenticated = !!(auth && Object.keys(auth).length);
 
   const defaultProtectedRouteProps: Omit<ProtectedRouteProps, "outlet"> = {
@@ -49,10 +50,10 @@ export default function App() {
           // try to refresh the existing token,
           // on error clear localstorage
           if (err.status === 401) {
-            err.text().then((text: string) => {
+            err.json().then((errObj: any) => {
-              const textObj = JSON.parse(text);
+              if (errObj.code === "user_not_found") {
-              if (textObj.code === "user_not_found") {
                 localStorage.removeItem(LOCAL_STORAGE);
+                navigate("/login");
               }
             });
 
@@ -72,8 +73,9 @@ export default function App() {
                   }
                 }
               })
-              .catch(() => {
+              .catch((err) => {
                 localStorage.removeItem(LOCAL_STORAGE);
+                navigate("/login");
               });
           }
         });

services/frontend/src/components/Auth/Login/index.tsx

@@ -25,9 +25,10 @@ const Login = (props: IProfileProps) => {
     onSubmit: (values) => {
       const username = values.username;
       const password = values.password;
-      setLoggingIn(true);
 
       if (username && password) {
+        setLoggingIn(true);
+
         logIn(username, password)
           .then(checkHttpStatus)
           .then((data) => {
@@ -43,8 +44,10 @@ const Login = (props: IProfileProps) => {
           })
           .catch((err) => {
             if (err) {
-              err.text().then((e: string) => {
+              err.json().then((e: any) => {
-                toaster(e, "error");
+                Object.keys(e).forEach(function (key) {
+                  toaster(e[key] as string, "error");
+                });
               });
             }
           })

services/frontend/src/components/Auth/Signup/index.tsx

@@ -29,9 +29,10 @@ const Signup = (props: IProfileProps) => {
       const email = values.email;
       const password1 = values.password;
       const password2 = values.confirmPassword;
-      setSigningUp(true);
 
       if (username && email && password1 && password2) {
+        setSigningUp(true);
+
         signup(username, email, password1, password2)
           .then(checkHttpStatus)
           .then((data) => {
@@ -47,8 +48,10 @@ const Signup = (props: IProfileProps) => {
           })
           .catch((err) => {
             if (err) {
-              err.text().then((e: string) => {
+              err.json().then((e: any) => {
-                toaster(e, "error");
+                Object.keys(e).forEach(function (key) {
+                  toaster(e[key] as string, "error");
+                });
               });
             }
           })

services/frontend/src/components/global/SideBar.tsx

@@ -19,7 +19,7 @@ export default function SideBar(props: ISideBarProps) {
       name: "Projects",
       href: "/projects",
       icon: BookOpenIcon,
-      current: pathname.match(projRegex) ? true : false,
+      current: pathname.match(projRegex) || pathname == "/" ? true : false,
       visible: isAuthenticated
     },
     {