#34 added isLoading and error handling to useCommentFormFormik

src/components/comment/LocalCommentForm/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, useState } from 'react';
 import { CommentFormValues, useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
 import { FormikProvider } from 'formik';
 import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
+import { Button } from '~/components/input/Button';
 
 interface IProps {}
 
@@ -13,12 +14,19 @@ const initialValues: CommentFormValues = {
 
 const LocalCommentForm: FC<IProps> = () => {
   const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
-  const { formik, isLoading } = useCommentFormFormik(initialValues, console.log);
+  const { formik } = useCommentFormFormik(initialValues);
 
   return (
-    <FormikProvider value={formik}>
+    <form onSubmit={formik.handleSubmit}>
-      <LocalCommentFormTextarea isLoading={isLoading} setRef={setTextarea} />
+      <FormikProvider value={formik}>
-    </FormikProvider>
+        <LocalCommentFormTextarea isLoading={formik.isSubmitting} setRef={setTextarea} />
+        {formik.isSubmitting && <div>LOADING</div>}
+        {!!formik.status && <div>error: {formik.status}</div>}
+        <Button size="small" disabled={formik.isSubmitting}>
+          SEND
+        </Button>
+      </FormikProvider>
+    </form>
   );
 };
 

src/utils/hooks/useCommentFormFormik.ts

@@ -1,7 +1,7 @@
-import { IFile } from '~/redux/types';
+import { IComment, IFile } from '~/redux/types';
-import { useRef, useState } from 'react';
+import { useCallback, useRef } from 'react';
-import { useFormik, useFormikContext } from 'formik';
+import { FormikHelpers, useFormik, useFormikContext } from 'formik';
-import { object, string, array } from 'yup';
+import { array, object, string } from 'yup';
 
 export interface CommentFormValues {
   text: string;
@@ -15,21 +15,50 @@ const validationSchema = object().shape({
   songs: array(),
 });
 
-export const useCommentFormFormik = (
+const submitComment = async (
+  id: IComment['id'],
   values: CommentFormValues,
-  onSubmit: (values: CommentFormValues) => void
+  callback: (e: string) => void
 ) => {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  callback('wrong');
+};
+
+export const useCommentFormFormik = (values: CommentFormValues) => {
   const { current: initialValues } = useRef(values);
 
+  const onSuccess = useCallback(
+    ({ resetForm, setStatus, setSubmitting }: FormikHelpers<CommentFormValues>) => (e: string) => {
+      setSubmitting(false);
+
+      if (e) {
+        setStatus(e);
+        return;
+      }
+
+      if (resetForm) {
+        resetForm();
+      }
+    },
+    []
+  );
+
+  const onSubmit = useCallback(
+    (values: CommentFormValues, helpers: FormikHelpers<CommentFormValues>) => {
+      helpers.setSubmitting(true);
+      submitComment(0, values, onSuccess(helpers));
+    },
+    [values, onSuccess]
+  );
+
   const formik = useFormik({
     initialValues,
     validationSchema,
     onSubmit,
+    initialStatus: '',
   });
 
-  const [isLoading, setIsLoading] = useState(false);
+  return { formik };
-
-  return { formik, isLoading };
 };
 
 export const useCommentFormContext = () => useFormikContext<CommentFormValues>();