diff --git a/src/components/FeedbackForms/SubmitCorrectAbstract/FormPreview.tsx b/src/components/FeedbackForms/SubmitCorrectAbstract/FormPreview.tsx index 10f4813..69ae8ca 100644 --- a/src/components/FeedbackForms/SubmitCorrectAbstract/FormPreview.tsx +++ b/src/components/FeedbackForms/SubmitCorrectAbstract/FormPreview.tsx @@ -147,7 +147,7 @@ const getSafeDiff = (src: SubmitCorrectAbstractFormValues, curr: SubmitCorrectAb } }; -const createFeedbackString = ( +export const createFeedbackString = ( original: SubmitCorrectAbstractFormValues, current: SubmitCorrectAbstractFormValues, previewText: string, diff --git a/src/components/FeedbackForms/SubmitCorrectAbstract/FormStatus.tsx b/src/components/FeedbackForms/SubmitCorrectAbstract/FormStatus.tsx index 98c8b4b..623f186 100644 --- a/src/components/FeedbackForms/SubmitCorrectAbstract/FormStatus.tsx +++ b/src/components/FeedbackForms/SubmitCorrectAbstract/FormStatus.tsx @@ -1,18 +1,20 @@ -import React from 'react'; -import { useFormContext } from 'react-hook-form'; -import { AlertModal } from '../components'; -import { AlertType } from '../components/AlertModal'; -import { SubmitCorrectAbstractFormValues } from '../models'; -import { FormSubmissionCtx } from './SubmitCorrectAbstract'; +import React, {useContext} from 'react'; +import {useFormContext} from 'react-hook-form'; +import {AlertModal} from '../components'; +import {AlertType} from '../components/AlertModal'; +import {EntryType, SubmitCorrectAbstractFormValues} from '../models'; +import {FormSubmissionCtx, OriginCtx} from './SubmitCorrectAbstract'; +import {createFeedbackString} from './FormPreview'; +import {Button} from 'react-bootstrap'; const FormStatus: React.FunctionComponent = () => { - const { submissionState } = React.useContext(FormSubmissionCtx); + const {submissionState} = React.useContext(FormSubmissionCtx); - const { errors } = useFormContext(); + const {errors} = useFormContext(); if (Object.keys(errors).length > 0) { return ( -
+
Form errors, check entries above
); @@ -33,28 +35,67 @@ const FormStatus: React.FunctionComponent = () => { } if (submissionState?.status === 'error') { - if (submissionState.code === 500 || submissionState.code >= 400 && submissionState.code <= 499) { - return ( -
- There was an error processing the request, please try again, or send - an email with your changes to{' '} - adshelp(at)cfa.harvard.edu. -
- ); - } else { - return ( -
-

{submissionState.message}

-

- Please try again, or send an email with your changes to{' '} - adshelp(at)cfa.harvard.edu. -

-
- ); - } + return ( +
+

{submissionState.message}

+

+ Unable to submit. Please try again, or send an email with your changes to{' '} + adshelp(at)cfa.harvard.edu. + {' '}Sorry for the inconvenience. +

+ +
+ ); } return null; }; +const Changes = () => { + const [isCopied, setIsCopied] = React.useState(false); + const [copyFailed, setCopyFailed] = React.useState(false); + const {origin} = useContext(OriginCtx); + const {getValues} = useFormContext(); + const isEdit = origin.entryType === EntryType.Edit; + let changes: string | null; + try { + const feedback = createFeedbackString(origin, getValues(), ''); + if (isEdit) { + changes = JSON.stringify({original: feedback.original, updated: feedback.new}); + } else { + changes = JSON.stringify(feedback.new); + } + } catch (e) { + changes = null; + } + + const copy = () => { + if (changes && 'clipboard' in navigator) { + navigator.clipboard.writeText(changes).then(() => { + setIsCopied(true); + }).catch(() => { + setCopyFailed(true); + }).finally(() => { + setTimeout(() => setIsCopied(false), 1000); + setTimeout(() => setCopyFailed(false), 3000) + }) + } + } + + if (!changes) { + return null; + } + + return (<> +

{isEdit ? 'Changes to be made:' : 'New submission:'}

+

+

{changes}
+ + {isCopied && Copied!} + {copyFailed && Copy is unsupported in this browser for some reason, please try manually} +

+ ); +} + export default FormStatus; diff --git a/src/components/FeedbackForms/SubmitCorrectAbstract/MainForm.tsx b/src/components/FeedbackForms/SubmitCorrectAbstract/MainForm.tsx index 576a9a1..c799789 100644 --- a/src/components/FeedbackForms/SubmitCorrectAbstract/MainForm.tsx +++ b/src/components/FeedbackForms/SubmitCorrectAbstract/MainForm.tsx @@ -39,7 +39,7 @@ const MainForm: React.FunctionComponent = ({ onSubmit }) => { required /> { if (submissionState) { handle = setTimeout( setSubmissionState, - submissionState.status === 'success' ? 3000 : 10000, + submissionState.status === 'success' ? 3000 : 30000, null, ); }