From adb8e51adfd2eec74b44894401ac49dfced436a3 Mon Sep 17 00:00:00 2001
From: noahspannbauer <noahspannbauer@icloud.com>
Date: Tue, 18 Mar 2025 09:56:24 -0500
Subject: [PATCH] limiting pilot data for unauthenticated users (#68)

* limiting pilot data for unauthenticated users

* limiting pilot data for unauthenticated users
---
 api/package.json                              |   2 +-
 .../pilot/interceptors/pilot.interceptor.ts   |   4 +-
 app/package.json                              |   2 +-
 app/src/App.tsx                               |   6 +-
 app/src/components/pilotCard/PilotCard.tsx    |  29 ++
 .../pilotCard/PilotCardProps.interface.ts     |   8 +
 app/src/components/pilotForm/PilotForm.tsx    | 336 +++++++++---------
 .../PilotFormCertificates.tsx                 |  14 +-
 .../PilotFormCertificatesProps.interface.ts   |   3 +
 .../PilotFormEndorsements.tsx                 |  10 +-
 .../PilotFormEndorsementsProps.interface.ts   |   3 +
 .../pilotFormMedical/PilotFormMedical.tsx     |  13 +-
 app/src/components/pilots/Pilots.tsx          |  27 +-
 app/src/components/siteNav/SiteNav.tsx        |  11 +-
 package.json                                  |   2 +-
 15 files changed, 264 insertions(+), 206 deletions(-)
 create mode 100644 app/src/components/pilotCard/PilotCard.tsx
 create mode 100644 app/src/components/pilotCard/PilotCardProps.interface.ts

diff --git a/api/package.json b/api/package.json
index 8e7c6b4..4c40a6a 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "author": "",
   "private": true,
diff --git a/api/src/pilot/interceptors/pilot.interceptor.ts b/api/src/pilot/interceptors/pilot.interceptor.ts
index 1167182..6089ccb 100644
--- a/api/src/pilot/interceptors/pilot.interceptor.ts
+++ b/api/src/pilot/interceptors/pilot.interceptor.ts
@@ -16,7 +16,9 @@ export class PilotInterceptor implements NestInterceptor {
                 partitionKey: pilot.partitionKey,
                 rowKey: pilot.rowKey,
                 id: pilot.id,
-                name: pilot.name
+                name: pilot.name,
+                certificates: pilot.certificates,
+                endorsements: pilot.endorsements
               };
             });
 
