fix: making a comment through header actions

packages/shared/src/components/comments/CommentInputOrPage.tsx

@@ -5,6 +5,8 @@ import {
   CommentMarkdownInputProps,
 } from '../fields/MarkdownInput/CommentMarkdownInput';
 import { ViewSize, useViewSize } from '../../hooks';
+import { useMutateComment } from '../../hooks/post/useMutateComment';
+import { WriteCommentContext } from '../../contexts/WriteCommentContext';
 
 interface CommentInputOrPageProps
   extends Omit<CommentMarkdownInputProps, 'className'> {
@@ -23,6 +25,12 @@ export default function CommentInputOrPage({
 }: CommentInputOrPageProps): ReactElement {
   const isMobile = useViewSize(ViewSize.MobileL);
   const router = useRouter();
+  const mutateCommentResult = useMutateComment({
+    post: props.post,
+    editCommentId: props.editCommentId,
+    parentCommentId: props.parentCommentId,
+    onCommented: props.onCommented,
+  });
 
   if (isMobile) {
     const commentId = props.editCommentId ?? 'new';
@@ -44,5 +52,11 @@ export default function CommentInputOrPage({
     return null;
   }
 
-  return <CommentMarkdownInput {...props} className={className.input} />;
+  return (
+    <WriteCommentContext.Provider
+      value={{ mutateComment: mutateCommentResult }}
+    >
+      <CommentMarkdownInput {...props} className={className.input} />
+    </WriteCommentContext.Provider>
+  );
 }

packages/shared/src/components/comments/CommentInputPage.tsx

@@ -1,15 +1,9 @@
-import React, {
-  ReactElement,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import { FormWrapper } from '../fields/form';
 import { CommentMarkdownInput } from '../fields/MarkdownInput/CommentMarkdownInput';
-import { UseMutateCommentResult } from '../../hooks/post/useMutateComment';
+import { useMutateComment } from '../../hooks/post/useMutateComment';
 import { useVisualViewport } from '../../hooks/utils/useVisualViewport';
 import { COMMENT_BY_ID_WITH_POST_QUERY } from '../../graphql/comments';
 import useCommentById from '../../hooks/comments/useCommentById';
@@ -18,6 +12,7 @@ import { Switch } from '../fields/Switch';
 import { useNotificationToggle } from '../../hooks/notifications';
 import { NotificationPromptSource } from '../../lib/analytics';
 import { Post } from '../../graphql/posts';
+import { WriteCommentContext } from '../../contexts/WriteCommentContext';
 
 // statically defined heights of various containers that
 // affect final height of the input container
@@ -36,7 +31,6 @@ const CommentInputPage = ({
   editCommentId,
   replyCommentId,
 }: Props): ReactElement => {
-  const [value, setValue] = useState('');
   const [styleHeight, setStyleHeight] = useState<number | 'auto'>('auto');
   const { user } = useAuthContext();
   const router = useRouter();
@@ -65,8 +59,13 @@ const CommentInputPage = ({
     () => comment?.parent?.id ?? replyCommentId,
     [comment, replyCommentId],
   );
-  const mutateRef = useRef<UseMutateCommentResult>();
-  const { mutateComment, isLoading, isSuccess } = mutateRef?.current ?? {};
+  const mutateCommentResult = useMutateComment({
+    post,
+    editCommentId,
+    parentCommentId,
+    onCommented: router.back,
+  });
+  const { isLoading, isSuccess } = mutateCommentResult;
 
   const { height } = useVisualViewport();
   const replyHeight = height > 0 ? replySize : 0;
@@ -98,71 +97,74 @@ const CommentInputPage = ({
   }, [isEdit, isReply, comment, user?.id]);
 
   return (
-    <div>
-      <FormWrapper
-        form="new comment"
-        copy={{ right: submitCopy }}
-        leftButtonProps={{
-          onClick: router.back,
-        }}
-        rightButtonProps={{
-          onClick: async () => {
-            await onSubmitted();
-            mutateComment(value);
-          },
-          loading: isLoading,
-          disabled: isSuccess,
-        }}
-        className={{
-          container: 'flex-1 first:!border-none',
-          header: 'sticky top-0 z-2 w-full bg-background-default',
-        }}
-      >
-        {isReply && comment && (
-          <div className="ml-12 flex gap-2 border-l border-theme-divider-tertiary py-3 pl-5 text-text-tertiary typo-caption1">
-            Reply to
-            <span className="font-bold text-text-primary">
-              {comment.author?.username}
-            </span>
-          </div>
-        )}
-        <CommentMarkdownInput
-          replyTo={null}
-          post={post}
-          parentCommentId={parentCommentId}
-          editCommentId={isEdit && editCommentId}
-          initialContent={initialContent}
-          className={{
-            markdownContainer: 'flex-1',
-            container: classNames(
-              'flex flex-col',
-              isReply ? 'h-[calc(100%-2.5rem)]' : 'h-full',
-            ),
-            tab: 'flex-1',
-            input: '!max-h-none flex-1',
+    <WriteCommentContext.Provider
+      value={{ mutateComment: mutateCommentResult }}
+    >
+      <div>
+        <FormWrapper
+          form="write-comment"
+          copy={{ right: submitCopy }}
+          leftButtonProps={{
+            onClick: router.back,
           }}
-          showSubmit={false}
-          showUserAvatar={false}
-          onChange={setValue}
-          style={{
-            height: `${styleHeight}px`,
+          rightButtonProps={{
+            onClick: async () => {
+              await onSubmitted();
+            },
+            loading: isLoading,
+            disabled: isSuccess,
+          }}
+          className={{
+            container: 'flex-1 first:!border-none',
+            header: 'sticky top-0 z-2 w-full bg-background-default',
           }}
-        />
-        {shouldShowCta && (
-          <Switch
-            inputId="push_notification-switch"
-            name="push_notification"
-            labelClassName="flex-1 font-normal"
-            className="mx-3 my-3.5"
-            compact={false}
-            checked={isEnabled}
-            onToggle={onToggle}
-          >
-            Receive updates when other members engage
-          </Switch>
-        )}
-      </FormWrapper>
-    </div>
+        >
+          {isReply && comment && (
+            <div className="ml-12 flex gap-2 border-l border-theme-divider-tertiary py-3 pl-5 text-text-tertiary typo-caption1">
+              Reply to
+              <span className="font-bold text-text-primary">
+                {comment.author?.username}
+              </span>
+            </div>
+          )}
+          <CommentMarkdownInput
+            replyTo={null}
+            post={post}
+            parentCommentId={parentCommentId}
+            editCommentId={isEdit && editCommentId}
+            initialContent={initialContent}
+            className={{
+              markdownContainer: 'flex-1',
+              container: classNames(
+                'flex flex-col',
+                isReply ? 'h-[calc(100%-2.5rem)]' : 'h-full',
+              ),
+              tab: 'flex-1',
+              input: '!max-h-none flex-1',
+            }}
+            showSubmit={false}
+            showUserAvatar={false}
+            style={{
+              height: `${styleHeight}px`,
+            }}
+            formProps={{ id: 'write-comment' }}
+          />
+          {shouldShowCta && (
+            <Switch
+              inputId="push_notification-switch"
+              name="push_notification"
+              labelClassName="flex-1 font-normal"
+              className="mx-3 my-3.5"
+              compact={false}
+              checked={isEnabled}
+              onToggle={onToggle}
+            >
+              Receive updates when other members engage
+            </Switch>
+          )}
+        </FormWrapper>
+      </div>
+    </WriteCommentContext.Provider>
   );
 };
 

packages/shared/src/components/fields/MarkdownInput/CommentMarkdownInput.tsx

@@ -1,9 +1,9 @@
 import React, {
   CSSProperties,
   FormEventHandler,
+  FormHTMLAttributes,
   ReactElement,
   useEffect,
-  useImperativeHandle,
   useRef,
 } from 'react';
 import classNames from 'classnames';
@@ -12,10 +12,7 @@ import MarkdownInput, { MarkdownRef } from './index';
 import { Comment } from '../../../graphql/comments';
 import { formToJson } from '../../../lib/form';
 import { Post } from '../../../graphql/posts';
-import {
-  useMutateComment,
-  UseMutateCommentResult,
-} from '../../../hooks/post/useMutateComment';
+import { useWriteCommentContext } from '../../../contexts/WriteCommentContext';
 
 export interface CommentClassName {
   container?: string;
@@ -40,47 +37,44 @@ export interface CommentMarkdownInputProps {
   showSubmit?: boolean;
   showUserAvatar?: boolean;
   onChange?: (value: string) => void;
-  mutateRef?: React.MutableRefObject<UseMutateCommentResult>;
+  formProps?: FormHTMLAttributes<HTMLFormElement>;
 }
 
 export function CommentMarkdownInput({
   post,
-  parentCommentId,
   initialContent,
   replyTo,
   editCommentId,
   className = {},
   style,
-  onCommented,
   onChange,
   showSubmit = true,
   showUserAvatar = true,
-  mutateRef,
+  formProps = {},
 }: CommentMarkdownInputProps): ReactElement {
   const postId = post?.id;
   const sourceId = post?.source?.id;
   const markdownRef = useRef<MarkdownRef>();
-  const { mutateComment, isLoading, isSuccess } = useMutateComment({
-    post,
-    editCommentId,
-    parentCommentId,
-    onCommented,
-  });
-  useImperativeHandle(mutateRef, () => ({
-    mutateComment,
-    isLoading,
-    isSuccess,
-  }));
-
+  const {
+    mutateComment: { mutateComment, isLoading, isSuccess },
+  } = useWriteCommentContext();
   const onSubmitForm: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
 
+    if (isLoading || isSuccess) {
+      return null;
+    }
+
     const { content } = formToJson<{ content: string }>(e.currentTarget);
 
     return mutateComment(content);
   };
 
   const onKeyboardSubmit: FormEventHandler<HTMLTextAreaElement> = (e) => {
+    if (isLoading || isSuccess) {
+      return null;
+    }
+
     const content = e.currentTarget.value;
 
     return mutateComment(content);
@@ -92,6 +86,7 @@ export function CommentMarkdownInput({
 
   return (
     <form
+      {...formProps}
       action="#"
       onSubmit={onSubmitForm}
       className={className?.container}

packages/shared/src/contexts/WriteCommentContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import { UseMutateCommentResult } from '../hooks/post/useMutateComment';
+
+interface WriteCommentContextProp {
+  mutateComment: UseMutateCommentResult;
+}
+
+export const WriteCommentContext = createContext<WriteCommentContextProp>({
+  mutateComment: null,
+});
+
+export const useWriteCommentContext = (): WriteCommentContextProp =>
+  useContext(WriteCommentContext);