From 0684c3858c5893264474624398aef116e6be70ae Mon Sep 17 00:00:00 2001
From: Topvennie <vincent@vallaeys.com>
Date: Mon, 9 Sep 2024 20:27:52 +0200
Subject: [PATCH] vinvoor: error handling

---
 vinvoor/src/App.tsx                        |  4 ++--
 vinvoor/src/cards/Cards.tsx                |  4 ++--
 vinvoor/src/components/LoadingSkeleton.tsx | 11 ++++++++---
 vinvoor/src/hooks/useCard.ts               |  1 +
 vinvoor/src/hooks/useDays.ts               |  1 +
 vinvoor/src/hooks/useLeaderboard.ts        |  1 +
 vinvoor/src/hooks/useScan.ts               |  1 +
 vinvoor/src/hooks/useSettings.ts           |  1 +
 vinvoor/src/leaderboard/Leaderboard.tsx    |  4 ++--
 vinvoor/src/overview/Overview.tsx          |  4 ++--
 vinvoor/src/providers/UserProvider.tsx     | 16 +++-------------
 vinvoor/src/scans/Scans.tsx                |  9 ++++++---
 vinvoor/src/settings/SettingsOverview.tsx  |  4 ++--
 vinvoor/src/settings/admin/days/Days.tsx   |  4 ++--
 14 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/vinvoor/src/App.tsx b/vinvoor/src/App.tsx
index c574d4d..d8b3b94 100644
--- a/vinvoor/src/App.tsx
+++ b/vinvoor/src/App.tsx
@@ -8,7 +8,7 @@ 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();
 
@@ -16,7 +16,7 @@ export const App = () => {
     <>
       <NavBar />
       <Container maxWidth="xl" sx={{ my: "2%" }}>
-        <LoadingSkeleton loading={loading}>
+        <LoadingSkeleton isLoading={loading} isError={error !== undefined}>
           {user !== undefined ? (
             outlet !== null ? (
               <Outlet />
diff --git a/vinvoor/src/cards/Cards.tsx b/vinvoor/src/cards/Cards.tsx
index a912ce2..4bc0495 100644
--- a/vinvoor/src/cards/Cards.tsx
+++ b/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>
   );
diff --git a/vinvoor/src/components/LoadingSkeleton.tsx b/vinvoor/src/components/LoadingSkeleton.tsx
index 69cec1c..cffe374 100644
--- a/vinvoor/src/components/LoadingSkeleton.tsx
+++ b/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}</>;
 };
diff --git a/vinvoor/src/hooks/useCard.ts b/vinvoor/src/hooks/useCard.ts
index 6606f19..be621e1 100644
--- a/vinvoor/src/hooks/useCard.ts
+++ b/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 = () => {
diff --git a/vinvoor/src/hooks/useDays.ts b/vinvoor/src/hooks/useDays.ts
index 1653378..9df3290 100644
--- a/vinvoor/src/hooks/useDays.ts
+++ b/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 = () => {
diff --git a/vinvoor/src/hooks/useLeaderboard.ts b/vinvoor/src/hooks/useLeaderboard.ts
index 5571e36..5301b0f 100644
--- a/vinvoor/src/hooks/useLeaderboard.ts
+++ b/vinvoor/src/hooks/useLeaderboard.ts
@@ -16,4 +16,5 @@ export const useLeaderboardItems = () =>
         ENDPOINT,
         convertLeaderboardItemJSON,
       ),
+    retry: 1,
   });
diff --git a/vinvoor/src/hooks/useScan.ts b/vinvoor/src/hooks/useScan.ts
index 066d747..24ca8b7 100644
--- a/vinvoor/src/hooks/useScan.ts
+++ b/vinvoor/src/hooks/useScan.ts
@@ -8,4 +8,5 @@ export const useScans = () =>
   useQuery({
     queryKey: ["scans"],
     queryFn: () => getApi<Scan[], ScanJSON[]>(ENDPOINT, convertScanJSON),
+    retry: 1,
   });
diff --git a/vinvoor/src/hooks/useSettings.ts b/vinvoor/src/hooks/useSettings.ts
index c66c502..d621d49 100644
--- a/vinvoor/src/hooks/useSettings.ts
+++ b/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 = () => {
diff --git a/vinvoor/src/leaderboard/Leaderboard.tsx b/vinvoor/src/leaderboard/Leaderboard.tsx
index ba25402..2419c31 100644
--- a/vinvoor/src/leaderboard/Leaderboard.tsx
+++ b/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 }} />
diff --git a/vinvoor/src/overview/Overview.tsx b/vinvoor/src/overview/Overview.tsx
index c67f9d5..3f4ce28 100644
--- a/vinvoor/src/overview/Overview.tsx
+++ b/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}>
diff --git a/vinvoor/src/providers/UserProvider.tsx b/vinvoor/src/providers/UserProvider.tsx
index 1f2e312..93fc6d6 100644
--- a/vinvoor/src/providers/UserProvider.tsx
+++ b/vinvoor/src/providers/UserProvider.tsx
@@ -2,7 +2,7 @@ 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;
@@ -10,16 +10,12 @@ interface UserProviderProps {
 
 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,7 +43,7 @@ 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);
@@ -61,7 +51,7 @@ export const UserProvider: FC<UserProviderProps> = ({ children }) => {
   }, []);
 
   return (
-    <UserContext.Provider value={{ user, invalidateUser, loading, error }}>
+    <UserContext.Provider value={{ user, loading, error }}>
       {children}
     </UserContext.Provider>
   );
diff --git a/vinvoor/src/scans/Scans.tsx b/vinvoor/src/scans/Scans.tsx
index c784be0..e580d35 100644
--- a/vinvoor/src/scans/Scans.tsx
+++ b/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>
diff --git a/vinvoor/src/settings/SettingsOverview.tsx b/vinvoor/src/settings/SettingsOverview.tsx
index a50de0b..110143e 100644
--- a/vinvoor/src/settings/SettingsOverview.tsx
+++ b/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>
   );
diff --git a/vinvoor/src/settings/admin/days/Days.tsx b/vinvoor/src/settings/admin/days/Days.tsx
index 3c7bdcd..704bc6c 100644
--- a/vinvoor/src/settings/admin/days/Days.tsx
+++ b/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"