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

Merged
noahspannbauer merged 2 commits from feature/62-limit-pilot-data-for-non-auth-users into main 2025-03-18 10:56:25 -04:00
Conversation 0 Commits 2 Files Changed 15 +264 -206
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",
"version": "1.1.0",
"version": "1.2.0",
"description": "",
"author": "",
"private": true,

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

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

2
app/package.json
View File

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

6
app/src/App.tsx
View File

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

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 { 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

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

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

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

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

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

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

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

@@ -1,3 +1,6 @@
import { FormMode } from "../../enums/formMode";
export interface PilotFormEndorsementsProps {
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 { 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}

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

@@ -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 && (

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

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

2
package.json
View File

@@ -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\"",