add comments for guests

src/containers/boris/BorisComments/index.tsx

@@ -1,34 +1,20 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Group } from '~/components/containers/Group';
 import { Footer } from '~/components/main/Footer';
-import { NodeCommentFormSSR } from '~/components/node/NodeCommentForm/ssr';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { isSSR } from '~/constants/ssr';
+import { NodeCommentFormSSR } from '~/containers/node/NodeCommentForm/ssr';
 import { NodeComments } from '~/containers/node/NodeComments';
-import { useAuth } from '~/hooks/auth/useAuth';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
-import { useNodeContext } from '~/utils/context/NodeContextProvider';
-import { useUserContext } from '~/utils/context/UserContextProvider';
 
-interface IProps {}
-
-const BorisComments: FC<IProps> = () => {
-  const user = useUserContext();
-  const { isUser } = useAuth();
+interface Props {}
 
+const BorisComments: FC<Props> = () => {
   const { isLoading, comments, onSaveComment } = useCommentContext();
-  const { node } = useNodeContext();
 
   return (
     <Group>
-      {(isUser || isSSR) && (
-        <NodeCommentFormSSR
-          user={user}
-          nodeId={node.id}
-          saveComment={onSaveComment}
-        />
-      )}
+      <NodeCommentFormSSR saveComment={onSaveComment} />
 
       {isLoading || !comments?.length ? (
         <NodeNoComments loading count={7} />

src/containers/node/NodeBottomBlock/index.tsx

@@ -1,24 +1,21 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
-import { Card } from '~/components/containers/Card';
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
 import { Sticky } from '~/components/containers/Sticky';
 import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock';
-import { NodeCommentFormSSR } from '~/components/node/NodeCommentForm/ssr';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
 import { NodeBacklinks } from '~/containers/node/NodeBacklinks';
+import { NodeCommentFormSSR } from '~/containers/node/NodeCommentForm/ssr';
 import { NodeComments } from '~/containers/node/NodeComments';
 import { useNodeBlocks } from '~/hooks/node/useNodeBlocks';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
 import { useNodeContext } from '~/utils/context/NodeContextProvider';
 import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider';
-import { useUserContext } from '~/utils/context/UserContextProvider';
-import { useAuthProvider } from '~/utils/providers/AuthProvider';
 
 import styles from './styles.module.scss';
 
@@ -27,7 +24,6 @@ interface IProps {
 }
 
 const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
-  const user = useUserContext();
   const { node, isLoading, backlinks } = useNodeContext();
   const {
     comments,
@@ -36,7 +32,6 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
   } = useCommentContext();
   const { related, isLoading: isLoadingRelated } = useNodeRelatedContext();
   const { inline } = useNodeBlocks(node, isLoading);
-  const { isUser } = useAuthProvider();
 
   if (node.deleted_at) {
     return <NodeDeletedBadge />;
@@ -59,13 +54,7 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
               )}
             </article>
 
-            {isUser && !isLoading && (
-              <NodeCommentFormSSR
-                nodeId={node.id}
-                saveComment={onSaveComment}
-                user={user}
-              />
-            )}
+            <NodeCommentFormSSR saveComment={onSaveComment} />
 
             <div className={styles.subheader}>
               <Filler className={styles.backlinks}>

src/containers/node/NodeCommentForm/index.tsx

@@ -0,0 +1,47 @@
+import { FC, useCallback } from 'react';
+
+import { CommentForm } from '~/components/comment/CommentForm';
+import { CommentWrapper } from '~/components/containers/CommentWrapper';
+import { UploadDropzone } from '~/components/upload/UploadDropzone';
+import { EMPTY_USER } from '~/constants/auth';
+import { Dialog } from '~/constants/modal';
+import { UploadSubject, UploadTarget } from '~/constants/uploads';
+import { useAuth } from '~/hooks/auth/useAuth';
+import { useUploader } from '~/hooks/data/useUploader';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import { IComment } from '~/types';
+import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
+
+export interface Props {
+  saveComment: (comment: IComment) => Promise<IComment | undefined>;
+}
+
+const NodeCommentForm: FC<Props> = ({ saveComment }) => {
+  const { user, isUser } = useAuth();
+  const showLoginDialog = useShowModal(Dialog.Login);
+
+  const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments);
+  const onCommentSave = useCallback(
+    async (comment: IComment) => {
+      if (!isUser) {
+        showLoginDialog({});
+        return;
+      }
+
+      return saveComment(comment);
+    },
+    [isUser, showLoginDialog, saveComment],
+  );
+
+  return (
+    <UploadDropzone onUpload={uploader.uploadFiles}>
+      <UploaderContextProvider value={uploader}>
+        <CommentWrapper user={isUser ? user : undefined} isForm>
+          <CommentForm saveComment={onCommentSave} allowUploads={isUser} />
+        </CommentWrapper>
+      </UploaderContextProvider>
+    </UploadDropzone>
+  );
+};
+
+export { NodeCommentForm };

src/containers/node/NodeCommentForm/ssr.ts

@@ -0,0 +1,8 @@
+import dynamic from 'next/dynamic';
+
+import type { Props } from './index';
+
+export const NodeCommentFormSSR = dynamic<Props>(
+  () => import('./index').then((it) => it.NodeCommentForm),
+  { ssr: false },
+);