fix catalog and thread onChallengeVerification

package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.21.3",
     "@babel/plugin-syntax-flow": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.21.0",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#6de131a2e9f23578efd9faf4670d2cc43ce6d5ba",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#33fca8ef1cfc78e5c16d7fcbe7effbeebeb082c8",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",

src/components/views/Board.jsx

@@ -41,6 +41,8 @@ const Board = () => {
   const commentRef = useRef();
   const linkRef = useRef();
 
+  const onChallengeVerificationRef = useRef();
+
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -92,12 +94,10 @@ const Board = () => {
   };
 
 
-  const onChallengeVerificationRef = useRef();
-
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication.cid});
+      setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication?.cid});
-      navigate(`/p/${selectedAddress}/c/${challengeVerification.publication.cid}`);
+      navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`);
     }
     else if (challengeVerification.challengeSuccess === false) {
       setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
@@ -105,6 +105,7 @@ const Board = () => {
     }
   };
 
+
   onChallengeVerificationRef.current = onChallengeVerification;
 
 
@@ -142,6 +143,7 @@ const Board = () => {
     },
   });
 
+  
   useEffect(() => {
     setPublishCommentOptions((prevPublishCommentOptions) => ({
       ...prevPublishCommentOptions,

src/components/views/Catalog.jsx

@@ -38,6 +38,8 @@ const Catalog = () => {
   const commentRef = useRef();
   const linkRef = useRef();
 
+  const onChallengeVerificationRef = useRef();
+
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
@@ -82,15 +84,17 @@ const Catalog = () => {
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication.cid});
+      setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication?.cid});
-      setSelectedThread(challengeVerification.publication.cid);
+      navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`);
-      navigate(`/p/${selectedAddress}/c/${challengeVerification.publication.cid}`);
     }
     else if (challengeVerification.challengeSuccess === false) {
       setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
       setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again.");
     }
-  }
+  };
+
+  
+  onChallengeVerificationRef.current = onChallengeVerification;
 
 
   const onChallenge = async (challenges, comment) => {
@@ -110,20 +114,6 @@ const Catalog = () => {
   }
 
 
-  const publishCommentOptions = {
-    displayName: nameRef.current ? nameRef.current.value : undefined,
-    title: subjectRef.current ? subjectRef.current.value : undefined,
-    content: commentRef.current ? commentRef.current.value : undefined,
-    link: linkRef.current ? linkRef.current.value : undefined,
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setErrorMessage(error);
-    }
-  };
-
-
   const resetFields = () => {
     nameRef.current.value = '';
     subjectRef.current.value = '';
@@ -131,10 +121,51 @@ const Catalog = () => {
     linkRef.current.value = '';
   };
 
+  
+  const [publishCommentOptions, setPublishCommentOptions] = useState({
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification: onChallengeVerificationRef.current,
+    onError: (error) => {
+      setErrorMessage(error);
+    },
+  });
+
+  useEffect(() => {
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      subplebbitAddress: selectedAddress,
+      onChallengeVerification: onChallengeVerificationRef.current,
+    }));
+  }, [selectedAddress]);
+
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      displayName: nameRef.current.value || undefined,
+      title: subjectRef.current.value || undefined,
+      content: commentRef.current.value || undefined,
+      link: linkRef.current.value || undefined,
+    }));
+  };
+  
+  
+  useEffect(() => {
+    if (publishCommentOptions.content) {
+      (async () => {
+        await publishComment();
+        resetFields();
+      })();
+    }
+  }, [publishCommentOptions]);
+
 
   const { publishComment } = usePublishComment(publishCommentOptions);