diff --git a/app/package.json b/app/package.json
index 4a56710..c1306b6 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/app/src/App.tsx b/app/src/App.tsx
index bfb41c6..d9607ea 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -19,11 +19,7 @@ const App = () => {
     <>
       <SiteNav />
       <Routes>
-        <Route path="/pilots" element={
-          <ProtectedRoute>
-            <Pilots />
-          </ProtectedRoute>
-        } />
+        <Route path="/pilots" element={<Pilots />} />
         <Route path="/" element={<Logbook />} />
       </Routes>
     </>
diff --git a/app/src/components/pilotCard/PilotCard.tsx b/app/src/components/pilotCard/PilotCard.tsx
new file mode 100644
index 0000000..afa4b84
--- /dev/null
+++ b/app/src/components/pilotCard/PilotCard.tsx
@@ -0,0 +1,29 @@
+import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components"
+import { PilotCardProps } from "./PilotCardProps.interface"
+import ActionMenu from "../actionMenu/ActionMenu"
+
+const PilotCard = ({ pilots, onDelete, onOpenCloseForm }: PilotCardProps) => {
+  return (
+    <Grid container spacing={2}>
+      {pilots.map((pilot) => {
+        return (
+          <Grid size={12}>
+            <Card key={pilot.rowKey}>
+              <CardHeader
+                action={<ActionMenu id={pilot.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
+                title={pilot.name}
+                slotProps={{
+                  title: {
+                    fontSize: '24px',
+                  }
+                }}
+              />
+            </Card>
+          </Grid>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export default PilotCard;
\ No newline at end of file
diff --git a/app/src/components/pilotCard/PilotCardProps.interface.ts b/app/src/components/pilotCard/PilotCardProps.interface.ts
new file mode 100644
index 0000000..3023b17
--- /dev/null
+++ b/app/src/components/pilotCard/PilotCardProps.interface.ts
@@ -0,0 +1,8 @@
+import { FormMode } from "../../enums/formMode";
+import { Pilot } from "../pilots/Pilot.interface";
+
+export interface PilotCardProps {
+  pilots: Pilot[];
+  onDelete: (entryId: string) => void;
+  onOpenCloseForm: (formMode: FormMode, id: string) => void;
+}
\ No newline at end of file
diff --git a/app/src/components/pilotForm/PilotForm.tsx b/app/src/components/pilotForm/PilotForm.tsx
index fb19cef..3b40466 100644
--- a/app/src/components/pilotForm/PilotForm.tsx
+++ b/app/src/components/pilotForm/PilotForm.tsx
@@ -1,19 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import {
-  Accordion,
   Button,
-  DatePicker,
   Drawer,
   Grid,
   Icon,
   IconButton,
   IconName,
   PeoplePicker,
-  Select,
   StateSelect,
   TextField,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { IPilotFormProps } from './IPilotFormProps';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -64,6 +63,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   });
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const onPeoplePickerSearch = async (
     _event: React.SyntheticEvent,
@@ -193,7 +193,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
       PaperProps={{
         sx: {
           padding: '30px',
-          width: '33%'
+          width: isMedium ? '33%' : '75%'
         }
       }}
     >
@@ -208,10 +208,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 <Icon iconName={IconName.XMARK} />
               </IconButton>
             </Grid>
-            <Grid size={3}>
+            <Grid size={isMedium ? 3 : 12}>
               <Typography variant="h6">Name *</Typography>
             </Grid>
-            <Grid size={9}>
+            <Grid size={isMedium ? 9 : 12}>
               <PeoplePicker
                 disabled={isDisabled}
                 loading={isPeoplePickerLoading}
@@ -221,172 +221,178 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 value={selectedPerson}
               />
             </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Address *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="address"
-                control={methods.control}
-                rules={{ required: 'An address is required' }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    error={methods.formState.errors.address ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.address
-                        ? methods.formState.errors.address.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+            {isAuthenticated &&
+              <>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Address *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="address"
+                    control={methods.control}
+                    rules={{ required: 'An address is required' }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        error={methods.formState.errors.address ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.address
+                            ? methods.formState.errors.address.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">City *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="city"
-                control={methods.control}
-                rules={{ required: 'A city is required' }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    error={methods.formState.errors.city ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.city
-                        ? methods.formState.errors.city.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">City *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="city"
+                    control={methods.control}
+                    rules={{ required: 'A city is required' }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        error={methods.formState.errors.city ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.city
+                            ? methods.formState.errors.city.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">State *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="state"
-                control={methods.control}
-                rules={{ required: 'A state must be selected' }}
-                render={({ field: { onChange, value } }) => (
-                  <StateSelect
-                    disabled={isDisabled}
-                    // error={methods.formState.errors.state ? true : false}
-                    fullWidth
-                    // helperText={
-                    //   methods.formState.errors.state
-                    //     ? methods.formState.errors.state.message?.toString()
-                    //     : undefined
-                    // }
-                    onChange={onChange}
-                    value={value}
-                    variant="outlined"
-                    data-testid="pilot-form-state-dropdown"
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">State *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="state"
+                    control={methods.control}
+                    rules={{ required: 'A state must be selected' }}
+                    render={({ field: { onChange, value } }) => (
+                      <StateSelect
+                        disabled={isDisabled}
+                        // error={methods.formState.errors.state ? true : false}
+                        fullWidth
+                        // helperText={
+                        //   methods.formState.errors.state
+                        //     ? methods.formState.errors.state.message?.toString()
+                        //     : undefined
+                        // }
+                        onChange={onChange}
+                        value={value}
+                        variant="outlined"
+                        data-testid="pilot-form-state-dropdown"
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Postal Code *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="postalCode"
-                control={methods.control}
-                rules={{ required: 'A postal code is required' }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    error={methods.formState.errors.postalCode ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.postalCode
-                        ? methods.formState.errors.postalCode.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Postal Code *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="postalCode"
+                    control={methods.control}
+                    rules={{ required: 'A postal code is required' }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        error={methods.formState.errors.postalCode ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.postalCode
+                            ? methods.formState.errors.postalCode.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Email</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="email"
-                control={methods.control}
-                rules={{
-                  pattern: {
-                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                    message: 'Invalid email address'
-                  }
-                }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    fullWidth
-                    error={methods.formState.errors.email ? true : false}
-                    helperText={
-                      methods.formState.errors.email
-                        ? methods.formState.errors.email.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Email</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="email"
+                    control={methods.control}
+                    rules={{
+                      pattern: {
+                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                        message: 'Invalid email address'
+                      }
+                    }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        fullWidth
+                        error={methods.formState.errors.email ? true : false}
+                        helperText={
+                          methods.formState.errors.email
+                            ? methods.formState.errors.email.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Phone Number</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="phone"
-                control={methods.control}
-                rules={{
-                  pattern: {
-                    value: /^[0-9]{3}[-\s\.][0-9]{3}[-\s\.][0-9]{4}$/i,
-                    message: 'Enter phone number as 123-456-7890'
-                  }
-                }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    fullWidth
-                    error={methods.formState.errors.phone ? true : false}
-                    helperText={
-                      methods.formState.errors.phone
-                        ? methods.formState.errors.phone.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Phone Number</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="phone"
+                    control={methods.control}
+                    rules={{
+                      pattern: {
+                        value: /^[0-9]{3}[-\s\.][0-9]{3}[-\s\.][0-9]{4}$/i,
+                        message: 'Enter phone number as 123-456-7890'
+                      }
+                    }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        fullWidth
+                        error={methods.formState.errors.phone ? true : false}
+                        helperText={
+                          methods.formState.errors.phone
+                            ? methods.formState.errors.phone.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
+                </Grid>
+              </>
+            }
+            {isAuthenticated &&
+              <Grid size={12}>
+                <PilotFormMedical
+                  isDisabled={isDisabled}
+                />
+              </Grid>
+            }
+            <Grid size={12}>
+              <PilotFormCertificates isDisabled={isDisabled} mode={mode} />
             </Grid>
             <Grid size={12}>
-              <PilotFormMedical
-                isDisabled={isDisabled}
-              />
-            </Grid>
-            <Grid size={12}>
-              <PilotFormCertificates isDisabled={isDisabled} />
-            </Grid>
-            <Grid size={12}>
-              <PilotFormEndorsements isDisabled={isDisabled} />
+              <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
             </Grid>
             <Grid display="flex" gap={2} justifyContent="right" size={12}>
               <Button
diff --git a/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx b/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
index af0b30c..1042633 100644
--- a/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
+++ b/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
@@ -8,12 +8,14 @@ import {
   IconName,
   Select,
   TextField,
-  Typography
+  Typography,
 } from '@noahspan/noahspan-components';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { FormMode } from '../../enums/formMode';
 
 const PilotFormCertificates = ({
-  isDisabled
+  isDisabled,
+  mode
 }: PilotFormCertificatesProps ) => {
   const {
     control,
@@ -30,9 +32,11 @@ const PilotFormCertificates = ({
       container
       spacing={2}
     >
-      <Grid size={12}>
-        <Typography variant="h5">Certificates</Typography>
-      </Grid>
+      {fields.length > 0 || mode !== FormMode.VIEW &&
+        <Grid size={12}>
+          <Typography variant="h5">Certificates</Typography>
+        </Grid>
+      }
       {fields.length > 0 && (
         <>
           <Grid size={4}>
diff --git a/app/src/components/pilotFormCertificates/PilotFormCertificatesProps.interface.ts b/app/src/components/pilotFormCertificates/PilotFormCertificatesProps.interface.ts
index 99f91a5..617df66 100644
--- a/app/src/components/pilotFormCertificates/PilotFormCertificatesProps.interface.ts
+++ b/app/src/components/pilotFormCertificates/PilotFormCertificatesProps.interface.ts
@@ -1,3 +1,6 @@
+import { FormMode } from "../../enums/formMode";
+
 export interface PilotFormCertificatesProps {
   isDisabled: boolean;
+  mode: FormMode;
 }
diff --git a/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx b/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
index 30f6c41..2410c64 100644
--- a/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
+++ b/app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
@@ -10,8 +10,10 @@ import {
   Typography
 } from '@noahspan/noahspan-components';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { FormMode } from '../../enums/formMode';
 
 const PilotFormEndorsements = ({
+  mode,
   isDisabled
 }: PilotFormEndorsementsProps) => {
   const {
@@ -30,9 +32,11 @@ const PilotFormEndorsements = ({
       container
       spacing={2}
     >
-      <Grid size={12}>
-        <Typography variant="h5">Endorsements</Typography>
-      </Grid>
+      {fields.length > 0 || mode !== FormMode.VIEW &&
+        <Grid size={12}>
+          <Typography variant="h5">Endorsements</Typography>
+        </Grid>
+      }
       {fields.length > 0 && (
         <>
           <Grid size={8}>
diff --git a/app/src/components/pilotFormEndorsements/PilotFormEndorsementsProps.interface.ts b/app/src/components/pilotFormEndorsements/PilotFormEndorsementsProps.interface.ts
index 26fbdf9..6b7cdb9 100644
--- a/app/src/components/pilotFormEndorsements/PilotFormEndorsementsProps.interface.ts
+++ b/app/src/components/pilotFormEndorsements/PilotFormEndorsementsProps.interface.ts
@@ -1,3 +1,6 @@
+import { FormMode } from "../../enums/formMode";
+
 export interface PilotFormEndorsementsProps {
   isDisabled: boolean;
+  mode: FormMode;
 }
diff --git a/app/src/components/pilotFormMedical/PilotFormMedical.tsx b/app/src/components/pilotFormMedical/PilotFormMedical.tsx
index 11e60c1..829c438 100644
--- a/app/src/components/pilotFormMedical/PilotFormMedical.tsx
+++ b/app/src/components/pilotFormMedical/PilotFormMedical.tsx
@@ -1,4 +1,4 @@
-import { DatePicker, Grid, Select, Typography } from '@noahspan/noahspan-components';
+import { DatePicker, Grid, Select, theme, Typography, useMediaQuery } from '@noahspan/noahspan-components';
 import { Controller, useFormContext } from "react-hook-form"
 import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
 
@@ -7,17 +7,18 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
     control,
     formState: { errors },
     setValue
-  } = useFormContext()
+  } = useFormContext();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   return (
     <Grid container spacing={2}>
       <Grid size={12}>
         <Typography variant="h5">Medical</Typography>
       </Grid>
-      <Grid size={3}>
+      <Grid size={isMedium ? 3 : 12}>
         <Typography variant="h6">Class</Typography>
       </Grid>
-      <Grid size={9}>
+      <Grid size={isMedium ? 9 : 12}>
         <Controller
           name="medicalClass"
           control={control}
@@ -53,10 +54,10 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
           }}
         />
       </Grid>
-      <Grid size={3}>
+      <Grid size={isMedium ? 3 : 12}>
         <Typography variant="h6">Expiration</Typography>
       </Grid>
-      <Grid size={9}>
+      <Grid size={isMedium ? 9 : 12}>
         <Controller
           name="medicalExpiration"
           control={control}
diff --git a/app/src/components/pilots/Pilots.tsx b/app/src/components/pilots/Pilots.tsx
index ee1f425..d56b277 100644
--- a/app/src/components/pilots/Pilots.tsx
+++ b/app/src/components/pilots/Pilots.tsx
@@ -9,7 +9,9 @@ import {
   Icon,
   IconName,
   Table,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -20,21 +22,19 @@ import { Pilot } from './Pilot.interface';
 import { initialState, reducer } from './reducer';
 import ActionMenu from '../actionMenu/ActionMenu';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
+import PilotCard from '../pilotCard/PilotCard';
 
 const Pilots: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const httpClient: AxiosInstance = useHttpClient();
   const isAuthenticated = useIsAuthenticated();
   const { getAccessToken } = useAccessToken();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const getPilots = async () => {
     try {
-      const config = isAuthenticated
-        ? { headers: { Authorization: await getAccessToken() } }
-        : {};
       const response: AxiosResponse = await httpClient.get(
-        `api/pilots`,
-        config
+        `api/pilots`
       );
  
       if (response.data.length > 0) {
@@ -147,18 +147,18 @@ const Pilots: React.FC<unknown> = () => {
   ];
 
   useEffect(() => {
-    if (isAuthenticated && !state.isFormOpen) {
+    if (!state.isFormOpen) {
       getPilots();
     }
-  }, [isAuthenticated, state.isFormOpen]);
+  }, [state.isFormOpen]);
 
   return (
     <Box sx={{ margin: '20px' }}>
       <Grid container spacing={2}>
-        <Grid size={11}>
+        <Grid size={isMedium ? 11 : 6}>
           <Typography variant="h4">Pilots</Typography>
         </Grid>
-        <Grid display="flex" justifyContent="right" size={1}>
+        <Grid display="flex" justifyContent="right" size={isMedium ? 1 : 6}>
           {isAuthenticated &&
             <Button
               onClick={() => onOpenClosePilotForm(FormMode.ADD)}
@@ -184,7 +184,12 @@ const Pilots: React.FC<unknown> = () => {
           </Grid>
         )}
         <Grid size={12}>
-          {state.pilots.length > 0 && <Table columns={columns} data={state.pilots} />}
+          {isMedium && state.pilots.length > 0 &&
+            <Table columns={columns} data={state.pilots} />
+          }
+          {!isMedium && state.pilots.length > 0 && 
+            <PilotCard pilots={state.pilots} onDelete={onDeleteEntry} onOpenCloseForm={onOpenClosePilotForm} />
+          }
         </Grid>
       </Grid>
       {state.isFormOpen && (
diff --git a/app/src/components/siteNav/SiteNav.tsx b/app/src/components/siteNav/SiteNav.tsx
index 1e3845e..629953c 100644
--- a/app/src/components/siteNav/SiteNav.tsx
+++ b/app/src/components/siteNav/SiteNav.tsx
@@ -34,15 +34,12 @@ const SiteNav = () => {
       {
         name: 'Logbook',
         url: '/'
-      }
-    ];
-
-    if (isAuthenticated) {
-      pages.push({
+      },
+      {
         name: 'Pilots',
         url: '/pilots'
-      })
-    }
+      }
+    ];
 
     setPages(pages)
   };
diff --git a/package.json b/package.json
index ed0bc53..0e3ad57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "scripts": {
     "start": "concurrently 'npm run start:azure -w api' 'wait-on tcp:0.0.0.0:7071 && npm run dev -w app'",
     "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",