From 29e5aef01b694205a1c1611e72ee957824bce4cd Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sat, 27 Feb 2021 18:29:05 +0700 Subject: [PATCH] #34 made error handling and resetting --- .../styles.module.scss | 3 +- .../comment/LocalCommentForm/index.tsx | 90 +++++++++++++------ .../LocalCommentForm/styles.module.scss | 57 ++++++++++++ .../input/Button/styles.module.scss | 11 --- src/utils/hooks/fileUploader.tsx | 5 +- src/utils/hooks/useCommentFormFormik.ts | 13 ++- 6 files changed, 136 insertions(+), 43 deletions(-) create mode 100644 src/components/comment/LocalCommentForm/styles.module.scss diff --git a/src/components/comment/CommentFormFormatButtons/styles.module.scss b/src/components/comment/CommentFormFormatButtons/styles.module.scss index 5360b104..e63a68c1 100644 --- a/src/components/comment/CommentFormFormatButtons/styles.module.scss +++ b/src/components/comment/CommentFormFormatButtons/styles.module.scss @@ -1,9 +1,10 @@ -@import "~/styles/variables.scss"; +@import '~/styles/variables.scss'; .wrap { display: flex; flex-wrap: wrap; height: 32px; + flex: 1; @media(max-width: 480px) { display: none; diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx index 15ead652..cbb52ab2 100644 --- a/src/components/comment/LocalCommentForm/index.tsx +++ b/src/components/comment/LocalCommentForm/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, useState } from 'react'; +import React, { FC, useCallback, useState } from 'react'; import { useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik'; import { FormikProvider } from 'formik'; import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea'; @@ -11,6 +11,10 @@ import { LocalCommentFormAttaches } from '~/components/comment/LocalCommentFormA import { LoaderCircle } from '~/components/input/LoaderCircle'; import { IComment, INode } from '~/redux/types'; import { EMPTY_COMMENT } from '~/redux/node/constants'; +import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone'; +import styles from './styles.module.scss'; +import { ERROR_LITERAL } from '~/constants/errors'; +import { Group } from '~/components/containers/Group'; interface IProps { comment?: IComment; @@ -20,41 +24,73 @@ interface IProps { const LocalCommentForm: FC = ({ comment, nodeId, onCancelEdit }) => { const [textarea, setTextarea] = useState(); - const uploader = useFileUploader(UPLOAD_SUBJECTS.COMMENT, UPLOAD_TARGETS.COMMENTS); + const uploader = useFileUploader( + UPLOAD_SUBJECTS.COMMENT, + UPLOAD_TARGETS.COMMENTS, + comment?.files + ); const formik = useCommentFormFormik(comment || EMPTY_COMMENT, nodeId, uploader, onCancelEdit); const isLoading = formik.isSubmitting || uploader.isUploading; const isEditing = !!comment?.id; + const clearError = useCallback(() => { + if (formik.status) { + formik.setStatus(''); + } + + if (formik.errors.text) { + formik.setErrors({ + ...formik.errors, + text: '', + }); + } + }, [formik]); + + const error = formik.status || formik.errors.text; + return ( -
- - - + + + + +
+ - - - + {!!error && ( +
+ {ERROR_LITERAL[error] || error} +
+ )} +
- {isLoading && } + - {isEditing && ( - - )} + + + - - - - + {isLoading && } + + {isEditing && ( + + )} + + + + +
+ + ); }; diff --git a/src/components/comment/LocalCommentForm/styles.module.scss b/src/components/comment/LocalCommentForm/styles.module.scss new file mode 100644 index 00000000..12798bf2 --- /dev/null +++ b/src/components/comment/LocalCommentForm/styles.module.scss @@ -0,0 +1,57 @@ +@import "src/styles/variables"; + +.wrap { + display: flex; + flex-direction: column; + + textarea { + min-height: 62px !important; + } +} + +.input { + @include outer_shadow(); + position: relative; + flex: 1; + padding: ($gap / 2) ($gap / 2 + 1px); +} + +.buttons { + @include outer_shadow(); + + position: relative; + z-index: 1; + display: flex; + flex-direction: row; + background: transparentize(black, 0.8); + padding: $gap / 2; + border-radius: 0 0 $radius $radius; + flex-wrap: wrap; + +} + +.uploads { + padding: ($gap / 2); + display: grid; + grid-column-gap: $gap / 2; + grid-row-gap: $gap / 2; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); +} + +.attaches { + @include outer_shadow(); +} + +.error { + position: absolute; + bottom: 0; + left: 50%; + background: $red; + z-index: 10; + font: $font_12_regular; + box-sizing: border-box; + padding: 0 $gap; + border-radius: 4px 4px 0 0; + transform: translate(-50%, 0); + cursor: pointer; +} diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index c3ee1e0c..676bb62d 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -178,17 +178,6 @@ fill: white; } } - - > * { - margin: 0 5px; - - &:first-child { - margin-left: 0; - } - &:last-child { - margin-right: 0; - } - } } .micro { diff --git a/src/utils/hooks/fileUploader.tsx b/src/utils/hooks/fileUploader.tsx index 9a3bc743..207a86f3 100644 --- a/src/utils/hooks/fileUploader.tsx +++ b/src/utils/hooks/fileUploader.tsx @@ -10,12 +10,13 @@ import { selectUploads } from '~/redux/uploads/selectors'; export const useFileUploader = ( subject: typeof UPLOAD_SUBJECTS[keyof typeof UPLOAD_SUBJECTS], - target: typeof UPLOAD_TARGETS[keyof typeof UPLOAD_TARGETS] + target: typeof UPLOAD_TARGETS[keyof typeof UPLOAD_TARGETS], + initialFiles?: IFile[] ) => { const dispatch = useDispatch(); const { files: uploadedFiles, statuses } = useShallowSelect(selectUploads); - const [files, setFiles] = useState([]); + const [files, setFiles] = useState(initialFiles || []); const [pendingIDs, setPendingIDs] = useState([]); const uploadFiles = useCallback( diff --git a/src/utils/hooks/useCommentFormFormik.ts b/src/utils/hooks/useCommentFormFormik.ts index 78223c7b..dd3fc139 100644 --- a/src/utils/hooks/useCommentFormFormik.ts +++ b/src/utils/hooks/useCommentFormFormik.ts @@ -1,5 +1,5 @@ import { IComment, INode } from '~/redux/types'; -import { useCallback, useRef } from 'react'; +import { useCallback, useEffect, useRef } from 'react'; import { FormikHelpers, useFormik, useFormikContext } from 'formik'; import { array, object, string } from 'yup'; import { FileUploader } from '~/utils/hooks/fileUploader'; @@ -58,13 +58,22 @@ export const useCommentFormFormik = ( if (stopEditing) stopEditing(); }, [uploader, stopEditing]); - return useFormik({ + const formik = useFormik({ initialValues, validationSchema, onSubmit, initialStatus: '', onReset, + validateOnChange: true, }); + + useEffect(() => { + if (formik.status) { + formik.setStatus(''); + } + }, [formik.values.text]); + + return formik; }; export const useCommentFormContext = () => useFormikContext();