Merge pull request #256 from akhilmhdh/feat/react-query

feat(ui): added new auth guard with react-query and axios

frontend/src/pages/_app.tsx

@@ -4,12 +4,14 @@ import { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 import { appWithTranslation } from 'next-i18next';
 import { config } from '@fortawesome/fontawesome-svg-core';
+import { QueryClientProvider } from '@tanstack/react-query';
 
 import Layout from '@app/components/basic/Layout';
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
-import RouteGuard from '@app/components/RouteGuard';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
 import { publicPaths } from '@app/const';
+import { AuthProvider } from '@app/context/AuthContext';
+import { queryClient } from '@app/reactQuery';
 
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import '../styles/globals.css';
@@ -54,17 +56,25 @@ const App = ({ Component, pageProps, ...appProps }: NextAppProp): JSX.Element =>
     publicPaths.includes(`/${appProps.router.pathname.split('/')[1]}`) ||
     !Component.requireAuth
   ) {
-    return <Component {...pageProps} />;
+    return (
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <Component {...pageProps} />
+        </AuthProvider>
+      </QueryClientProvider>
+    );
   }
 
   return (
-    <RouteGuard>
-      <NotificationProvider>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </NotificationProvider>
-    </RouteGuard>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <NotificationProvider>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </NotificationProvider>
+      </AuthProvider>
+    </QueryClientProvider>
   );
 };
 

frontend/src/pages/login.tsx

@@ -13,6 +13,7 @@ import InputField from '@app/components/basic/InputField';
 import ListBox from '@app/components/basic/Listbox';
 import attemptLogin from '@app/components/utilities/attemptLogin';
 import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
+import { isLoggedIn } from '@app/reactQuery';
 
 import getWorkspaces from './api/workspace/getWorkspaces';
 
@@ -31,6 +32,7 @@ export default function Login() {
   };
 
   useEffect(() => {
+    // TODO(akhilmhdh): workspace will be controlled by a workspace context
     const redirectToDashboard = async () => {
       let userWorkspace;
       try {
@@ -41,7 +43,9 @@ export default function Login() {
         console.log('Error - Not logged in yet');
       }
     };
-    redirectToDashboard();
+    if (isLoggedIn()) {
+      redirectToDashboard();
+    }
   }, []);
 
   /**