app/.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

app/src/components/flights/Flights.tsx

@@ -5,16 +5,16 @@ import { useLogs } from "../../hooks/logs/UseLogs";
 import { ILogbookEntry } from "../logbook/ILogbookEntry";
 
 const Flights = () => {
-  const [flights, setFlights] = useState<any[]>([])
+  const [flights, setFlights] = useState<ILogbookEntry[]>([])
   const { logs } = useLogs();
 
   useEffect(() => {
-    const flights = logs?.filter((log) => {
+    const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
       if (log.tracks && JSON.parse(log.tracks).length > 0) {
         return log;
       }
     })
-    console.log(flights)
+
     if (flights && flights.length > 0) {
       setFlights(flights)
     }

app/src/hooks/logs/UseLogs.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useHttpClient } from "../httpClient/UseHttpClient";
+import { useAccessToken } from "../accessToken/UseAcessToken";
+import { useIsAuthenticated } from "@azure/msal-react";
+import { AxiosInstance, AxiosResponse } from "axios";
+import { ILogbookEntry } from "../../components/logbook/ILogbookEntry";
+
+export const useLogs = () => {
+  const [logs, setLogs] = useState<ILogbookEntry[]>();
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    const getLogs = async () => {
+      try {
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/logs`,
+          config
+        );
+        const logs: ILogbookEntry[] = response.data;
+
+        logs.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+        setLogs(logs)
+      } catch (error) {
+        return error;
+      }
+    }
+
+    getLogs();
+  }, [])
+
+  return {
+    logs
+  }
+}