noah/noahspan-flying
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

limiting pilot data for unauthenticated users (#68)

Browse Source 
* limiting pilot data for unauthenticated users

* limiting pilot data for unauthenticated users
This commit was merged in pull request #68.
This commit is contained in:
noahspannbauer
2025-03-18 09:56:24 -05:00
committed by GitHub
parent 09f19b178f
commit adb8e51adf
15 changed files with 264 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "api", "name": "api",
"version": "1.1.0", "version": "1.2.0",
"description": "", "description": "",
"author": "", "author": "",
"private": true, "private": true,

4
api/src/pilot/interceptors/pilot.interceptor.ts
View File

@@ -16,7 +16,9 @@ export class PilotInterceptor implements NestInterceptor {
partitionKey: pilot.partitionKey, partitionKey: pilot.partitionKey,
rowKey: pilot.rowKey, rowKey: pilot.rowKey,
id: pilot.id, id: pilot.id,
name: pilot.name name: pilot.name,
certificates: pilot.certificates,
endorsements: pilot.endorsements
}; };
}); });

2
app/package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "app", "name": "app",
"private": true, "private": true,
"version": "1.1.0", "version": "1.2.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

6
app/src/App.tsx
View File

@@ -19,11 +19,7 @@ const App = () => {
<> <>
<SiteNav /> <SiteNav />
<Routes> <Routes>
<Route path="/pilots" element={ <Route path="/pilots" element={<Pilots />} />
<ProtectedRoute>
<Pilots />
</ProtectedRoute>
} />
<Route path="/" element={<Logbook />} /> <Route path="/" element={<Logbook />} />
</Routes> </Routes>
</> </>

29
app/src/components/pilotCard/PilotCard.tsx Normal file
View File

@@ -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;

8
app/src/components/pilotCard/PilotCardProps.interface.ts Normal file
View File

@@ -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;
}

336
app/src/components/pilotForm/PilotForm.tsx
View File

