app/.gitignore

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

app/src/App.tsx

@@ -1,6 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import Pilots from './components/pilots/Pilots';
+import Flights from './components/flights/Flights';
 import Logbook from './components/logbook/Logbook';
+import Pilots from './components/pilots/Pilots';
 import SiteNav from './components/siteNav/SiteNav';
 import { useIsAuthenticated } from '@azure/msal-react';
 
@@ -19,8 +20,10 @@ const App = () => {
     <>
       <SiteNav />
       <Routes>
+        <Route path='/' element={<Flights />} />
+        <Route path="/logbook" element={<Logbook />} />
         <Route path="/pilots" element={<Pilots />} />
-        <Route path="/" element={<Logbook />} />
+        
       </Routes>
     </>
   );

app/src/components/flights/Flights.tsx

@@ -0,0 +1,32 @@
+import { Box, Container } from "@noahspan/noahspan-components";
+import LogbookCard from "../logbookCard/LogbookCard";
+import { useEffect, useState } from "react";
+import { useLogs } from "../../hooks/logs/UseLogs";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+
+const Flights = () => {
+  const [flights, setFlights] = useState<ILogbookEntry[]>([])
+  const { logs } = useLogs();
+
+  useEffect(() => {
+    const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
+      if (log.tracks && JSON.parse(log.tracks).length > 0) {
+        return log;
+      }
+    })
+
+    if (flights && flights.length > 0) {
+      setFlights(flights)
+    }
+  }, [logs])
+  
+  return (
+    <Container>
+      <Box sx={{ margin: '20px' }}>
+        <LogbookCard logs={flights} mode='flights' />
+      </Box>
+    </Container>
+  )
+}
+
+export default Flights;

app/src/components/logTrackMaps/LogTrackMaps.tsx

@@ -35,10 +35,7 @@ const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
           config
         );
         const kml = new DOMParser().parseFromString(response.data, 'text/xml')
-        // const converted = toGeoJSON.kml(dom);
+         
-        
-        // rewind(converted, false);
-        
         convertedTracks.push(kml);
       }
 

app/src/components/logbook/Logbook.tsx

@@ -261,7 +261,7 @@ const Logbook: React.FC<unknown> = () => {
               <Table columns={state.columns} data={state.entries} />
             )}
             {!isMedium && state.entries.length > 0 &&
-              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
+              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} mode='logbook' onOpenCloseForm={onOpenCloseEntryForm} />
             }
           </Grid>
         )}

app/src/components/logbookCard/LogbookCard.tsx

@@ -1,18 +1,19 @@
 import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components";
 import { LogbookCardProps } from "./LogbookCardProps.interface";
-import { useEffect } from "react";
 import ActionMenu from "../actionMenu/ActionMenu";
+import LogTrackMaps from "../logTrackMaps/LogTrackMaps";
 
 
-const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
   return (
     <Grid container spacing={2}>
       {logs.map((log) => {
+        console.log(log)
         return (
           <Grid size={12}>
             <Card key={log.rowKey}>
               <CardHeader
-                action={<ActionMenu id={log.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
+                action={mode === 'logbook' ? <ActionMenu id={log.rowKey} onDelete={onDelete!} onOpenCloseForm={onOpenCloseForm!} /> : null}
                 subheader={log.pilotName}
                 title={log.date}
                 slotProps={{
@@ -26,6 +27,14 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {
               />
               <CardContent>
                 <Grid container spacing={1}>
+                  {mode === 'flights' && log.tracks && JSON.parse(log.tracks).length > 0 &&
+                    <Grid size={12}>
+                      <LogTrackMaps 
+                        rowKey={log.rowKey}
+                        trackUrls={JSON.parse(log.tracks)}
+                      />
+                    </Grid>
+                  }
                   <Grid size={12}>
                     <Typography variant="subtitle2">Aircraft Make and Model</Typography>
                   </Grid>
@@ -50,6 +59,24 @@ const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {
                   <Grid size={12}>
                     <Typography variant="body1">{log.durationOfFlight}</Typography>
                   </Grid>
+                  {mode === 'logbook' && log.tracks && JSON.parse(log.tracks).length > 0 && 
+                    <>
+                      <Grid size={12}>
+                        <Typography variant="subtitle2">Tracks</Typography>
+                      </Grid>
+                      {JSON.parse(log.tracks).map((track: string) => {
+                        const trackSplit = track.split('/')
+                        const filename = trackSplit[trackSplit.length - 1];
+
+                        return (
+                          <Grid size={12}>
+                            <Typography variant="body1">{filename}</Typography>
+                          </Grid>
+                        )
+                        
+                      })}
+                    </>
+                  }
                   {log.notes &&
                     <>
                       <Grid size={12}>

app/src/components/logbookCard/LogbookCardProps.interface.ts

@@ -3,6 +3,7 @@ import { ILogbookEntry } from "../logbook/ILogbookEntry";
 
 export interface LogbookCardProps {
   logs: ILogbookEntry[];
-  onDelete: (entryId: string) => void;
+  mode: 'flights' | 'logbook';
-  onOpenCloseForm: (formMode: FormMode, id: string) => void;
+  onDelete?: (entryId: string) => void;
+  onOpenCloseForm?: (formMode: FormMode, id: string) => void;
 }

app/src/components/siteNav/SiteNav.tsx

@@ -32,9 +32,13 @@ const SiteNav = () => {
   const getPages = () => {
     const pages = [
       {
-        name: 'Logbook',
+        name: 'Flights',
         url: '/'
       },
+      {
+        name: 'Logbook',
+        url: '/logbook'
+      },
       {
         name: 'Pilots',
         url: '/pilots'
@@ -79,7 +83,6 @@ const SiteNav = () => {
 
       return imageUrl;
     } catch (error) {
-      console.log(error);
       throw new Error();
     }
   };

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
+  }
+}

app/src/index.css

@@ -1,3 +1,4 @@
 body {
   background-color: #f2f2f2;
+  margin: 8px;
 }