From 9f3dcdf9b1cf0fca204c2c7ed000fb214e44e4d4 Mon Sep 17 00:00:00 2001 From: Nick Phura Date: Tue, 17 Sep 2024 17:35:41 -0700 Subject: [PATCH] Add JSDoc. Add fallback catch to report upload. Fix error popup not displaying error message in body of dialog for the csv upload dialogs. --- .../attachments/FileUploadWithMeta.tsx | 6 +--- .../dialog/attachments/FileUploadDialog.tsx | 30 +++++++++++++++++++ .../attachments/ReportFileUploadDialog.tsx | 11 +++++-- .../list/components/AnimalListToolbar.tsx | 8 +++-- .../ImportObservationsButton.tsx | 8 +++-- .../components/ImportObservationsButton.tsx | 8 +++-- 6 files changed, 57 insertions(+), 14 deletions(-) diff --git a/app/src/components/attachments/FileUploadWithMeta.tsx b/app/src/components/attachments/FileUploadWithMeta.tsx index 8c51e540fa..380be1950c 100644 --- a/app/src/components/attachments/FileUploadWithMeta.tsx +++ b/app/src/components/attachments/FileUploadWithMeta.tsx @@ -14,12 +14,9 @@ import { useFormikContext } from 'formik'; export const FileUploadWithMeta = () => { const { handleSubmit, setFieldValue, setFieldError, values, errors } = useFormikContext(); - const onStatus = (status: UploadFileStatus) => { - console.log(status); - }; - const onFile = (file: File | null) => { setFieldValue('attachmentFile', file); + setFieldError('attachmentFile', ''); }; const onError = (error: string) => { @@ -37,7 +34,6 @@ export const FileUploadWithMeta = () => { void; + /** + * Drop zone configuration properties. + * + * @type {IDropZoneConfigProps} + * @memberof IFileUploadDialogProps + */ dropZoneProps?: IDropZoneConfigProps; } diff --git a/app/src/components/dialog/attachments/ReportFileUploadDialog.tsx b/app/src/components/dialog/attachments/ReportFileUploadDialog.tsx index 695f778fd2..747cd2887d 100644 --- a/app/src/components/dialog/attachments/ReportFileUploadDialog.tsx +++ b/app/src/components/dialog/attachments/ReportFileUploadDialog.tsx @@ -32,6 +32,8 @@ export interface IReportFileUploadDialogProps { /** * Callback fired if the dialog is submitted (user clicks 'Save' or 'Submit', etc). * + * The function should handle any errors thrown. + * * @memberof IReportFileUploadDialogProps */ onSubmit: (reportMeta: IReportMetaForm) => Promise; @@ -61,9 +63,12 @@ export const ReportFileUploadDialog: React.FC = (p const onSubmit = (values: IReportMetaForm) => { setIsSubmitting(true); - props.onSubmit(values).finally(() => { - setIsSubmitting(false); - }); + props + .onSubmit(values) + .catch() // Errors should be handled in the onSubmit function, squash errors here to prevent unhandled errors + .finally(() => { + setIsSubmitting(false); + }); }; if (!props.open) { diff --git a/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx b/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx index 6cb1e11dd3..5ea6c5cb85 100644 --- a/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx +++ b/app/src/features/surveys/animals/list/components/AnimalListToolbar.tsx @@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography'; import { FileUploadSingleItemDialog } from 'components/dialog/attachments/FileUploadSingleItemDialog'; import { SurveyAnimalsI18N } from 'constants/i18n'; import { DialogContext } from 'contexts/dialogContext'; +import { APIError } from 'hooks/api/useAxios'; import { useBiohubApi } from 'hooks/useBioHubApi'; import { useSurveyContext } from 'hooks/useContext'; import { useContext, useState } from 'react'; @@ -37,11 +38,14 @@ export const AnimalListToolbar = (props: IAnimaListToolbarProps) => { try { await biohubApi.survey.importCrittersFromCsv(file, surveyContext.projectId, surveyContext.surveyId); surveyContext.critterDataLoader.refresh(surveyContext.projectId, surveyContext.surveyId); - } catch (err: any) { + } catch (error) { + const apiError = error as APIError; + dialogContext.setErrorDialog({ dialogTitle: SurveyAnimalsI18N.importRecordsErrorDialogTitle, dialogText: SurveyAnimalsI18N.importRecordsErrorDialogText, - dialogErrorDetails: [err.message], + dialogError: apiError.message, + dialogErrorDetails: apiError.errors, open: true, onClose: () => { dialogContext.setErrorDialog({ open: false }); diff --git a/app/src/features/surveys/observations/observations-table/import-obsevations/ImportObservationsButton.tsx b/app/src/features/surveys/observations/observations-table/import-obsevations/ImportObservationsButton.tsx index bbae2910c5..b3e5fd4e9e 100644 --- a/app/src/features/surveys/observations/observations-table/import-obsevations/ImportObservationsButton.tsx +++ b/app/src/features/surveys/observations/observations-table/import-obsevations/ImportObservationsButton.tsx @@ -6,6 +6,7 @@ import { FileUploadSingleItemDialog } from 'components/dialog/attachments/FileUp import { ObservationsTableI18N } from 'constants/i18n'; import { DialogContext } from 'contexts/dialogContext'; import { SurveyContext } from 'contexts/surveyContext'; +import { APIError } from 'hooks/api/useAxios'; import { useBiohubApi } from 'hooks/useBioHubApi'; import { useContext, useState } from 'react'; @@ -89,11 +90,14 @@ export const ImportObservationsButton = (props: IImportObservationsButtonProps) }); onSuccess?.(); - } catch (apiError: any) { + } catch (error) { + const apiError = error as APIError; + dialogContext.setErrorDialog({ dialogTitle: ObservationsTableI18N.importRecordsErrorDialogTitle, dialogText: ObservationsTableI18N.importRecordsErrorDialogText, - dialogErrorDetails: [apiError.message], + dialogError: apiError.message, + dialogErrorDetails: apiError.errors, open: true, onClose: () => { dialogContext.setErrorDialog({ open: false }); diff --git a/app/src/features/surveys/observations/sampling-sites/components/ImportObservationsButton.tsx b/app/src/features/surveys/observations/sampling-sites/components/ImportObservationsButton.tsx index 05c249d6c1..9efab72aae 100644 --- a/app/src/features/surveys/observations/sampling-sites/components/ImportObservationsButton.tsx +++ b/app/src/features/surveys/observations/sampling-sites/components/ImportObservationsButton.tsx @@ -4,6 +4,7 @@ import { FileUploadSingleItemDialog } from 'components/dialog/attachments/FileUp import { ObservationsTableI18N } from 'constants/i18n'; import { DialogContext } from 'contexts/dialogContext'; import { SurveyContext } from 'contexts/surveyContext'; +import { APIError } from 'hooks/api/useAxios'; import { useBiohubApi } from 'hooks/useBioHubApi'; import { useContext, useState } from 'react'; @@ -106,11 +107,14 @@ export const ImportObservationsButton = (props: IImportObservationsButtonProps) }); onSuccess?.(); - } catch (apiError: any) { + } catch (error) { + const apiError = error as APIError; + dialogContext.setErrorDialog({ dialogTitle: ObservationsTableI18N.importRecordsErrorDialogTitle, dialogText: ObservationsTableI18N.importRecordsErrorDialogText, - dialogErrorDetails: [apiError.message], + dialogError: apiError.message, + dialogErrorDetails: apiError.errors, open: true, onClose: () => { dialogContext.setErrorDialog({ open: false });