Feat/api errors (#25)

Improved API error handling

About the `(wrapper)` folder:
https://chatgpt.com/share/680440c1-c4f0-8008-88b3-b0c79cade7a2

Author: TeddyRoncin

.env.dist

@@ -15,4 +15,7 @@ NEXT_PUBLIC_API_REQUEST_TIMEOUT=10000
 NEXT_PUBLIC_CAS_SERVICE=https://etu.utt.fr/dummyurl
 
 # The application id of the website of EtuUTT
-NEXT_PUBLIC_ETUUTT_WEB_APPLICATION_ID=
+NEXT_PUBLIC_ETUUTT_WEB_APPLICATION_ID=
+
+# The number of seconds that the authorization token will be available
+NEXT_PUBLIC_AUTHORIZATION_TOKEN_EXPIRES_IN=3600*24*30

package.json

@@ -24,6 +24,7 @@
     "react": "^18.3.1",
     "react-i18next": "^14.1.2",
     "react-redux": "^9.1.0",
+    "react-toastify": "^10.0.6",
     "redux": "^5.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^3.1.0",

pnpm-lock.yaml

@@ -1,15 +1,21 @@
 import { useEffect, useState } from 'react';
 import { API, useAPI } from '@/api/api';
 import { Annal } from '@/api/annals/annal.interface';
+import { useLoggedIn } from '@/module/session';
 
 export default function useAnnals(
   code: string,
-): [Annal[] | null, (index: number, exam: Annal) => void, (exam: Annal) => void] {
-  const [annals, setAnnals] = useState<Annal[] | null>(null);
+): [Annal[] | null | undefined, (index: number, exam: Annal) => void, (exam: Annal) => void] {
+  const [annals, setAnnals] = useState<Annal[] | null | undefined>(undefined);
   const api = useAPI();
+  const logged = useLoggedIn();
 
   useEffect(() => {
-    api.get<Annal[]>(`/ue/annals?ueCode=${code}`, { timeoutMillis: 15 * 1000 }).on('success', setAnnals);
+    if (logged && !annals) {
+      api.get<Annal[]>(`/ue/annals?ueCode=${code}`, { timeoutMillis: 15 * 1000 }).on('success', setAnnals);
+    } else if (!logged) {
+      setAnnals(null);
+    }
   }, []);
 
   return [
@@ -20,9 +26,5 @@ export default function useAnnals(
 }
 
 export function openAnnalInNewTab(api: API, id: string) {
-  api
-    .get(`/ue/annals/${id}`, {
-      isFile: true,
-    })
-    .on('success', (blob) => window.open(URL.createObjectURL(blob), '_blank'));
+  api.getFile(`/ue/annals/${id}`).on('success', (blob) => window.open(URL.createObjectURL(blob), '_blank'));
 }

src/api/annals/fetchAnnals.ts

@@ -1,16 +1,26 @@
 import { useEffect, useState } from 'react';
 import { useAPI } from '@/api/api';
 import { AnnalMetadata, AnnalType } from '@/api/annals/annal.interface';
+import { useLoggedIn } from '@/module/session';
 
-export default function useAnnalMetadata(code: string): [types: AnnalType[] | null, semesters: string[] | null] {
-  const [availableTypes, setAvailableTypes] = useState<AnnalType[] | null>(null);
-  const [availableSemesters, setAvailableSemesters] = useState<string[] | null>(null);
+export default function useAnnalMetadata(
+  code: string,
+): [types: AnnalType[] | null | undefined, semesters: string[] | null | undefined] {
+  const [availableTypes, setAvailableTypes] = useState<AnnalType[] | null | undefined>(undefined);
+  const [availableSemesters, setAvailableSemesters] = useState<string[] | null | undefined>(undefined);
   const api = useAPI();
+  const logged = useLoggedIn();
+
   useEffect(() => {
-    api.get<AnnalMetadata>(`/ue/annals/metadata?ueCode=${code}`).on('success', (metadata) => {
-      setAvailableTypes(metadata.types);
-      setAvailableSemesters(metadata.semesters);
-    });
+    if (logged && (!availableTypes || !availableSemesters)) {
+      api.get<AnnalMetadata>(`/ue/annals/metadata?ueCode=${code}`).on('success', (metadata) => {
+        setAvailableTypes(metadata.types);
+        setAvailableSemesters(metadata.semesters);
+      });
+    } else if (!logged) {
+      setAvailableTypes(null);
+      setAvailableSemesters(null);
+    }
   }, []);
   return [availableTypes, availableSemesters];
 }

src/api/annals/fetchMetadata.ts

@@ -3,3 +3,8 @@ export interface Pagination<T> {
   itemsPerPage: number;
   itemCount: number;
 }
+
+export interface ApiError {
+  errorCode: number;
+  error: string;
+}