updated catalog and thread for pending

src/components/views/Catalog.jsx

@@ -20,9 +20,11 @@ import useSuccess from '../../hooks/useSuccess';
 const Catalog = () => {
   const {
     captchaResponse, setCaptchaResponse,
+    setChallengesArray,
     defaultSubplebbits,
     setIsCaptchaOpen,
     isSettingsOpen, setIsSettingsOpen,
+    setPendingComment,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
@@ -36,7 +38,6 @@ const Catalog = () => {
   const commentRef = useRef();
   const linkRef = useRef();
 
-  const [setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
@@ -48,6 +49,7 @@ const Catalog = () => {
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
 
+
   // temporary title from JSON, gets subplebbitAddress from URL
   useEffect(() => {
     setSelectedAddress(subplebbitAddress);
@@ -80,17 +82,21 @@ 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}`);
     }
     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.");
     }
-  };
+  }
 
 
   const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
     let challengeAnswers = [];
+    navigate(`/p/${selectedAddress}/c/pending`)
     
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
@@ -101,7 +107,7 @@ const Catalog = () => {
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
     }
-  };
+  }
 
 
   const publishCommentOptions = {
@@ -112,6 +118,9 @@ const Catalog = () => {
     subplebbitAddress: selectedAddress,
     onChallenge,
     onChallengeVerification,
+    onError: (error) => {
+      setErrorMessage(error);
+    }
   };
 
 
@@ -127,6 +136,8 @@ const Catalog = () => {
 
 
   const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
       const imageSource = `data:image/png;base64,${imageString}`;
@@ -135,11 +146,9 @@ const Catalog = () => {
   
       challengeImg.onload = () => {
         setIsCaptchaOpen(true);
-        setCaptchaImage(imageSource);
   
         const handleKeyDown = (event) => {
           if (event.key === 'Enter') {
-            setCaptchaImage('');
             resolve(captchaResponse);
             setIsCaptchaOpen(false);
             document.removeEventListener('keydown', handleKeyDown);
@@ -152,7 +161,7 @@ const Catalog = () => {
       };
   
       challengeImg.onerror = () => {
-        reject(setErrorMessage('Could not load challenge image'));
+        reject(setErrorMessage('Could not load challenges'));
       };
     });
   };

src/components/views/Thread.jsx

@@ -23,9 +23,11 @@ import useSuccess from '../../hooks/useSuccess';
 const Thread = () => {
   const {
     captchaResponse, setCaptchaResponse,
+    setChallengesArray,
     defaultSubplebbits,
     setIsCaptchaOpen,
     isSettingsOpen, setIsSettingsOpen,
+    setPendingComment,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     selectedThread, setSelectedThread,
@@ -39,7 +41,6 @@ const Thread = () => {
   const linkRef = useRef();
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
-  const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
@@ -82,17 +83,21 @@ 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}`);
     }
     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.");
     }
-  };
+  }
 
 
   const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
     let challengeAnswers = [];
+    navigate(`/p/${selectedAddress}/c/pending`)
     
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
@@ -103,17 +108,19 @@ const Thread = () => {
     if (challengeAnswers) {
       await comment.publishChallengeAnswers(challengeAnswers)
     }
-  };
+  }
 
 
   const publishCommentOptions = {
     displayName: nameRef.current ? nameRef.current.value : undefined,
     content: commentRef.current ? commentRef.current.value : undefined,
     link: linkRef.current ? linkRef.current.value : undefined,
-    parentCid: selectedThread,
     subplebbitAddress: selectedAddress,
     onChallenge,
     onChallengeVerification,
+    onError: (error) => {
+      setErrorMessage(error);
+    }
   };
 
 
@@ -128,6 +135,8 @@ const Thread = () => {
 
 
   const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
       const imageSource = `data:image/png;base64,${imageString}`;
@@ -136,11 +145,9 @@ const Thread = () => {
   
       challengeImg.onload = () => {
         setIsCaptchaOpen(true);
-        setCaptchaImage(imageSource);
   
         const handleKeyDown = (event) => {
           if (event.key === 'Enter') {
-            setCaptchaImage('');
             resolve(captchaResponse);
             setIsCaptchaOpen(false);
             document.removeEventListener('keydown', handleKeyDown);
@@ -153,7 +160,7 @@ const Thread = () => {
       };
   
       challengeImg.onerror = () => {
-        reject(setErrorMessage('Could not load challenge image'));
+        reject(setErrorMessage('Could not load challenges'));
       };
     });
   };