From bea07ebe29641468219b8428cceb3a7078a3de52 Mon Sep 17 00:00:00 2001
From: Jannes Vandepitte <jannes.vandepitte@gmail.com>
Date: Fri, 26 Aug 2022 11:10:40 +0200
Subject: [PATCH] Error handling

---
 src/modules/usenet/UsenetHistoryList.tsx | 32 +++++++++++++++++++++---
 src/modules/usenet/UsenetQueueList.tsx   | 21 ++++++++++++++--
 src/pages/api/modules/usenet/history.ts  |  3 ++-
 src/pages/api/modules/usenet/index.ts    |  2 +-
 src/tools/hooks/api.ts                   |  2 ++
 5 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/modules/usenet/UsenetHistoryList.tsx b/src/modules/usenet/UsenetHistoryList.tsx
index 7b1b7792b..b464f7653 100644
--- a/src/modules/usenet/UsenetHistoryList.tsx
+++ b/src/modules/usenet/UsenetHistoryList.tsx
@@ -1,4 +1,17 @@
-import { Center, Pagination, Skeleton, Table, Text, Title, Tooltip } from '@mantine/core';
+import {
+  Alert,
+  Center,
+  Code,
+  Group,
+  Pagination,
+  Skeleton,
+  Table,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons';
+import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { FunctionComponent, useState } from 'react';
@@ -16,7 +29,7 @@ const PAGE_SIZE = 10;
 export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ serviceId }) => {
   const [page, setPage] = useState(1);
 
-  const { data, isLoading } = useGetUsenetHistory({
+  const { data, isLoading, isError, error } = useGetUsenetHistory({
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
     serviceId,
@@ -33,10 +46,23 @@ export const UsenetHistoryList: FunctionComponent<UsenetHistoryListProps> = ({ s
     );
   }
 
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
+          Some error has occured while fetching data:
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
   if (!data || data.items.length <= 0) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <Title order={3}>Queue is empty</Title>
+        <Title order={3}>History is empty</Title>
       </Center>
     );
   }
diff --git a/src/modules/usenet/UsenetQueueList.tsx b/src/modules/usenet/UsenetQueueList.tsx
index ded602c7e..322af9be4 100644
--- a/src/modules/usenet/UsenetQueueList.tsx
+++ b/src/modules/usenet/UsenetQueueList.tsx
@@ -1,5 +1,8 @@
 import {
+  Alert,
   Center,
+  Code,
+  Group,
   Progress,
   Skeleton,
   Table,
@@ -8,7 +11,8 @@ import {
   Tooltip,
   useMantineTheme,
 } from '@mantine/core';
-import { IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { FunctionComponent, useState } from 'react';
@@ -26,7 +30,7 @@ const PAGE_SIZE = 10;
 export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ serviceId }) => {
   const theme = useMantineTheme();
   const [page, setPage] = useState(1);
-  const { data, isLoading } = useGetUsenetDownloads({
+  const { data, isLoading, isError, error } = useGetUsenetDownloads({
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
     serviceId,
@@ -42,6 +46,19 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ servi
     );
   }
 
+  if (isError) {
+    return (
+      <Group position="center">
+        <Alert icon={<IconAlertCircle size={16} />} my="lg" title="Error!" color="red" radius="md">
+          Some error has occured while fetching data:
+          <Code mt="sm" block>
+            {(error as AxiosError)?.response?.data as string}
+          </Code>
+        </Alert>
+      </Group>
+    );
+  }
+
   if (!data || data.items.length <= 0) {
     return (
       <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
diff --git a/src/pages/api/modules/usenet/history.ts b/src/pages/api/modules/usenet/history.ts
index 2ec3ee889..c40c72322 100644
--- a/src/pages/api/modules/usenet/history.ts
+++ b/src/pages/api/modules/usenet/history.ts
@@ -36,6 +36,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
     if (!service.apiKey) {
       throw new Error(`API Key for service "${service.name}" is missing`);
     }
+
     const history = await new Client(service.url, service.apiKey).history(offset, limit);
 
     const items: UsenetHistoryItem[] = history.slots.map((slot) => ({
@@ -51,7 +52,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
 
     return res.status(200).json(response);
   } catch (err) {
-    return res.status(401).json(err);
+    return res.status(500).send((err as any).message);
   }
 }
 
diff --git a/src/pages/api/modules/usenet/index.ts b/src/pages/api/modules/usenet/index.ts
index 6bbba4a80..e7d5a69cf 100644
--- a/src/pages/api/modules/usenet/index.ts
+++ b/src/pages/api/modules/usenet/index.ts
@@ -63,7 +63,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
 
     return res.status(200).json(response);
   } catch (err) {
-    return res.status(401).json(err);
+    return res.status(500).send((err as any).message);
   }
 }
 
diff --git a/src/tools/hooks/api.ts b/src/tools/hooks/api.ts
index f7215286a..9b0f1b8d6 100644
--- a/src/tools/hooks/api.ts
+++ b/src/tools/hooks/api.ts
@@ -18,6 +18,7 @@ export const useGetUsenetDownloads = (params: UsenetQueueRequestParams) =>
     {
       refetchInterval: 1000,
       keepPreviousData: true,
+      retry: 2,
     }
   );
 
@@ -33,5 +34,6 @@ export const useGetUsenetHistory = (params: UsenetHistoryRequestParams) =>
     {
       refetchInterval: 1000,
       keepPreviousData: true,
+      retry: 2,
     }
   );