update posting logic

.env

@@ -0,0 +1,3 @@
+REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT=1
+REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_LOADING_TIME=1000
+REACT_APP_PLEBBIT_REACT_HOOKS_MOCK_CONTENT_DOUBLE_MEDIA=1

src/components/CaptchaModal.jsx

@@ -62,9 +62,9 @@ const CaptchaModal = () => {
             <button className="icon" onClick={() => setIsCaptchaOpen(false)} title="close" />
           </div>
           <div id="form">
-            {pendingComment.displayName ? (
+            {pendingComment.author?.displayName ? (
               <div>
-                <input id="field" type="text" placeholder={pendingComment.displayName} disabled />
+                <input id="field" type="text" placeholder={pendingComment.author?.displayName} disabled />
               </div>
             ) : null}
             {pendingComment.title ? (

src/components/ReplyModal.jsx

@@ -111,7 +111,9 @@ const ReplyModal = ({ isOpen, closeModal }) => {
 
     setPublishCommentOptions((prevPublishCommentOptions) => ({
       ...prevPublishCommentOptions,
-      displayName: nameRef.current.value || undefined,
+      author: {
+        displayName: nameRef.current.value || undefined,
+      },
       content: commentRef.current.value || undefined,
       link: linkRef.current.value || undefined,
       parentCid: selectedParentCid,

src/components/views/Board.jsx

@@ -98,7 +98,6 @@ const Board = () => {
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
       setSuccessMessage('Challenge success.', {publishedCid: challengeVerification.publication?.cid});
-      console.log("challenge success", challengeVerification.publication?.cid, challengeVerification)
       navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`);
     }
     else if (challengeVerification.challengeSuccess === false) {
@@ -158,7 +157,9 @@ const Board = () => {
 
     setPublishCommentOptions((prevPublishCommentOptions) => ({
       ...prevPublishCommentOptions,
-      displayName: nameRef.current.value || undefined,
+      author: {
+        displayName: nameRef.current.value || undefined,
+      },
       title: subjectRef.current.value || undefined,
       content: commentRef.current.value || undefined,
       link: linkRef.current.value || undefined,

src/components/views/Catalog.jsx

@@ -19,7 +19,7 @@ import useSuccess from '../../hooks/useSuccess';
 
 const Catalog = () => {
   const {
-    captchaResponse, setCaptchaResponse,
+    setCaptchaResponse,
     setChallengesArray,
     defaultSubplebbits,
     setIsCaptchaOpen,
@@ -38,8 +38,6 @@ const Catalog = () => {
   const commentRef = useRef();
   const linkRef = useRef();
 
-  const onChallengeVerificationRef = useRef();
-
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
@@ -84,10 +82,12 @@ const Catalog = () => {
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
       setSuccessMessage('Challenge success.', {publishedCid: challengeVerification.publication?.cid});
+      console.log("challenge success", challengeVerification.publication?.cid, challengeVerification)
       navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`);
     }
     else if (challengeVerification.challengeSuccess === false) {
       setErrorMessage('Challenge failed.', {reason: challengeVerification.reason, errors: challengeVerification.errors});
+      console.log("challenge failed", challengeVerification.reason, challengeVerification.errors)
       setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again.");
     }
   };
@@ -107,17 +107,17 @@ const Catalog = () => {
       await comment.publishChallengeAnswers(challengeAnswers)
     }
   };
-
   
+
   const [publishCommentOptions, setPublishCommentOptions] = useState({
     subplebbitAddress: selectedAddress,
     onChallenge,
-    onChallengeVerification: onChallengeVerificationRef.current,
+    onChallengeVerification,
     onError: (error) => {
       setErrorMessage(error);
     },
   });
-
+  
 
   const { publishComment, index } = usePublishComment(publishCommentOptions);
 
@@ -127,11 +127,8 @@ const Catalog = () => {
       setSuccessMessage('Comment pending with index ' + index + '.');
     }
   }, [index]);
+
   
-
-  onChallengeVerificationRef.current = onChallengeVerification;
-
-
   const resetFields = () => {
     nameRef.current.value = '';
     subjectRef.current.value = '';
@@ -140,21 +137,14 @@ const Catalog = () => {
   };
 
 
-  useEffect(() => {
-    setPublishCommentOptions((prevPublishCommentOptions) => ({
-      ...prevPublishCommentOptions,
-      subplebbitAddress: selectedAddress,
-      onChallengeVerification: onChallengeVerificationRef.current,
-    }));
-  }, [selectedAddress]);
-
-
   const handleSubmit = async (event) => {
     event.preventDefault();
 
     setPublishCommentOptions((prevPublishCommentOptions) => ({
       ...prevPublishCommentOptions,
-      displayName: nameRef.current.value || undefined,
+      author: {
+        displayName: nameRef.current.value || undefined,
+      },
       title: subjectRef.current.value || undefined,
       content: commentRef.current.value || undefined,
       link: linkRef.current.value || undefined,
@@ -184,9 +174,10 @@ const Catalog = () => {
       challengeImg.onload = () => {
         setIsCaptchaOpen(true);
   
-        const handleKeyDown = (event) => {
+        const handleKeyDown = async (event) => {
           if (event.key === 'Enter') {
-            resolve(captchaResponse);
+            const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
+            resolve(currentCaptchaResponse);
             setIsCaptchaOpen(false);
             document.removeEventListener('keydown', handleKeyDown);
             event.preventDefault();

src/components/views/Pending.jsx

@@ -223,18 +223,18 @@ const Pending = () => {
                           </span>) 
                         : null}
                       &nbsp;
-                      {comment.displayName
+                      {comment.author?.displayName
-                        ? comment.displayName.length > 20
+                        ? comment.author?.displayName.length > 20
                         ? <>
                             <span key={`n-${"pending"}`} className="name"
                             data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.displayName}
+                            data-tooltip-content={comment.author?.displayName}
                             data-tooltip-place="top">
-                              {comment.displayName.slice(0, 20) + " (...)"}
+                              {comment.author?.displayName.slice(0, 20) + " (...)"}
                             </span>
                           </> 
                           : <span key={`n-${"pending"}`} className="name">
-                            {comment.displayName}</span>
+                            {comment.author?.displayName}</span>
                         : <span key={`n-${"pending"}`} className="name">
                           Anonymous</span>}
                         &nbsp;
@@ -269,18 +269,18 @@ const Pending = () => {
                     <div key={`mob-pi-${"pending"}`} className="post-info-mobile">
                       <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${"pending"}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
                       <span className="name-block-mobile">
-                        {comment.displayName
+                        {comment.author?.displayName
-                        ? comment.displayName.length > 15
+                        ? comment.author?.displayName.length > 15
                         ? <>
                             <span key={`mob-n-${"pending"}`} className="name-mobile"
                             data-tooltip-id="tooltip"
-                            data-tooltip-content={comment.displayName}
+                            data-tooltip-content={comment.author?.displayName}
                             data-tooltip-place="top">
-                              {comment.displayName.slice(0, 15) + " (...)"}
+                              {comment.author?.displayName.slice(0, 15) + " (...)"}
                             </span>
                           </> 
                           : <span key={`mob-n-${"pending"}`} className="name-mobile">
-                            {comment.displayName}</span>
+                            {comment.author?.displayName}</span>
                         : <span key={`mob-n-${"pending"}`} className="name-mobile">
                           Anonymous</span>}
                         &nbsp;