From ab8bc90ddd871e9c1ec796c46081064689b7de7b Mon Sep 17 00:00:00 2001
From: Topvennie <vincent@vallaeys.com>
Date: Tue, 10 Sep 2024 14:05:17 +0200
Subject: [PATCH] vinvoor: better error handling

---
 vinvoor/src/App.tsx                        |  6 ++--
 vinvoor/src/cards/Cards.tsx                |  6 ++--
 vinvoor/src/components/LoadingSkeleton.tsx | 16 +++++++----
 vinvoor/src/leaderboard/Leaderboard.tsx    |  4 +--
 vinvoor/src/navbar/NavBar.tsx              |  2 +-
 vinvoor/src/overview/Overview.tsx          |  6 ++--
 vinvoor/src/scans/Scans.tsx                |  9 ++----
 vinvoor/src/settings/SettingsOverview.tsx  |  4 +--
 vinvoor/src/settings/admin/days/Days.tsx   |  4 +--
 vinvoor/src/types/settings.ts              | 32 +++++++++++-----------
 10 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/vinvoor/src/App.tsx b/vinvoor/src/App.tsx
index 8c40c64..4bde83d 100644
--- a/vinvoor/src/App.tsx
+++ b/vinvoor/src/App.tsx
@@ -10,7 +10,7 @@ import "./themes/background.css";
 import { useUser } from "./hooks/useUser";
 
 export const App = () => {
-  const { data: user, isLoading, isError } = useUser();
+  const userQuery = useUser();
   const outlet = useOutlet();
 
   const [backgroundSix] = useState(() => randomInt(0, 50) === 1);
@@ -24,8 +24,8 @@ export const App = () => {
           my: "2%",
         }}
       >
