chore: improve user endpoint error handling in UI

Author: jescalada

src/service/routes/users.ts

@@ -15,7 +15,12 @@ router.get('/:id', async (req: Request, res: Response) => {
   console.log(`Retrieving details for user: ${username}`);
   const user = await db.findUser(username);
   if (!user) {
-    res.status(404).send('Error: User not found').end();
+    res
+      .status(404)
+      .send({
+        message: `User ${username} not found`,
+      })
+      .end();
     return;
   }
   res.send(toPublicUser(user));

src/ui/components/Navbars/DashboardNavbarLinks.tsx

@@ -28,11 +28,11 @@ const DashboardNavbarLinks: React.FC = () => {
   const [openProfile, setOpenProfile] = useState<HTMLElement | null>(null);
   const [, setAuth] = useState<boolean>(true);
   const [, setIsLoading] = useState<boolean>(true);
-  const [, setIsError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
   const [user, setUser] = useState<PublicUser | null>(null);
 
   useEffect(() => {
-    getUser(setIsLoading, setUser, setAuth, setIsError);
+    getUser(setIsLoading, setUser, setAuth, setErrorMessage);
   }, []);
 
   const handleClickProfile = (event: React.MouseEvent<HTMLElement>) => {
@@ -66,6 +66,7 @@ const DashboardNavbarLinks: React.FC = () => {
 
   return (
     <div>
+      {errorMessage && <div className={classes.errorMessage}>{errorMessage}</div>}
       <div className={classes.manager}>
         <Button
           color={window.innerWidth > 959 ? 'transparent' : 'white'}

src/ui/services/user.ts

@@ -10,7 +10,7 @@ const getUser = async (
   setIsLoading?: SetStateCallback<boolean>,
   setUser?: (user: PublicUser) => void,
   setAuth?: SetStateCallback<boolean>,
-  setIsError?: SetStateCallback<boolean>,
+  setErrorMessage?: SetStateCallback<string>,
   id: string | null = null,
 ): Promise<void> => {
   let url = `${API_BASE}/api/auth/profile`;
@@ -26,10 +26,13 @@ const getUser = async (
     setIsLoading?.(false);
   } catch (error) {
     const axiosError = error as AxiosError;
-    if (axiosError.response?.status === 401) {
+    const status = axiosError.response?.status;
+    if (status === 401) {
       setAuth?.(false);
+      setErrorMessage?.(processAuthError(axiosError));
     } else {
-      setIsError?.(true);
+      const msg = (axiosError.response?.data as any)?.message ?? 'Unknown error';
+      setErrorMessage?.(`Error fetching user: ${status} ${msg}`);
     }
     setIsLoading?.(false);
   }
@@ -50,32 +53,33 @@ const getUsers = async (
     );
     setUsers(response.data);
   } catch (error) {
-    if (axios.isAxiosError(error)) {
-      if (error.response?.status === 401) {
-        setAuth(false);
-        setErrorMessage(processAuthError(error));
-      } else {
-        const msg = (error.response?.data as any)?.message ?? error.message;
-        setErrorMessage(`Error fetching users: ${msg}`);
-      }
+    const axiosError = error as AxiosError;
+    const status = axiosError.response?.status;
+    if (status === 401) {
+      setAuth(false);
+      setErrorMessage(processAuthError(axiosError));
     } else {
-      setErrorMessage(`Error fetching users: ${(error as Error).message ?? 'Unknown error'}`);
+      const msg = (axiosError.response?.data as any)?.message ?? 'Unknown error';
+      setErrorMessage(`Error fetching users: ${status} ${msg}`);
     }
   } finally {
     setIsLoading(false);
   }
 };
 
-const updateUser = async (user: PublicUser): Promise<void> => {
-  console.log(user);
+const updateUser = async (
+  user: PublicUser,
+  setErrorMessage: SetStateCallback<string>,
+  setIsLoading: SetStateCallback<boolean>,
+): Promise<void> => {
   try {
     await axios.post(`${API_BASE}/api/auth/gitAccount`, user, getAxiosConfig());
   } catch (error) {
     const axiosError = error as AxiosError;
-    if (axiosError.response) {
-      console.log((axiosError.response.data as any).message);
-    }
-    throw error;
+    const status = axiosError.response?.status;
+    const msg = (axiosError.response?.data as any)?.message ?? 'Unknown error';
+    setErrorMessage(`Error updating user: ${status} ${msg}`);
+    setIsLoading(false);
   }
 };
 

src/ui/views/User/UserProfile.tsx

@@ -31,7 +31,7 @@ export default function UserProfile(): React.ReactElement {
   const [user, setUser] = useState<PublicUser | null>(null);
   const [auth, setAuth] = useState<boolean>(true);
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [isError, setIsError] = useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
   const [gitAccount, setGitAccount] = useState<string>('');
   const navigate = useNavigate();
   const { id } = useParams<{ id?: string }>();
@@ -46,31 +46,27 @@ export default function UserProfile(): React.ReactElement {
         setGitAccount(user.gitAccount || '');
       },
       setAuth,
-      setIsError,
+      setErrorMessage,
       id,
     );
   }, [id]);
 
   if (isLoading) return <div>Loading...</div>;
-  if (isError) return <div>Something went wrong ...</div>;
+  if (errorMessage) return <div>{errorMessage}</div>;
 
   if (!auth && window.location.pathname === '/dashboard/profile') {
     return <Navigate to='/login' />;
   }
   if (!user) return <div>No user data available</div>;
 
   const updateProfile = async (): Promise<void> => {
-    try {
-      const updatedData = {
-        ...user,
-        gitAccount: escapeHTML(gitAccount),
-      };
-      await updateUser(updatedData);
-      setUser(updatedData);
-      navigate(`/dashboard/profile`);
-    } catch {
-      setIsError(true);
-    }
+    const updatedData = {
+      ...user,
+      gitAccount: escapeHTML(gitAccount),
+    };
+    await updateUser(updatedData, setErrorMessage, setIsLoading);
+    setUser(updatedData);
+    navigate(`/dashboard/profile`);
   };
 
   const UpdateButton = (): React.ReactElement => (