Merge pull request #155 from jadmsaadaot/SUBMIT-task#133

Handle different errors when getUser fails on login

submit-web/src/components/ErrorPage.tsx

@@ -0,0 +1,27 @@
+import { Paper, Container } from "@mui/material";
+import { useEffect } from "react";
+import { useAuth } from "react-oidc-context";
+
+export default function ErrorPage() {
+  const { signoutRedirect } = useAuth();
+
+  useEffect(() => {
+    signoutRedirect();
+  }, [signoutRedirect]);
+
+  return (
+    <Container id="Error">
+      <Paper
+        elevation={3}
+        sx={{
+          padding: "1rem",
+          marginTop: "2rem",
+          textAlign: "center",
+        }}
+      >
+        <p>Oops! something wrong happened.</p>
+        <p>You will be signed out.</p>
+      </Paper>
+    </Container>
+  );
+}

submit-web/src/routes/error.tsx

@@ -1,3 +1,4 @@
+import ErrorPage from "@/components/ErrorPage";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/error")({
@@ -6,5 +7,5 @@ export const Route = createFileRoute("/error")({
 });
 
 function Error() {
-  return <div>Oops! An unexpected error occurred</div>;
+  return <ErrorPage />;
 }

submit-web/src/routes/oidc-callback/index.tsx

@@ -1,61 +1,66 @@
 import { PageLoader } from "@/components/Shared/PageLoader";
+import { notify } from "@/components/Shared/Snackbar/snackbarStore";
 import { useGetUserByGuid } from "@/hooks/api/useAccounts";
 import { USER_TYPE } from "@/models/User";
+import { HTTP_STATUS } from "@/utils/constants";
 import { createFileRoute, Navigate } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { isAxiosError } from "axios";
 import { useAuth } from "react-oidc-context";
 
 export const Route = createFileRoute("/oidc-callback/")({
   component: OidcCallback,
-  // loader: ({ context: { authentication, queryClient } }) => {
-  //   return queryClient.ensureQueryData(
-  //     getUserByGuidQueryOptions({ guid: authentication?.user?.profile.sub }),
-  //   );
-  // },
-  // errorComponent: () => <Navigate to="/error" />,
-  // pendingComponent: () => <PageLoader />,
 });
 
+const ERROR_MESSAGE = "An error occurred while loading user data";
+
 function OidcCallback() {
   const { error: getAuthError, user: kcUser } = useAuth();
-  const [isAuthLoading, setIsAuthLoading] = useState(true);
   const params = new URLSearchParams(window.location.search);
   const proponent_id = params.get("proponent_id");
 
-  useEffect(() => {
-    if (kcUser) {
-      setIsAuthLoading(false);
-    }
-  }, [kcUser, setIsAuthLoading]);
-
-  const { data: userData, isLoading: isUserDataLoading } = useGetUserByGuid({
+  const { data: userData, error: getUserError } = useGetUserByGuid({
     guid: kcUser?.profile.sub,
   });
 
   if (getAuthError) {
     return <Navigate to="/error" />;
   }
 
+  if (getUserError) {
+    if (isAxiosError(getUserError)) {
+      if (
+        getUserError.response?.status === HTTP_STATUS.NOT_FOUND &&
+        proponent_id
+      ) {
+        return (
+          <Navigate
+            to="/proponent/registration/create-account"
+            search={{
+              proponent_id: proponent_id
+                ? Number.parseInt(proponent_id)
+                : undefined,
+            }}
+          />
+        );
+      } else {
+        notify.error(getUserError.response?.data?.message || ERROR_MESSAGE);
+        return <Navigate to="/error" />;
+      }
+    }
+    notify.error(ERROR_MESSAGE);
+    return <Navigate to="/error" />;
+  }
+
   if (userData?.type === USER_TYPE.STAFF) {
     return <Navigate to="/staff/projects" />;
   }
 
-  if (userData?.account_user?.account_id) {
+  if (
+    userData?.type === USER_TYPE.PROPONENT &&
+    userData?.account_user?.account_id
+  ) {
     return <Navigate to="/proponent/projects" />;
   }
 
-  if (!isAuthLoading && !isUserDataLoading) {
-    return (
-      <Navigate
-        to="/proponent/registration/create-account"
-        search={{
-          proponent_id: proponent_id
-            ? Number.parseInt(proponent_id)
-            : undefined,
-        }}
-      />
-    );
-  }
-
   return <PageLoader />;
 }

submit-web/src/utils/constants.ts

@@ -1 +1,11 @@
 // App Constants should go here
+export const HTTP_STATUS = {
+  OK: 200,
+  CREATED: 201,
+  NO_CONTENT: 204,
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  INTERNAL_SERVER_ERROR: 500,
+};