-        <LoadingSkeleton isLoading={isLoading} isError={isError}>
-          {user && Object.keys(user).length > 0 ? (
+        <LoadingSkeleton queries={[userQuery]}>
+          {Object.keys(userQuery.data ?? {}).length > 0 ? (
             outlet !== null ? (
               <Outlet />
             ) : (
diff --git a/vinvoor/src/cards/Cards.tsx b/vinvoor/src/cards/Cards.tsx
index 4bc0495..f46cdf6 100644
--- a/vinvoor/src/cards/Cards.tsx
+++ b/vinvoor/src/cards/Cards.tsx
@@ -4,11 +4,11 @@ import { CardsEmpty } from "./CardsEmpty";
 import { CardsTable } from "./CardsTable";
 
 export const Cards = () => {
-  const { data: cards, isLoading, isError } = useCards();
+  const cardsQuery = useCards();
 
   return (
-    <LoadingSkeleton isLoading={isLoading} isError={isError}>
-      {cards?.length ? <CardsTable /> : <CardsEmpty />}
+    <LoadingSkeleton queries={[cardsQuery]}>
+      {cardsQuery.data?.length ? <CardsTable /> : <CardsEmpty />}
     </LoadingSkeleton>
   );
 };
diff --git a/vinvoor/src/components/LoadingSkeleton.tsx b/vinvoor/src/components/LoadingSkeleton.tsx
index d64bc59..ff2a7fa 100644
--- a/vinvoor/src/components/LoadingSkeleton.tsx
+++ b/vinvoor/src/components/LoadingSkeleton.tsx
@@ -1,20 +1,26 @@
 import { Skeleton, SkeletonProps } from "@mui/material";
+import { UseQueryResult } from "@tanstack/react-query";
 import { FC, ReactNode } from "react";
+import { isResponseNot200Error } from "../util/fetch";
 
 interface LoadingSkeletonProps extends SkeletonProps {
-  isLoading: boolean;
-  isError: boolean;
+  queries: UseQueryResult<unknown, Error>[];
   children: ReactNode;
 }
 
 export const LoadingSkeleton: FC<LoadingSkeletonProps> = ({
-  isLoading,
-  isError,
+  queries,
   children,
   ...props
 }) => {
+  const isError = queries.some(query => query.isError);
   if (isError)
-    throw new Error("Error fetching data, unable to reach the server");
+    throw (
+      queries.find(query => isResponseNot200Error(query.error))?.error ??
+      new Error("Error fetching data, unable to reach the server")
+    );
+
+  const isLoading = queries.some(query => query.isLoading);
 
   return isLoading ? <Skeleton {...props} /> : <>{children}</>;
 };
diff --git a/vinvoor/src/leaderboard/Leaderboard.tsx b/vinvoor/src/leaderboard/Leaderboard.tsx
index 2419c31..e69385d 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, isError } = useLeaderboardItems();
+  const leaderboardQuery = useLeaderboardItems();
 
   return (
-    <LoadingSkeleton isLoading={isLoading} isError={isError}>
+    <LoadingSkeleton queries={[leaderboardQuery]}>
       <Paper elevation={4}>
         <LeaderboardTableToolbar />
         <Divider sx={{ borderColor: "primary.main", borderBottomWidth: 3 }} />
diff --git a/vinvoor/src/navbar/NavBar.tsx b/vinvoor/src/navbar/NavBar.tsx
index 9f80720..0f80a0f 100644
--- a/vinvoor/src/navbar/NavBar.tsx
+++ b/vinvoor/src/navbar/NavBar.tsx
@@ -25,7 +25,7 @@ const navBarPages: PageIcon[] = [
 ];
 
 const userMenuPages: PageIcon[] = [
-  { page: "Settings", icon: <CogOutline sx={{ mr: ".3rem" }} /> },
+  // { page: "Settings", icon: <CogOutline sx={{ mr: ".3rem" }} /> },
 ];
 
 export const NavBar = () => {
diff --git a/vinvoor/src/overview/Overview.tsx b/vinvoor/src/overview/Overview.tsx
index 7f86374..cf29416 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, isError } = useScans();
+  const scansQuery = useScans();
   const [checked, setChecked] = useState<boolean>(false);
   const daysRef = useRef<HTMLDivElement>(null);
   const [paperHeight, setPaperHeight] = useState<number>(0);
@@ -27,8 +27,8 @@ export const Overview = () => {
   });
 
   return (
-    <LoadingSkeleton isLoading={isLoading} isError={isError}>
-      {scans?.length ? (
+    <LoadingSkeleton queries={[scansQuery]}>
+      {scansQuery.data?.length ? (
         <Grid container spacing={2} justifyContent="space-between">
           <Grid item xs={8} md={4} lg={3}>
             <CheckIn />
diff --git a/vinvoor/src/scans/Scans.tsx b/vinvoor/src/scans/Scans.tsx
index e580d35..6d5812d 100644
--- a/vinvoor/src/scans/Scans.tsx
+++ b/vinvoor/src/scans/Scans.tsx
@@ -6,14 +6,11 @@ import { useScans } from "../hooks/useScan";
 import { useCards } from "../hooks/useCard";
 
 export const Scans = () => {
-  const { isLoading: isLoadingScans, isError: isErrorScans } = useScans();
-  const { isLoading: isLoadingCards, isError: isErrorCards } = useCards();
+  const scansQuery = useScans();
+  const cardsQuery = useCards();
 
   return (
-    <LoadingSkeleton
-      isLoading={isLoadingScans || isLoadingCards}
-      isError={isErrorScans || isErrorCards}
-    >
+    <LoadingSkeleton queries={[scansQuery, cardsQuery]}>
       <Paper elevation={4}>
         <TableContainer>
           <Table>
diff --git a/vinvoor/src/settings/SettingsOverview.tsx b/vinvoor/src/settings/SettingsOverview.tsx
index 110143e..dff72f3 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, isError } = useSettings();
+  const settingsQuery = useSettings();
 
   return (
-    <LoadingSkeleton isLoading={isLoading} isError={isError}>
+    <LoadingSkeleton queries={[settingsQuery]}>
       <Settings />
     </LoadingSkeleton>
   );
diff --git a/vinvoor/src/settings/admin/days/Days.tsx b/vinvoor/src/settings/admin/days/Days.tsx
index 704bc6c..5aa058f 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, isError } = useDays();
+  const daysQuery = useDays();
 
   return (
-    <LoadingSkeleton isLoading={isLoading} isError={isError}>
+    <LoadingSkeleton queries={[daysQuery]}>
       <Grid
         container
         justifyContent="space-between"
diff --git a/vinvoor/src/types/settings.ts b/vinvoor/src/types/settings.ts
index c5861f8..64e6075 100644
--- a/vinvoor/src/types/settings.ts
+++ b/vinvoor/src/types/settings.ts
@@ -25,20 +25,20 @@ interface AdjustableSettings {
 }
 
 export const adjustableSettings: AdjustableSettings[] = [
-  {
-    id: "scanInOut",
-    name: "Scan in and out",
-    description:
-      "A second scan on the same day will be interpreted as a scan out",
-  },
-  {
-    id: "leaderboard",
-    name: "Leaderboard",
-    description: "Show yourself on the leaderboard",
-  },
-  {
-    id: "public",
-    name: "Public",
-    description: "Let others see you!",
-  },
+  // {
+  //   id: "scanInOut",
+  //   name: "Scan in and out",
+  //   description:
+  //     "A second scan on the same day will be interpreted as a scan out",
+  // },
+  // {
+  //   id: "leaderboard",
+  //   name: "Leaderboard",
+  //   description: "Show yourself on the leaderboard",
+  // },
+  // {
+  //   id: "public",
+  //   name: "Public",
+  //   description: "Let others see you!",
+  // },
 ];