From 9ab61de0b75f24e0be1bc74dc42535fe1724c158 Mon Sep 17 00:00:00 2001 From: Omar Zubaidi <66521244+OmarZubaidi@users.noreply.github.com> Date: Thu, 12 Oct 2023 12:16:15 +0100 Subject: [PATCH 1/6] Organize api folder --- packages/app/src/api/BaseClient.ts | 6 +++--- packages/app/src/api/zapehrApi.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/app/src/api/BaseClient.ts b/packages/app/src/api/BaseClient.ts index dda645fc..dd28101e 100644 --- a/packages/app/src/api/BaseClient.ts +++ b/packages/app/src/api/BaseClient.ts @@ -1,20 +1,20 @@ export interface ClientConfig { + readonly accessToken?: string; readonly apiUrl?: string; readonly projectId?: string; - readonly accessToken?: string; } export abstract class BaseClient { + readonly accessToken?: string; readonly apiUrl: string; readonly projectId?: string; - readonly accessToken?: string; constructor(config: ClientConfig) { if (!config.apiUrl) { throw new Error('apiUrl is required'); } + this.accessToken = config.accessToken; this.apiUrl = config.apiUrl; this.projectId = config.projectId; - this.accessToken = config.accessToken; } } diff --git a/packages/app/src/api/zapehrApi.ts b/packages/app/src/api/zapehrApi.ts index 35ecb3b4..f32a7cc4 100644 --- a/packages/app/src/api/zapehrApi.ts +++ b/packages/app/src/api/zapehrApi.ts @@ -1,5 +1,5 @@ -import { apiErrorToThrow } from './apiErrorToThrow'; import { ZambdaClient } from '@zapehr/sdk'; +import { apiErrorToThrow } from './apiErrorToThrow'; export interface ZapehrSearchParameter { key: string; @@ -7,8 +7,8 @@ export interface ZapehrSearchParameter { } const CHECK_IN_ZAMBDA_ID = import.meta.env.VITE_CHECK_IN_ZAMBDA_ID; -const GET_PATIENTS_ZAMBDA_ID = import.meta.env.VITE_GET_PATIENTS_ZAMBDA_ID; const GET_APPOINTMENTS_ZAMBDA_ID = import.meta.env.VITE_GET_APPOINTMENTS_ZAMBDA_ID; +const GET_PATIENTS_ZAMBDA_ID = import.meta.env.VITE_GET_PATIENTS_ZAMBDA_ID; class API { async checkIn(zambdaClient: ZambdaClient, appointmentId: string): Promise { From efc541e99c5ca4b2d3c02ae15bc06db8bfddb3ca Mon Sep 17 00:00:00 2001 From: Omar Zubaidi <66521244+OmarZubaidi@users.noreply.github.com> Date: Thu, 12 Oct 2023 12:59:18 +0100 Subject: [PATCH 2/6] Organize components folder --- .../src/components/BoldPrimaryInputLabel.tsx | 4 +- packages/app/src/components/CardComponent.tsx | 24 +-- .../src/components/CardWithDescription.tsx | 22 +-- packages/app/src/components/CardWithLink.tsx | 30 ++-- .../app/src/components/CheckIconWithText.tsx | 2 +- .../app/src/components/ControlButtons.tsx | 24 ++- .../app/src/components/ControlledCheckBox.tsx | 31 ++-- .../app/src/components/CustomContainer.tsx | 66 ++++---- packages/app/src/components/DateInput.tsx | 40 ++--- packages/app/src/components/ErrorDialog.tsx | 19 +-- packages/app/src/components/FileUpload.tsx | 44 +++--- packages/app/src/components/Footer.tsx | 12 +- packages/app/src/components/FormInput.tsx | 34 ++--- .../src/components/FreeMultiSelectInput.tsx | 58 +++---- .../app/src/components/InputHelperText.tsx | 10 +- packages/app/src/components/InputMask.tsx | 12 +- .../app/src/components/LoadingComponent.tsx | 4 +- packages/app/src/components/PageForm.tsx | 142 +++++++++--------- packages/app/src/components/PatientQueue.tsx | 18 +-- .../src/components/ProviderHeaderSection.tsx | 12 +- packages/app/src/components/RadioInput.tsx | 90 +++++------ .../app/src/components/RadioListInput.tsx | 32 ++-- packages/app/src/components/RequiredNote.tsx | 2 +- packages/app/src/components/ScrollToTop.tsx | 4 +- packages/app/src/components/SelectInput.tsx | 66 ++++---- packages/app/src/components/SelectSlot.tsx | 10 +- packages/app/src/components/TopAppBar.tsx | 28 ++-- .../app/src/components/UploadComponent.tsx | 34 ++--- 28 files changed, 436 insertions(+), 438 deletions(-) diff --git a/packages/app/src/components/BoldPrimaryInputLabel.tsx b/packages/app/src/components/BoldPrimaryInputLabel.tsx index a2dd5abe..19110e05 100644 --- a/packages/app/src/components/BoldPrimaryInputLabel.tsx +++ b/packages/app/src/components/BoldPrimaryInputLabel.tsx @@ -1,8 +1,8 @@ import { InputLabel, styled } from '@mui/material'; export const BoldPrimaryInputLabel = styled(InputLabel)(({ theme }) => ({ - fontWeight: 700, + color: theme.palette.secondary.main, fontSize: 16, + fontWeight: 700, transform: 'translate(0, -9px) scale(1)', - color: theme.palette.secondary.main, })); diff --git a/packages/app/src/components/CardComponent.tsx b/packages/app/src/components/CardComponent.tsx index cfa42127..c506a8b7 100644 --- a/packages/app/src/components/CardComponent.tsx +++ b/packages/app/src/components/CardComponent.tsx @@ -5,20 +5,20 @@ import { otherColors } from '../OttEHRThemeProvider'; interface CardComponentProps { name: string; - previewUrl: string; objectName: string; - setPreviewUrl: (previewUrl: string | null) => void; - setFileUrl: (fileUrl: string | undefined) => void; onClear: () => void; + previewUrl: string; + setFileUrl: (fileUrl: string | undefined) => void; + setPreviewUrl: (previewUrl: string | null) => void; } export const CardComponent: FC = ({ name, - previewUrl, objectName, - setPreviewUrl, - setFileUrl, onClear, + previewUrl, + setFileUrl, + setPreviewUrl, }): JSX.Element => { const theme = useTheme(); const { setValue } = useFormContext(); @@ -27,26 +27,26 @@ export const CardComponent: FC = ({ - {objectName} + {objectName} )} {submitLabel ?? 'Continue'} diff --git a/packages/app/src/components/ControlledCheckBox.tsx b/packages/app/src/components/ControlledCheckBox.tsx index 4f3220c0..a3120786 100644 --- a/packages/app/src/components/ControlledCheckBox.tsx +++ b/packages/app/src/components/ControlledCheckBox.tsx @@ -4,47 +4,47 @@ import { FC, ReactElement } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; interface ControlledCheckBoxProps { - name: string; - label: string | undefined; defaultValue?: boolean; - required?: boolean; document: ReactElement | undefined; + label: string | undefined; + name: string; + required?: boolean; } -export const ControlledCheckBox: FC = ({ name, label, defaultValue, required, document }) => { +export const ControlledCheckBox: FC = ({ defaultValue, document, label, name, required }) => { const { control } = useFormContext(); + return ( { return ( ); }} @@ -56,6 +56,7 @@ export const ControlledCheckBox: FC = ({ name, label, d {document} } + sx={{ alignItems: 'flex-start', pt: 1 }} /> ); }; diff --git a/packages/app/src/components/CustomContainer.tsx b/packages/app/src/components/CustomContainer.tsx index dd0e8e38..08b6b896 100644 --- a/packages/app/src/components/CustomContainer.tsx +++ b/packages/app/src/components/CustomContainer.tsx @@ -5,72 +5,72 @@ import { bg1 } from '../assets'; import { Footer } from './Footer'; interface ContainerProps { - title: string; - subtitle?: string; - isFirstPage?: boolean; + children: any; + description?: string | string[] | ReactElement; img?: string; imgAlt?: string; imgWidth?: number; - description?: string | string[] | ReactElement; + isFirstPage?: boolean; outsideCardComponent?: (type: string) => Element; - children: any; + subtitle?: string; + title: string; } export const CustomContainer: FC = ({ - title, - subtitle, - isFirstPage, + children, + description, img, imgAlt, imgWidth, - description, + isFirstPage, outsideCardComponent, - children, + subtitle, + title, }) => { const theme = useTheme(); const { isAuthenticated, logout } = useAuth0(); const backgroundImage = bg1; - const gridWidths = { title: img ? 8 : 12, image: 4 }; + const gridWidths = { image: 4, title: img ? 8 : 12 }; return ( - + + /> {isAuthenticated && ( diff --git a/packages/app/src/components/ProviderHeaderSection.tsx b/packages/app/src/components/ProviderHeaderSection.tsx index 843e7b98..407e278e 100644 --- a/packages/app/src/components/ProviderHeaderSection.tsx +++ b/packages/app/src/components/ProviderHeaderSection.tsx @@ -17,10 +17,10 @@ export const ProviderHeaderSection: FC = ({ provider > = ({ provider = ({ provider }, }} > - + - + {title} - + {providerName} diff --git a/packages/app/src/components/RadioInput.tsx b/packages/app/src/components/RadioInput.tsx index 5aa35f23..075f035f 100644 --- a/packages/app/src/components/RadioInput.tsx +++ b/packages/app/src/components/RadioInput.tsx @@ -19,40 +19,40 @@ import { BoldPrimaryInputLabel } from './BoldPrimaryInputLabel'; import { InputHelperText } from './InputHelperText'; type RadioInputProps = { - name: string; - label: string; - options: RadioOption[]; - required?: boolean; - helperText?: string; + backgroundSelected?: string; borderColor?: string; borderSelected?: string; - backgroundSelected?: string; - getSelected: () => FieldValues; centerImages?: boolean; + getSelected: () => FieldValues; + helperText?: string; + label: string; + name: string; onChange: (event: SyntheticEvent) => void; + options: RadioOption[]; radioStyling?: RadioStyling; + required?: boolean; } & RadioGroupProps; export type RadioStyling = { - radio?: SxProps; - label?: SxProps; height?: string; + label?: SxProps; + radio?: SxProps; }; export const RadioInput: FC = ({ - name, - label, - defaultValue, - required, - options, - helperText, + backgroundSelected, borderColor = 'primary.contrast', borderSelected, - backgroundSelected, - getSelected, centerImages, + defaultValue, + getSelected, + helperText, + label, + name, onChange, + options, radioStyling, + required, }) => { const { control, @@ -67,33 +67,33 @@ export const RadioInput: FC = ({ return ( { return ( - + {/* Had to add a margin here and on FormControl because none of the variants worked properly */} {/* Same for padding. I want to emphasize how much I hate this. */} {label} {options.map((option) => { const gridWidths = { - desktop: { labelText: 8.5, space: 0.2, image: 2 }, - mobile: { labelText: 12, space: 0, image: 12 }, + desktop: { image: 2, labelText: 8.5, space: 0.2 }, + mobile: { image: 12, labelText: 12, space: 0 }, }; if (!option.label || !option.description) { @@ -106,27 +106,26 @@ export const RadioInput: FC = ({ return ( - {t('general.button.unchecked')} + {t('general.button.unchecked')} } checkedIcon={ - {t('general.button.checked')} + {t('general.button.checked')} } sx={{ + ...radioStyling?.radio, alignSelf: 'start', mt: '8px', // If screen is smaller than medium breakpoint [theme.breakpoints.down('md')]: { mt: 0, }, - ...radioStyling?.radio, }} /> } @@ -135,13 +134,13 @@ export const RadioInput: FC = ({ @@ -155,7 +154,7 @@ export const RadioInput: FC = ({ > <> {option.label && ( - + {option.label} )} @@ -167,7 +166,7 @@ export const RadioInput: FC = ({ marginTop: option.label ? '5px' : 0, }} > - + {option.description} @@ -188,17 +187,15 @@ export const RadioInput: FC = ({ }, }} > - {option.imageAlt} + {option.imageAlt} )} } onChange={onChange} + value={option.value} sx={{ - border: '1px solid', - borderRadius: 2, - borderColor: selected[name] === option.value ? borderSelected : borderColor, backgroundColor: () => { if (selected[name] === option.value) { if (backgroundSelected) { @@ -210,18 +207,21 @@ export const RadioInput: FC = ({ return option.color || theme.palette.background.paper; } }, - paddingTop: 0, - paddingBottom: 0, - paddingRight: 2, - marginX: 0, - minHeight: 46, + border: '1px solid', + borderColor: selected[name] === option.value ? borderSelected : borderColor, + borderRadius: 2, height: radioStyling?.height, + minHeight: 46, + mx: 0, + pb: 0, + pr: 2, + pt: 0, }} /> ); })} - + ); }} diff --git a/packages/app/src/components/RadioListInput.tsx b/packages/app/src/components/RadioListInput.tsx index 4d85c077..e64389dc 100644 --- a/packages/app/src/components/RadioListInput.tsx +++ b/packages/app/src/components/RadioListInput.tsx @@ -6,26 +6,26 @@ import { BoldPrimaryInputLabel } from './BoldPrimaryInputLabel'; import { InputHelperText } from './InputHelperText'; type RadioListInputProps = { - name: string; - label: string; - options: RadioOption[]; - required?: boolean; - helperText?: string; borderColor?: string; centerImages?: boolean; + helperText?: string; + label: string; + name: string; onChange: (event: SyntheticEvent) => void; + options: RadioOption[]; radioStyling?: SxProps; + required?: boolean; } & RadioGroupProps; export const RadioListInput: FC = ({ - name, - label, - value, defaultValue, - required, - options, helperText, + label, + name, onChange, + options, + required, + value, }) => { const { control, @@ -36,12 +36,12 @@ export const RadioListInput: FC = ({ return ( { return ( - + {/* Had to add a margin here and on FormControl because none of the variants worked properly */} {/* Same for padding. I want to emphasize how much I hate this. */} @@ -51,19 +51,19 @@ export const RadioListInput: FC = ({ {options.map((option) => { return ( } - key={option.value} label={option.label} + key={option.value} onChange={onChange} + value={option.value} sx={{ - marginRight: 5, + mr: 5, }} /> ); })} - {!value && } + {!value && } ); }} diff --git a/packages/app/src/components/RequiredNote.tsx b/packages/app/src/components/RequiredNote.tsx index e9f5c66d..64e4d9bc 100644 --- a/packages/app/src/components/RequiredNote.tsx +++ b/packages/app/src/components/RequiredNote.tsx @@ -7,8 +7,8 @@ export const RequiredNote: FC = () => { return ( { document.documentElement.scrollTo({ - top: 0, - left: 0, behavior: 'smooth', + left: 0, + top: 0, }); }, [pathname]); diff --git a/packages/app/src/components/SelectInput.tsx b/packages/app/src/components/SelectInput.tsx index 80d4d8ef..370d2ce0 100644 --- a/packages/app/src/components/SelectInput.tsx +++ b/packages/app/src/components/SelectInput.tsx @@ -9,24 +9,24 @@ import { InputHelperText } from './InputHelperText'; import { RenderLabelFromSelect } from './RenderLabelFromSelect'; export interface SelectInputOption { - value: string; label: string; + value: string; } type SelectInputProps = { - name: string; + helperText?: string; label: string; + name: string; options: SelectInputOption[]; - helperText?: string; placeholder?: string; } & SelectProps; export const SelectInput: FC = ({ - name, - label, defaultValue, - options, helperText, + label, + name, + options, placeholder, ...otherProps }) => { @@ -38,14 +38,14 @@ export const SelectInput: FC = ({ return ( ( = ({ {label} - + )} /> diff --git a/packages/app/src/components/SelectSlot.tsx b/packages/app/src/components/SelectSlot.tsx index 93e8b8b9..1042a367 100644 --- a/packages/app/src/components/SelectSlot.tsx +++ b/packages/app/src/components/SelectSlot.tsx @@ -9,9 +9,9 @@ const AppointmentSlotButton = styled(Button)({ }); interface SelectSlotProps { + reschedule?: boolean; slots: string[]; timezone: string; - reschedule?: boolean; } export function SelectSlot({ slots, timezone }: SelectSlotProps): JSX.Element { @@ -29,18 +29,18 @@ export function SelectSlot({ slots, timezone }: SelectSlotProps): JSX.Element { } return ( - + {slots.map((slot, idx) => { const startDate = DateTime.fromISO(slot); const startDateTimezoneAdjusted = startDate.setZone(timezone); const isSelected = selectedSlot === slot; return ( - + updateAppointmentSlot(slot, dispatch)} + sx={{ borderColor: theme.palette.divider, fontWeight: isSelected ? 700 : 400, width: '110px' }} + variant={isSelected ? 'contained' : 'outlined'} > {startDateTimezoneAdjusted.toFormat('h:mm a')} diff --git a/packages/app/src/components/TopAppBar.tsx b/packages/app/src/components/TopAppBar.tsx index 9e8857db..ece3d1e0 100644 --- a/packages/app/src/components/TopAppBar.tsx +++ b/packages/app/src/components/TopAppBar.tsx @@ -47,18 +47,18 @@ export const TopAppBar: FC = () => { - - + + {pages.map((page) => ( diff --git a/packages/app/src/pages/PatientCheckin.tsx b/packages/app/src/pages/PatientCheckin.tsx index a108b327..4a46960a 100644 --- a/packages/app/src/pages/PatientCheckin.tsx +++ b/packages/app/src/pages/PatientCheckin.tsx @@ -38,8 +38,8 @@ export const PatientCheckIn = (): JSX.Element => { {
setName(e.target.value)} + value={name} variant="outlined" - label="Your Name" - error={isError} sx={{ pb: 2, width: '100%' }} /> - @@ -120,22 +120,22 @@ export const ProviderDashboard = (): JSX.Element => { - + {t('general.patientsQueue')} - + {t('general.waiting')} diff --git a/packages/app/src/pages/ProviderRegistration.tsx b/packages/app/src/pages/ProviderRegistration.tsx index b84bbbef..2669dedc 100644 --- a/packages/app/src/pages/ProviderRegistration.tsx +++ b/packages/app/src/pages/ProviderRegistration.tsx @@ -37,34 +37,34 @@ export const ProviderRegistration = (): JSX.Element => { {/* left side */} - + Connect with patients virtually @@ -72,33 +72,33 @@ export const ProviderRegistration = (): JSX.Element => { component="img" src={ellipse4} sx={{ - width: 464, height: 464, - position: 'absolute', mb: 18, mr: 18, + position: 'absolute', + width: 464, }} /> @@ -108,8 +108,8 @@ export const ProviderRegistration = (): JSX.Element => { sx={{ display: 'flex', justifyContent: 'center', - overflow: 'hidden', mb: 2.5, + overflow: 'hidden', zIndex: '1', }} > @@ -117,14 +117,14 @@ export const ProviderRegistration = (): JSX.Element => { @@ -135,13 +135,13 @@ export const ProviderRegistration = (): JSX.Element => { - + Powered by @@ -150,21 +150,21 @@ export const ProviderRegistration = (): JSX.Element => { {/* right side */} - + Welcome to OttEHR - + Provider registration - + Title - - + + setRoomName(e.target.value)} error={isError} helperText={helperText} + label="Room Name" + onChange={(e) => setRoomName(e.target.value)} + value={roomName} + variant="outlined" /> - + {isError ? : } {`https://zapehr.app/${roomName}`} - - + + } label="I am not a patient" /> {/* TODO too much whitespace here? */} } label="I accept the terms and conditions" /> @@ -196,9 +196,9 @@ export const ProviderRegistration = (): JSX.Element => { type="submit" variant="contained" sx={{ + borderRadius: 1, color: 'white', textTransform: 'uppercase', - borderRadius: 1, py: 1, }} > diff --git a/packages/app/src/pages/ProviderSettings.tsx b/packages/app/src/pages/ProviderSettings.tsx index 31867547..c60e2a6c 100644 --- a/packages/app/src/pages/ProviderSettings.tsx +++ b/packages/app/src/pages/ProviderSettings.tsx @@ -28,30 +28,30 @@ export const ProviderSettings = (): JSX.Element => { return ( - + Title - - + + setRoomName(e.target.value)} error={isError} helperText={helperText} + label="Room Name (slug)" + onChange={(e) => setRoomName(e.target.value)} + value={roomName} + variant="outlined" /> - + {isError ? : } {`https://zapehr.app/${roomName}`} - +