add comments for guests

src/hooks/comments/useCommentFormFormik.ts

@@ -3,59 +3,62 @@ import { useCallback, useEffect, useRef } from 'react';
 import { FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { array, object, string } from 'yup';
 
-import { IComment, INode } from '~/types';
-import { Uploader } from '~/utils/context/UploaderContextProvider';
+import { IComment, IFile } from '~/types';
+import { getErrorMessage } from '~/utils/errors/getErrorMessage';
 import { showErrorToast } from '~/utils/errors/showToast';
-import { hasPath, path } from '~/utils/ramda';
 
 const validationSchema = object().shape({
   text: string(),
   files: array(),
 });
 
-const onSuccess = ({ resetForm, setSubmitting, setErrors }: FormikHelpers<IComment>) => (
-  error?: unknown
-) => {
-  setSubmitting(false);
+const onSuccess =
+  ({ resetForm, setSubmitting, setErrors }: FormikHelpers<IComment>) =>
+  (error?: unknown) => {
+    setSubmitting(false);
+    const message = getErrorMessage(error);
 
-  if (hasPath(['response', 'data', 'error'], error)) {
-    const message = path(['response', 'data', 'error'], error) as string;
-    setErrors({ text: message });
-    showErrorToast(error);
-    return;
-  }
+    if (message) {
+      setErrors({ text: message });
+      showErrorToast(error);
+      return;
+    }
 
-  if (resetForm) {
-    resetForm();
-  }
-};
+    if (resetForm) {
+      resetForm();
+    }
+  };
 
 export const useCommentFormFormik = (
-  values: IComment,
-  nodeId: INode['id'],
-  uploader: Uploader,
-  sendData: (data: IComment) => Promise<unknown>,
-  stopEditing?: () => void
+  comment: IComment,
+  files: IFile[],
+  setFiles: (file: IFile[]) => void,
+  sendData: (data: IComment) => Promise<IComment | undefined>,
+  stopEditing?: () => void,
 ) => {
-  const { current: initialValues } = useRef(values);
+  const { current: initialValues } = useRef(comment);
 
   const onSubmit = useCallback(
     async (values: IComment, helpers: FormikHelpers<IComment>) => {
       try {
         helpers.setSubmitting(true);
-        await sendData({ ...values, files: uploader.files });
-        onSuccess(helpers)();
+
+        const comment = await sendData({ ...values, files });
+
+        if (comment) {
+          onSuccess(helpers)();
+        }
       } catch (error) {
         onSuccess(helpers)(error);
       }
     },
-    [sendData, uploader.files]
+    [sendData, files],
   );
 
   const onReset = useCallback(() => {
-    uploader.setFiles([]);
+    setFiles([]);
     if (stopEditing) stopEditing();
-  }, [stopEditing, uploader]);
+  }, [stopEditing, setFiles]);
 
   const formik = useFormik({
     initialValues,

src/hooks/comments/useNodeComments.ts

@@ -26,17 +26,19 @@ export const useNodeComments = (nodeId: number, fallbackData?: IComment[]) => {
         }
 
         await mutate(
-          prev =>
-            prev?.map(list =>
-              list.map(comment => (comment.id === id ? { ...comment, deleted_at } : comment))
+          (prev) =>
+            prev?.map((list) =>
+              list.map((comment) =>
+                comment.id === id ? { ...comment, deleted_at } : comment,
+              ),
             ),
-          false
+          false,
         );
       } catch (error) {
         showErrorToast(error);
       }
     },
-    [data, mutate, nodeId]
+    [data, mutate, nodeId],
   );
 
   const onEdit = useCallback(
@@ -50,22 +52,37 @@ export const useNodeComments = (nodeId: number, fallbackData?: IComment[]) => {
       // Comment was created
       if (!comment.id) {
         await mutate(
-          data.map((list, index) => (index === 0 ? [result.comment, ...list] : list)),
-          false
+          data.map((list, index) =>
+            index === 0 ? [result.comment, ...list] : list,
+          ),
+          false,
         );
-        return;
+
+        return result.comment;
       }
 
       await mutate(
-        prev =>
-          prev?.map(list =>
-            list.map(it => (it.id === result.comment.id ? { ...it, ...result.comment } : it))
+        (prev) =>
+          prev?.map((list) =>
+            list.map((it) =>
+              it.id === result.comment.id ? { ...it, ...result.comment } : it,
+            ),
           ),
-        false
+        false,
       );
+
+      return result.comment;
     },
-    [data, mutate, nodeId]
+    [data, mutate, nodeId],
   );
 
-  return { onLoadMoreComments, onDelete, comments, hasMore, isLoading, onEdit, isLoadingMore };
+  return {
+    onLoadMoreComments,
+    onDelete,
+    comments,
+    hasMore,
+    isLoading,
+    onEdit,
+    isLoadingMore,
+  };
 };