feat: add challenge modal

src/components/post-form/post-form.tsx

@@ -1,11 +1,55 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
-import { useAccount, useComment } from '@plebbit/plebbit-react-hooks';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { PublishCommentOptions, setAccount, useAccount, useAccountComment, useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
+import { create } from 'zustand';
+import styles from './post-form.module.css';
+import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import { getLinkMediaInfo } from '../../lib/utils/media-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isDescriptionView, isPostPageView, isRulesView } from '../../lib/utils/view-utils';
-import styles from './post-form.module.css';
+import challengesStore from '../../hooks/use-challenges';
+
+type SubmitState = {
+  subplebbitAddress: string | undefined;
+  title: string | undefined;
+  content: string | undefined;
+  link: string | undefined;
+  publishCommentOptions: PublishCommentOptions;
+  setSubmitStore: (data: Partial<SubmitState>) => void;
+  resetSubmitStore: () => void;
+};
+
+const { addChallenge } = challengesStore.getState();
+
+const useSubmitStore = create<SubmitState>((set) => ({
+  subplebbitAddress: undefined,
+  title: undefined,
+  content: undefined,
+  link: undefined,
+  publishCommentOptions: {},
+  setSubmitStore: ({ subplebbitAddress, title, content, link }) =>
+    set((state) => {
+      const nextState = { ...state };
+      if (subplebbitAddress !== undefined) nextState.subplebbitAddress = subplebbitAddress;
+      if (title !== undefined) nextState.title = title || undefined;
+      if (content !== undefined) nextState.content = content || undefined;
+      if (link !== undefined) nextState.link = link || undefined;
+
+      nextState.publishCommentOptions = {
+        ...nextState,
+        onChallenge: (...args: any) => addChallenge(args),
+        onChallengeVerification: alertChallengeVerificationFailed,
+        onError: (error: Error) => {
+          console.error(error);
+          let errorMessage = error.message;
+          alert(errorMessage);
+        },
+      };
+      return nextState;
+    }),
+  resetSubmitStore: () => set({ subplebbitAddress: undefined, title: undefined, content: undefined, link: undefined, publishCommentOptions: {} }),
+}));
 
 const LinkTypePreviewer = ({ link }: { link: string }) => {
   const mediaInfo = getLinkMediaInfo(link);
@@ -14,9 +58,44 @@ const LinkTypePreviewer = ({ link }: { link: string }) => {
 
 const PostFormTable = () => {
   const account = useAccount();
-  const { displayName } = account || {};
+  const { displayName } = account?.author || {};
 
-  const [link, setLink] = useState('');
+  const [url, setUrl] = useState('');
+
+  const { title, content, link, publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore();
+
+  const { index, publishComment } = usePublishComment(publishCommentOptions);
+
+  const onPublish = () => {
+    if (!title && !content && !link) {
+      alert(`Cannot post empty comment`);
+      return;
+    }
+    if (link && !isValidURL(link)) {
+      alert(`Invalid link`);
+      return;
+    }
+
+    publishComment();
+  };
+
+  const params = useParams();
+  const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
+  const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
+  useEffect(() => {
+    if (subplebbitAddress) {
+      setSubmitStore({ subplebbitAddress });
+    }
+  }, [subplebbitAddress, setSubmitStore]);
+
+  // redirect to pending page when pending comment is created
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (typeof index === 'number') {
+      resetSubmitStore();
+      navigate(`/profile/${index}`);
+    }
+  }, [index, resetSubmitStore, navigate]);
 
   return (
     <table className={styles.postFormTable}>
@@ -24,30 +103,44 @@ const PostFormTable = () => {
         <tr>
           <td>Name</td>
           <td>
-            <input type='text' placeholder={!displayName ? 'Anonymous' : undefined} defaultValue={displayName || undefined} />
+            <input
+              type='text'
+              placeholder={!displayName ? 'Anonymous' : undefined}
+              defaultValue={displayName || undefined}
+              onChange={(e) => setAccount({ ...account, author: { ...account?.author, displayName: e.target.value } })}
+            />
           </td>
         </tr>
         <tr>
           <td>Subject</td>
           <td>
-            <input type='text' />
-            <button>Post</button>
+            <input type='text' onChange={(e) => setSubmitStore({ title: e.target.value })} />
+            <button onClick={onPublish}>Post</button>
           </td>
         </tr>
         <tr>
           <td>Comment</td>
           <td>
-            <textarea cols={48} rows={4} wrap='soft' />
+            <textarea cols={48} rows={4} wrap='soft' onChange={(e) => setSubmitStore({ content: e.target.value })} />
           </td>
         </tr>
         <tr>
           <td>Link</td>
           <td>
-            <input type='text' onChange={(e) => setLink(e.target.value)} />
+            <input
+              type='text'
+              autoCorrect='off'
+              autoComplete='off'
+              spellCheck='false'
+              onChange={(e) => {
+                setUrl(e.target.value);
+                setSubmitStore({ link: e.target.value });
+              }}
+            />
             <span className={styles.linkType}>
-              {link && (
+              {url && (
                 <>
-                  (<LinkTypePreviewer link={link} />)
+                  (<LinkTypePreviewer link={url} />)
                 </>
               )}
             </span>
@@ -66,9 +159,7 @@ const PostForm = () => {
   const isInDescriptionView = isDescriptionView(location.pathname, params);
   const isInRulesView = isRulesView(location.pathname, params);
 
-  const { subplebbitAddress, commentCid } = params || {};
-
-  const comment = useComment({ commentCid });
+  const comment = useComment({ commentCid: useParams().commentCid });
   const { deleted, locked, removed } = comment || {};
   const isThreadClosed = deleted || locked || removed || isInDescriptionView || isInRulesView;