@@ -1,19 +1,18 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useForm, Controller, FormProvider } from 'react-hook-form'; import { useForm, Controller, FormProvider } from 'react-hook-form';
import { import {
Accordion,
Button, Button,
DatePicker,
Drawer, Drawer,
Grid, Grid,
Icon, Icon,
IconButton, IconButton,
IconName, IconName,
PeoplePicker, PeoplePicker,
Select,
StateSelect, StateSelect,
TextField, TextField,
Typography theme,
Typography,
useMediaQuery
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { IPilotFormProps } from './IPilotFormProps'; import { IPilotFormProps } from './IPilotFormProps';
import { AxiosError, AxiosInstance, AxiosResponse } from 'axios'; import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -64,6 +63,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
}); });
const [isDisabled, setIsDisabled] = useState<boolean>(false); const [isDisabled, setIsDisabled] = useState<boolean>(false);
const [isError, setIsError] = useState<boolean>(false); const [isError, setIsError] = useState<boolean>(false);
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
const onPeoplePickerSearch = async ( const onPeoplePickerSearch = async (
_event: React.SyntheticEvent, _event: React.SyntheticEvent,
@@ -193,7 +193,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
PaperProps={{ PaperProps={{
sx: { sx: {
padding: '30px', padding: '30px',
width: '33%' width: isMedium ? '33%' : '75%'
} }
}} }}
> >
@@ -208,10 +208,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
<Icon iconName={IconName.XMARK} /> <Icon iconName={IconName.XMARK} />
</IconButton> </IconButton>
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Name *</Typography> <Typography variant="h6">Name *</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<PeoplePicker <PeoplePicker
disabled={isDisabled} disabled={isDisabled}
loading={isPeoplePickerLoading} loading={isPeoplePickerLoading}
@@ -221,172 +221,178 @@ const PilotForm: React.FC<IPilotFormProps> = ({
value={selectedPerson} value={selectedPerson}
/> />
</Grid> </Grid>
<Grid size={3}> {isAuthenticated &&
<Typography variant="h6">Address *</Typography> <>
</Grid> <Grid size={isMedium ? 3 : 12}>
<Grid size={9}> <Typography variant="h6">Address *</Typography>
<Controller </Grid>
name="address" <Grid size={isMedium ? 9 : 12}>
control={methods.control} <Controller
rules={{ required: 'An address is required' }} name="address"
render={({ field: { onChange, value } }) => ( control={methods.control}
<TextField rules={{ required: 'An address is required' }}
disabled={isDisabled} render={({ field: { onChange, value } }) => (
error={methods.formState.errors.address ? true : false} <TextField
fullWidth disabled={isDisabled}
helperText={ error={methods.formState.errors.address ? true : false}
methods.formState.errors.address fullWidth
? methods.formState.errors.address.message helperText={
: undefined methods.formState.errors.address
} ? methods.formState.errors.address.message
onChange={onChange} : undefined
value={value} }
onChange={onChange}
value={value}
/>
)}
/> />
)} </Grid>
/> <Grid size={isMedium ? 3 : 12}>
</Grid> <Typography variant="h6">City *</Typography>
<Grid size={3}> </Grid>
<Typography variant="h6">City *</Typography> <Grid size={isMedium ? 9 : 12}>
</Grid> <Controller
<Grid size={9}> name="city"
<Controller control={methods.control}
name="city" rules={{ required: 'A city is required' }}
control={methods.control} render={({ field: { onChange, value } }) => (
rules={{ required: 'A city is required' }} <TextField
render={({ field: { onChange, value } }) => ( disabled={isDisabled}
<TextField error={methods.formState.errors.city ? true : false}
disabled={isDisabled} fullWidth
error={methods.formState.errors.city ? true : false} helperText={
fullWidth methods.formState.errors.city
helperText={ ? methods.formState.errors.city.message
methods.formState.errors.city : undefined
? methods.formState.errors.city.message }
: undefined onChange={onChange}
} value={value}
onChange={onChange} />
value={value} )}
/> />
)} </Grid>
/> <Grid size={isMedium ? 3 : 12}>
</Grid> <Typography variant="h6">State *</Typography>
<Grid size={3}> </Grid>
<Typography variant="h6">State *</Typography> <Grid size={isMedium ? 9 : 12}>
</Grid> <Controller
<Grid size={9}> name="state"
<Controller control={methods.control}
name="state" rules={{ required: 'A state must be selected' }}
control={methods.control} render={({ field: { onChange, value } }) => (
rules={{ required: 'A state must be selected' }} <StateSelect
render={({ field: { onChange, value } }) => ( disabled={isDisabled}
<StateSelect // error={methods.formState.errors.state ? true : false}
disabled={isDisabled} fullWidth
// error={methods.formState.errors.state ? true : false} // helperText={
fullWidth // methods.formState.errors.state
// helperText={ // ? methods.formState.errors.state.message?.toString()
// methods.formState.errors.state // : undefined
// ? methods.formState.errors.state.message?.toString() // }
// : undefined onChange={onChange}
// } value={value}
onChange={onChange} variant="outlined"
value={value} data-testid="pilot-form-state-dropdown"
variant="outlined" />
data-testid="pilot-form-state-dropdown" )}
/> />
)} </Grid>
/> <Grid size={isMedium ? 3 : 12}>
</Grid> <Typography variant="h6">Postal Code *</Typography>
<Grid size={3}> </Grid>
<Typography variant="h6">Postal Code *</Typography> <Grid size={isMedium ? 9 : 12}>
</Grid> <Controller
<Grid size={9}> name="postalCode"
<Controller control={methods.control}
name="postalCode" rules={{ required: 'A postal code is required' }}
control={methods.control} render={({ field: { onChange, value } }) => (
rules={{ required: 'A postal code is required' }} <TextField
render={({ field: { onChange, value } }) => ( disabled={isDisabled}
<TextField error={methods.formState.errors.postalCode ? true : false}
disabled={isDisabled} fullWidth
error={methods.formState.errors.postalCode ? true : false} helperText={
fullWidth methods.formState.errors.postalCode
helperText={ ? methods.formState.errors.postalCode.message
methods.formState.errors.postalCode : undefined
? methods.formState.errors.postalCode.message }
: undefined onChange={onChange}
} value={value}
onChange={onChange} />
value={value} )}
/> />
)} </Grid>
/> <Grid size={isMedium ? 3 : 12}>
</Grid> <Typography variant="h6">Email</Typography>
<Grid size={3}> </Grid>
<Typography variant="h6">Email</Typography> <Grid size={isMedium ? 9 : 12}>
</Grid> <Controller
<Grid size={9}> name="email"
<Controller control={methods.control}
name="email" rules={{
control={methods.control} pattern: {
rules={{ value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
pattern: { message: 'Invalid email address'
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, }
message: 'Invalid email address' }}
} render={({ field: { onChange, value } }) => (
}} <TextField
render={({ field: { onChange, value } }) => ( disabled={isDisabled}
<TextField fullWidth
disabled={isDisabled} error={methods.formState.errors.email ? true : false}
fullWidth helperText={
error={methods.formState.errors.email ? true : false} methods.formState.errors.email
helperText={ ? methods.formState.errors.email.message
methods.formState.errors.email : undefined
? methods.formState.errors.email.message }
: undefined onChange={onChange}
} value={value}
onChange={onChange} />
value={value} )}
/> />
)} </Grid>
/> <Grid size={isMedium ? 3 : 12}>
</Grid> <Typography variant="h6">Phone Number</Typography>
<Grid size={3}> </Grid>
<Typography variant="h6">Phone Number</Typography> <Grid size={isMedium ? 9 : 12}>
</Grid> <Controller
<Grid size={9}> name="phone"
<Controller control={methods.control}
name="phone" rules={{
control={methods.control} pattern: {
rules={{ value: /^[0-9]{3}[-\s\.][0-9]{3}[-\s\.][0-9]{4}$/i,
pattern: { message: 'Enter phone number as 123-456-7890'
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
render={({ field: { onChange, value } }) => ( disabled={isDisabled}
<TextField fullWidth
disabled={isDisabled} error={methods.formState.errors.phone ? true : false}
fullWidth helperText={
error={methods.formState.errors.phone ? true : false} methods.formState.errors.phone
helperText={ ? methods.formState.errors.phone.message
methods.formState.errors.phone : undefined
? methods.formState.errors.phone.message }
: undefined onChange={onChange}
} value={value}
onChange={onChange} />
value={value} )}
/> />
)} </Grid>
/> </>
}
{isAuthenticated &&
<Grid size={12}>
<PilotFormMedical
isDisabled={isDisabled}
/>
</Grid>
}
<Grid size={12}>
<PilotFormCertificates isDisabled={isDisabled} mode={mode} />
</Grid> </Grid>
<Grid size={12}> <Grid size={12}>
<PilotFormMedical <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
isDisabled={isDisabled}
/>
</Grid>
<Grid size={12}>
<PilotFormCertificates isDisabled={isDisabled} />
</Grid>
<Grid size={12}>
<PilotFormEndorsements isDisabled={isDisabled} />
</Grid> </Grid>
<Grid display="flex" gap={2} justifyContent="right" size={12}> <Grid display="flex" gap={2} justifyContent="right" size={12}>
<Button <Button

14
app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
View File

@@ -8,12 +8,14 @@ import {
IconName, IconName,
Select, Select,
TextField, TextField,
Typography Typography,
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { FormMode } from '../../enums/formMode';
const PilotFormCertificates = ({ const PilotFormCertificates = ({
isDisabled isDisabled,
mode
}: PilotFormCertificatesProps ) => { }: PilotFormCertificatesProps ) => {
const { const {
control, control,
@@ -30,9 +32,11 @@ const PilotFormCertificates = ({
container container
spacing={2} spacing={2}
> >
<Grid size={12}> {fields.length > 0 || mode !== FormMode.VIEW &&
<Typography variant="h5">Certificates</Typography> <Grid size={12}>
</Grid> <Typography variant="h5">Certificates</Typography>
</Grid>
}
{fields.length > 0 && ( {fields.length > 0 && (
<> <>
<Grid size={4}> <Grid size={4}>

3
app/src/components/pilotFormCertificates/PilotFormCertificatesProps.interface.ts
View File

@@ -1,3 +1,6 @@
import { FormMode } from "../../enums/formMode";
export interface PilotFormCertificatesProps { export interface PilotFormCertificatesProps {
isDisabled: boolean; isDisabled: boolean;
mode: FormMode;
} }

10
app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx
View File

@@ -10,8 +10,10 @@ import {
Typography Typography
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { Controller, useFieldArray, useFormContext } from 'react-hook-form'; import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
import { FormMode } from '../../enums/formMode';
const PilotFormEndorsements = ({ const PilotFormEndorsements = ({
mode,
isDisabled isDisabled
}: PilotFormEndorsementsProps) => { }: PilotFormEndorsementsProps) => {
const { const {
@@ -30,9 +32,11 @@ const PilotFormEndorsements = ({
container container
spacing={2} spacing={2}
> >
<Grid size={12}> {fields.length > 0 || mode !== FormMode.VIEW &&
<Typography variant="h5">Endorsements</Typography> <Grid size={12}>
</Grid> <Typography variant="h5">Endorsements</Typography>
</Grid>
}
{fields.length > 0 && ( {fields.length > 0 && (
<> <>
<Grid size={8}> <Grid size={8}>

3
app/src/components/pilotFormEndorsements/PilotFormEndorsementsProps.interface.ts
View File

@@ -1,3 +1,6 @@
import { FormMode } from "../../enums/formMode";
export interface PilotFormEndorsementsProps { export interface PilotFormEndorsementsProps {
isDisabled: boolean; isDisabled: boolean;
mode: FormMode;
} }

13
app/src/components/pilotFormMedical/PilotFormMedical.tsx
View File

@@ -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 { Controller, useFormContext } from "react-hook-form"
import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface"; import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
@@ -7,17 +7,18 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
control, control,
formState: { errors }, formState: { errors },
setValue setValue
} = useFormContext() } = useFormContext();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
return ( return (
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid size={12}> <Grid size={12}>
<Typography variant="h5">Medical</Typography> <Typography variant="h5">Medical</Typography>
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Class</Typography> <Typography variant="h6">Class</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="medicalClass" name="medicalClass"
control={control} control={control}
@@ -53,10 +54,10 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
}} }}
/> />
</Grid> </Grid>
<Grid size={3}> <Grid size={isMedium ? 3 : 12}>
<Typography variant="h6">Expiration</Typography> <Typography variant="h6">Expiration</Typography>
</Grid> </Grid>
<Grid size={9}> <Grid size={isMedium ? 9 : 12}>
<Controller <Controller
name="medicalExpiration" name="medicalExpiration"
control={control} control={control}

27
app/src/components/pilots/Pilots.tsx
View File

@@ -9,7 +9,9 @@ import {
Icon, Icon,
IconName, IconName,
Table, Table,
Typography theme,
Typography,
useMediaQuery
} from '@noahspan/noahspan-components'; } from '@noahspan/noahspan-components';
import { useHttpClient } from '../../hooks/httpClient/UseHttpClient'; import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
import { AxiosError, AxiosInstance, AxiosResponse } from 'axios'; import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -20,21 +22,19 @@ import { Pilot } from './Pilot.interface';
import { initialState, reducer } from './reducer'; import { initialState, reducer } from './reducer';
import ActionMenu from '../actionMenu/ActionMenu'; import ActionMenu from '../actionMenu/ActionMenu';
import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog'; import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
import PilotCard from '../pilotCard/PilotCard';
const Pilots: React.FC<unknown> = () => { const Pilots: React.FC<unknown> = () => {
const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(reducer, initialState);
const httpClient: AxiosInstance = useHttpClient(); const httpClient: AxiosInstance = useHttpClient();
const isAuthenticated = useIsAuthenticated(); const isAuthenticated = useIsAuthenticated();
const { getAccessToken } = useAccessToken(); const { getAccessToken } = useAccessToken();
const isMedium = useMediaQuery(theme.breakpoints.up('md'));
const getPilots = async () => { const getPilots = async () => {
try { try {
const config = isAuthenticated
? { headers: { Authorization: await getAccessToken() } }
: {};
const response: AxiosResponse = await httpClient.get( const response: AxiosResponse = await httpClient.get(
`api/pilots`, `api/pilots`
config
); );
if (response.data.length > 0) { if (response.data.length > 0) {
@@ -147,18 +147,18 @@ const Pilots: React.FC<unknown> = () => {
]; ];
useEffect(() => { useEffect(() => {
if (isAuthenticated && !state.isFormOpen) { if (!state.isFormOpen) {
getPilots(); getPilots();
} }
}, [isAuthenticated, state.isFormOpen]); }, [state.isFormOpen]);
return ( return (
<Box sx={{ margin: '20px' }}> <Box sx={{ margin: '20px' }}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid size={11}> <Grid size={isMedium ? 11 : 6}>
<Typography variant="h4">Pilots</Typography> <Typography variant="h4">Pilots</Typography>
</Grid> </Grid>
<Grid display="flex" justifyContent="right" size={1}> <Grid display="flex" justifyContent="right" size={isMedium ? 1 : 6}>
{isAuthenticated && {isAuthenticated &&
<Button <Button
onClick={() => onOpenClosePilotForm(FormMode.ADD)} onClick={() => onOpenClosePilotForm(FormMode.ADD)}
@@ -184,7 +184,12 @@ const Pilots: React.FC<unknown> = () => {
</Grid> </Grid>
)} )}
<Grid size={12}> <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>
</Grid> </Grid>
{state.isFormOpen && ( {state.isFormOpen && (

11
app/src/components/siteNav/SiteNav.tsx
View File

@@ -34,15 +34,12 @@ const SiteNav = () => {
{ {
name: 'Logbook', name: 'Logbook',
url: '/' url: '/'
} },
]; {
if (isAuthenticated) {
pages.push({
name: 'Pilots', name: 'Pilots',
url: '/pilots' url: '/pilots'
}) }
} ];
setPages(pages) setPages(pages)
}; };

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "@noahspan/flying", "name": "@noahspan/flying",
"version": "1.1.0", "version": "1.2.0",
"scripts": { "scripts": {
"start": "concurrently 'npm run start:azure -w api' 'wait-on tcp:0.0.0.0:7071 && npm run dev -w app'", "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\"", "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",