vinvoor: error handling

vinvoor/src/App.tsx

@@ -8,15 +8,15 @@ import { UserContext } from "./providers/UserProvider";
 import { WelcomePage } from "./WelcomePage";
 
 export const App = () => {
-  const { user, loading } = useContext(UserContext);
+  const { user, loading, error } = useContext(UserContext);
 
   const outlet = useOutlet();
 
   return (
     <>
       <NavBar />
       <Container maxWidth="xl" sx={{ my: "2%" }}>
-        <LoadingSkeleton loading={loading}>
+        <LoadingSkeleton isLoading={loading} isError={error !== undefined}>
           {user !== undefined ? (
             outlet !== null ? (
               <Outlet />

vinvoor/src/cards/Cards.tsx

@@ -4,10 +4,10 @@ import { CardsEmpty } from "./CardsEmpty";
 import { CardsTable } from "./CardsTable";
 
 export const Cards = () => {
-  const { data: cards, isLoading } = useCards();
+  const { data: cards, isLoading, isError } = useCards();
 
   return (
-    <LoadingSkeleton loading={isLoading}>
+    <LoadingSkeleton isLoading={isLoading} isError={isError}>
       {cards?.length ? <CardsTable /> : <CardsEmpty />}
     </LoadingSkeleton>
   );

vinvoor/src/components/LoadingSkeleton.tsx

@@ -2,14 +2,19 @@ import { Skeleton, SkeletonProps } from "@mui/material";
 import { FC, ReactNode } from "react";
 
 interface LoadingSkeletonProps extends SkeletonProps {
-  loading: boolean;
+  isLoading: boolean;
+  isError: boolean;
   children: ReactNode;
 }
 
 export const LoadingSkeleton: FC<LoadingSkeletonProps> = ({
-  loading,
+  isLoading,
+  isError,
   children,
   ...props
 }) => {
-  return loading ? <Skeleton height={300} {...props} /> : children;
+  if (isError)
+    throw new Error("Error fetching data. Unable to reach the server");
+
+  return isLoading ? <Skeleton {...props} /> : <>{children}</>;
 };

vinvoor/src/hooks/useCard.ts

@@ -8,6 +8,7 @@ export const useCards = () =>
   useQuery<Card[]>({
     queryKey: ["cards"],
     queryFn: () => getApi<Card[], CardJSON[]>(ENDPOINT, convertCardJSON),
+    retry: 1,
   });
 
 export const usePatchCards = () => {

vinvoor/src/hooks/useDays.ts

@@ -8,6 +8,7 @@ export const useDays = () =>
   useQuery({
     queryKey: ["days"],
     queryFn: () => getApi<Day[], DayJSON[]>(ENDPOINT, convertDayJSON),
+    retry: 1,
   });
 
 export const useDeleteDay = () => {

vinvoor/src/hooks/useLeaderboard.ts

@@ -16,4 +16,5 @@ export const useLeaderboardItems = () =>
         ENDPOINT,
         convertLeaderboardItemJSON,
       ),
+    retry: 1,
   });

vinvoor/src/hooks/useScan.ts

@@ -8,4 +8,5 @@ export const useScans = () =>
   useQuery({
     queryKey: ["scans"],
     queryFn: () => getApi<Scan[], ScanJSON[]>(ENDPOINT, convertScanJSON),
+    retry: 1,
   });

vinvoor/src/hooks/useSettings.ts

@@ -8,6 +8,7 @@ export const useSettings = () =>
   useQuery({
     queryKey: ["settings"],
     queryFn: () => getApi<Settings, SettingsJSON>(ENDPOINT, converSettingsJSON),
+    retry: 1,
   });
 
 export const usePatchSettings = () => {

vinvoor/src/leaderboard/Leaderboard.tsx

@@ -5,10 +5,10 @@ import { LeaderboardTableToolbar } from "./LeaderboardTableToolbar";
 import { useLeaderboardItems } from "../hooks/useLeaderboard";
 
 export const Leaderboard = () => {
-  const { isLoading } = useLeaderboardItems();
+  const { isLoading, isError } = useLeaderboardItems();
 
   return (
-    <LoadingSkeleton loading={isLoading}>
+    <LoadingSkeleton isLoading={isLoading} isError={isError}>
       <Paper elevation={4}>
         <LeaderboardTableToolbar />
         <Divider sx={{ borderColor: "primary.main", borderBottomWidth: 3 }} />

vinvoor/src/overview/Overview.tsx

@@ -12,7 +12,7 @@ import { Streak } from "./streak/Streak";
 import { useScans } from "../hooks/useScan";
 
 export const Overview = () => {
-  const { data: scans, isLoading } = useScans();
+  const { data: scans, isLoading, isError } = useScans();
   const [checked, setChecked] = useState<boolean>(false);
   const daysRef = useRef<HTMLDivElement>(null);
   const [paperHeight, setPaperHeight] = useState<number>(0);
@@ -27,7 +27,7 @@ export const Overview = () => {
   });
 
   return (
-    <LoadingSkeleton loading={isLoading}>
+    <LoadingSkeleton isLoading={isLoading} isError={isError}>
       {scans?.length ? (
         <Grid container spacing={2} justifyContent="space-between">
           <Grid item xs={8} md={4} lg={3}>

vinvoor/src/providers/UserProvider.tsx

@@ -2,24 +2,20 @@ import Cookies from "js-cookie";
 import { createContext, FC, ReactNode, useEffect, useState } from "react";
 import { Optional } from "../types/general";
 import { User } from "../types/user";
-import { getApi } from "../util/fetch";
+import { getApi, isResponseNot200Error } from "../util/fetch";
 
 interface UserProviderProps {
   children: ReactNode;
 }
 
 interface UserContextProps {
   user?: User;
-  invalidateUser: (error: Error) => void;
   loading: boolean;
   error?: Error;
 }
 
 const defaultUserContextProps: UserContextProps = {
   user: undefined,
-  invalidateUser: () => {
-    // No operation, placeholder function
-  },
   loading: true,
   error: undefined,
 };
@@ -33,17 +29,11 @@ export const UserProvider: FC<UserProviderProps> = ({ children }) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<Optional<Error>>(undefined);
 
-  const invalidateUser = (error?: Error) => {
-    setUser(undefined);
-    setError(error);
-  };
-
   useEffect(() => {
     const sessionId = Cookies.get("session_id");
 
     if (!sessionId) {
       setLoading(false);
-      setError(new Error("No session ID"));
 
       return;
     }
@@ -53,15 +43,15 @@ export const UserProvider: FC<UserProviderProps> = ({ children }) => {
       .catch(error => {
         Cookies.remove("session_id");
         setUser(undefined);
-        setError(error as Error);
+        if (!isResponseNot200Error(error)) setError(error as Error);
       })
       .finally(() => {
         setLoading(false);
       });
   }, []);
 
   return (
-    <UserContext.Provider value={{ user, invalidateUser, loading, error }}>
+    <UserContext.Provider value={{ user, loading, error }}>
       {children}
     </UserContext.Provider>
   );

vinvoor/src/scans/Scans.tsx

@@ -6,11 +6,14 @@ import { useScans } from "../hooks/useScan";
 import { useCards } from "../hooks/useCard";
 
 export const Scans = () => {
-  const { isLoading: isLoadingScans } = useScans();
-  const { isLoading: isLoadingCards } = useCards();
+  const { isLoading: isLoadingScans, isError: isErrorScans } = useScans();
+  const { isLoading: isLoadingCards, isError: isErrorCards } = useCards();
 
   return (
-    <LoadingSkeleton loading={isLoadingScans || isLoadingCards}>
+    <LoadingSkeleton
+      isLoading={isLoadingScans || isLoadingCards}
+      isError={isErrorScans || isErrorCards}
+    >
       <Paper elevation={4}>
         <TableContainer>
           <Table>

vinvoor/src/settings/SettingsOverview.tsx

@@ -3,10 +3,10 @@ import { useSettings } from "../hooks/useSettings";
 import { Settings } from "./Settings";
 
 export const SettingsOverview = () => {
-  const { isLoading } = useSettings();
+  const { isLoading, isError } = useSettings();
 
   return (
-    <LoadingSkeleton loading={isLoading}>
+    <LoadingSkeleton isLoading={isLoading} isError={isError}>
       <Settings />
     </LoadingSkeleton>
   );

vinvoor/src/settings/admin/days/Days.tsx

@@ -5,10 +5,10 @@ import { DaysTable } from "./DaysTable";
 import { useDays } from "../../../hooks/useDays";
 
 export const Days = () => {
-  const { isLoading } = useDays();
+  const { isLoading, isError } = useDays();
 
   return (
-    <LoadingSkeleton loading={isLoading}>
+    <LoadingSkeleton isLoading={isLoading} isError={isError}>
       <Grid
         container
         justifyContent="space-between"