refactor publish post/reply stores, naming was confusing

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

@@ -1,111 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import {
-  Comment,
-  PublishCommentOptions,
-  setAccount,
-  useAccount,
-  useAccountComment,
-  useComment,
-  useEditedComment,
-  usePublishComment,
-  useSubplebbit,
-} from '@plebbit/plebbit-react-hooks';
-import { create } from 'zustand';
-import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
+import { Comment, setAccount, useAccount, useAccountComment, useComment, useEditedComment, usePublishComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { getHasThumbnail, getLinkMediaInfo } from '../../lib/utils/media-utils';
 import { formatMarkdown } from '../../lib/utils/post-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isDescriptionView, isPostPageView, isRulesView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import usePublishReply from '../../hooks/use-publish-reply';
-import useChallengesStore from '../../stores/use-challenges-store';
 import styles from './post-form.module.css';
 import _ from 'lodash';
 import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useAnonMode from '../../hooks/use-anon-mode';
-
-type SubmitState = {
-  author?: any | undefined;
-  displayName?: string | undefined;
-  signer?: any | undefined;
-  subplebbitAddress: string | undefined;
-  title: string | undefined;
-  content: string | undefined;
-  link: string | undefined;
-  spoiler: boolean | undefined;
-  publishCommentOptions: PublishCommentOptions;
-  setSubmitStore: (data: Partial<SubmitState>) => void;
-  resetSubmitStore: () => void;
-};
-
-const { addChallenge } = useChallengesStore.getState();
-
-const useSubmitStore = create<SubmitState>((set) => ({
-  author: undefined,
-  displayName: undefined,
-  signer: undefined,
-  subplebbitAddress: undefined,
-  title: undefined,
-  content: undefined,
-  link: undefined,
-  spoiler: undefined,
-  publishCommentOptions: {},
-  setSubmitStore: ({ author, displayName, signer, subplebbitAddress, title, content, link, spoiler }) =>
-    set((state) => {
-      const nextState = { ...state };
-      if (author !== undefined) nextState.author = author;
-      if (displayName !== undefined) nextState.displayName = displayName;
-      if (signer !== undefined) nextState.signer = signer;
-      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;
-      if (spoiler !== undefined) nextState.spoiler = spoiler || undefined;
-
-      const publishCommentOptions: PublishCommentOptions = {
-        subplebbitAddress: nextState.subplebbitAddress,
-        title: nextState.title,
-        content: nextState.content,
-        link: nextState.link,
-        spoiler: nextState.spoiler,
-        onChallenge: (...args: any) => addChallenge(args),
-        onChallengeVerification: alertChallengeVerificationFailed,
-        onError: (error: Error) => {
-          console.error(error);
-          alert(error.message);
-        },
-      };
-
-      if (nextState.signer) {
-        publishCommentOptions.signer = nextState.signer;
-      }
-
-      if (nextState.author || nextState.displayName) {
-        publishCommentOptions.author = {
-          ...nextState.author,
-          displayName: nextState.displayName,
-        };
-      }
-
-      nextState.publishCommentOptions = publishCommentOptions;
-      return nextState;
-    }),
-  resetSubmitStore: () =>
-    set({
-      author: undefined,
-      displayName: undefined,
-      signer: undefined,
-      subplebbitAddress: undefined,
-      title: undefined,
-      content: undefined,
-      link: undefined,
-      spoiler: undefined,
-      publishCommentOptions: {},
-    }),
-}));
+import usePublishPostStore from '../../stores/use-publish-post-store';
 
 export const LinkTypePreviewer = ({ link }: { link: string }) => {
   const { t } = useTranslation();
@@ -128,14 +36,14 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const author = account?.author || {};
   const { displayName } = author || {};
   const [url, setUrl] = useState('');
-  const { publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore();
+  const { publishCommentOptions, setPublishPostStore, resetPublishPostStore } = usePublishPostStore();
   const { index, publishComment } = usePublishComment(publishCommentOptions);
 
   useEffect(() => {
     if (displayName) {
-      setSubmitStore({ displayName });
+      setPublishPostStore({ displayName });
     }
-  }, [displayName, setSubmitStore]);
+  }, [displayName, setPublishPostStore]);
 
   const textRef = useRef<HTMLTextAreaElement>(null);
   const urlRef = useRef<HTMLInputElement>(null);
@@ -170,7 +78,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
       if (!hasCalledAnonAddressRef.current) {
         hasCalledAnonAddressRef.current = true;
         const newSigner = (await getNewSigner()) || {};
-        setSubmitStore({
+        setPublishPostStore({
           signer: newSigner,
           author: {
             address: newSigner.address,
@@ -179,7 +87,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
         });
       }
     } else {
-      setSubmitStore({
+      setPublishPostStore({
         signer: undefined,
         author: {
           address: account?.author?.address,
@@ -187,7 +95,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
         },
       });
     }
-  }, [anonMode, getNewSigner, account, setSubmitStore, displayName]);
+  }, [anonMode, getNewSigner, account, setPublishPostStore, displayName]);
 
   const onPublishPost = () => {
     const currentTitle = subjectRef.current?.value.trim() || '';
@@ -228,19 +136,19 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
   useEffect(() => {
     if (subplebbitAddress) {
-      setSubmitStore({ subplebbitAddress });
+      setPublishPostStore({ subplebbitAddress });
     }
-  }, [subplebbitAddress, setSubmitStore]);
+  }, [subplebbitAddress, setPublishPostStore]);
 
   // redirect to pending page when pending comment is created
   const navigate = useNavigate();
   useEffect(() => {
     if (typeof index === 'number') {
-      resetSubmitStore();
+      resetPublishPostStore();
       resetFields();
       navigate(`/profile/${index}`);
     }
-  }, [index, resetSubmitStore, navigate]);
+  }, [index, resetPublishPostStore, navigate]);
 
   // in post page, publish a reply to the post
   const isInPostView = isPostPageView(location.pathname, params);