-
+  
-
+  
   const getChallengeAnswersFromUser = async (challenges) => {
     setChallengesArray(challenges);
     
@@ -265,7 +296,7 @@ const Catalog = () => {
               <td>
                 <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
                 <input id="post-button" type="submit" value="Post" tabIndex={6} 
-                onClick={async () => {await publishComment(); resetFields();}} />
+                onClick={handleSubmit} />
               </td>
             </tr>
             <tr data-type="Comment">

src/components/views/Thread.jsx

@@ -40,6 +40,8 @@ const Thread = () => {
   const commentRef = useRef();
   const linkRef = useRef();
 
+  const onChallengeVerificationRef = useRef();
+
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -83,15 +85,17 @@ const Thread = () => {
   
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
-      setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication.cid});
+      setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication?.cid});
-      setSelectedThread(challengeVerification.publication.cid);
+      navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`);
-      navigate(`/p/${selectedAddress}/c/${challengeVerification.publication.cid}`);
     }
     else if (challengeVerification.challengeSuccess === false) {
       setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
       setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again.");
     }
-  }
+  };
+
+
+  onChallengeVerificationRef.current = onChallengeVerification;
 
 
   const onChallenge = async (challenges, comment) => {
@@ -111,25 +115,53 @@ const Thread = () => {
   }
 
 
-  const publishCommentOptions = {
-    displayName: nameRef.current ? nameRef.current.value : undefined,
-    content: commentRef.current ? commentRef.current.value : undefined,
-    link: linkRef.current ? linkRef.current.value : undefined,
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setErrorMessage(error);
-    }
-  };
-
-
   const resetFields = () => {
     nameRef.current.value = '';
     commentRef.current.value = '';
     linkRef.current.value = '';
   };
 
+  
+  const [publishCommentOptions, setPublishCommentOptions] = useState({
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification: onChallengeVerificationRef.current,
+    onError: (error) => {
+      setErrorMessage(error);
+    },
+  });
+
+
+  useEffect(() => {
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      subplebbitAddress: selectedAddress,
+      onChallengeVerification: onChallengeVerificationRef.current,
+    }));
+  }, [selectedAddress]);
+
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      displayName: nameRef.current.value || undefined,
+      content: commentRef.current.value || undefined,
+      link: linkRef.current.value || undefined,
+    }));
+  };
+  
+  
+  useEffect(() => {
+    if (publishCommentOptions.content) {
+      (async () => {
+        await publishComment();
+        resetFields();
+      })();
+    }
+  }, [publishCommentOptions]);
+
 
   const { publishComment } = usePublishComment(publishCommentOptions);
 
@@ -290,7 +322,7 @@ const Thread = () => {
               <td>
                 <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
                 <input id="post-button" type="submit" value="Post" tabIndex={6} 
-                onClick={async () => {await publishComment(); resetFields();}} />
+                onClick={handleSubmit} />
               </td>
             </tr>
             <tr data-type="Comment">

yarn.lock

@@ -2417,9 +2417,9 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#d5f312ef577dc4a845e15d1f87c4273cb2195c08":
+"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#c90a5a2920f763a32bedc0584606b358d83600e5":
   version "0.0.3"
-  resolved "https://github.com/plebbit/plebbit-js.git#d5f312ef577dc4a845e15d1f87c4273cb2195c08"
+  resolved "https://github.com/plebbit/plebbit-js.git#c90a5a2920f763a32bedc0584606b358d83600e5"
   dependencies:
     "@keyv/sqlite" "3.6.2"
     "@plebbit/plebbit-logger" "github:plebbit/plebbit-logger"
@@ -2444,8 +2444,10 @@
     knex "2.3.0"
     libp2p-crypto "0.21.2"
     limiter "2.1.0"
+    localforage "1.10.0"
     lodash-es "4.17.21"
     open-graph-scraper "5.2.3"
+    p-limit "3.1.0"
     peer-id "0.16.0"
     proper-lockfile "github:plebbit/node-proper-lockfile"
     retry "0.13.1"
@@ -2510,11 +2512,11 @@
   dependencies:
     debug "4.3.3"
 
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#47c89c104bf3f16f790282fbdf26f672c395df52":
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#33fca8ef1cfc78e5c16d7fcbe7effbeebeb082c8":
   version "0.0.1"
-  resolved "https://github.com/plebbit/plebbit-react-hooks.git#47c89c104bf3f16f790282fbdf26f672c395df52"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#33fca8ef1cfc78e5c16d7fcbe7effbeebeb082c8"
   dependencies:
-    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#d5f312ef577dc4a845e15d1f87c4273cb2195c08"
+    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#c90a5a2920f763a32bedc0584606b358d83600e5"
     "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
     assert "2.0.0"
     ethers "5.6.9"
@@ -9694,6 +9696,13 @@ p-fifo@^1.0.0:
     fast-fifo "^1.0.0"
     p-defer "^3.0.0"
 
+p-limit@3.1.0, p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -9701,13 +9710,6 @@ p-limit@^2.0.0, p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
-p-limit@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
-  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
-  dependencies:
-    yocto-queue "^0.1.0"
-
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"