@@ -274,7 +182,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
 
   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const formattedContent = formatMarkdown(e.target.value);
-    isInPostView ? setPublishReplyOptions({ content: formattedContent }) : setSubmitStore({ content: formattedContent });
+    isInPostView ? setPublishReplyOptions({ content: formattedContent }) : setPublishPostStore({ content: formattedContent });
   };
 
   const onPublishReply = () => {
@@ -327,7 +235,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
                 if (isInPostView) {
                   setPublishReplyOptions({ displayName: e.target.value || undefined });
                 } else {
-                  setSubmitStore({ displayName: e.target.value || undefined });
+                  setPublishPostStore({ displayName: e.target.value || undefined });
                 }
               }}
             />
@@ -342,7 +250,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
                 type='text'
                 ref={subjectRef}
                 onChange={(e) => {
-                  setSubmitStore({ title: e.target.value || undefined });
+                  setPublishPostStore({ title: e.target.value || undefined });
                 }}
               />
               <button onClick={onPublishPost}>{t('post')}</button>
@@ -366,7 +274,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
               ref={urlRef}
               onChange={(e) => {
                 setUrl(e.target.value);
-                isInPostView ? setPublishReplyOptions({ link: e.target.value || undefined }) : setSubmitStore({ link: e.target.value || undefined });
+                isInPostView ? setPublishReplyOptions({ link: e.target.value || undefined }) : setPublishPostStore({ link: e.target.value || undefined });
               }}
             />
             <span className={styles.linkType}> {url && <LinkTypePreviewer link={url} />}</span>
@@ -379,7 +287,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
             <label>
               <input
                 type='checkbox'
-                onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setSubmitStore({ spoiler: e.target.checked }))}
+                onChange={(e) => (isInPostView ? setPublishReplyOptions({ spoiler: e.target.checked }) : setPublishPostStore({ spoiler: e.target.checked }))}
               />
               {_.capitalize(t('spoiler'))}?
             </label>
@@ -390,7 +298,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
           <tr>
             <td>{t('board')}</td>
             <td>
-              <select onChange={(e) => setSubmitStore({ subplebbitAddress: e.target.value })} value={subplebbitAddress}>
+              <select onChange={(e) => setPublishPostStore({ subplebbitAddress: e.target.value })} value={subplebbitAddress}>
                 <option value=''>{t('choose_one')}</option>
                 {isInAllView &&
                   defaultSubplebbitAddresses.map((address: string) => (