fix posting

src/components/CaptchaModal.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import useAppStore from '../useAppStore';
 import Modal from 'react-modal';
 import styled from 'styled-components';
@@ -246,18 +246,21 @@ const StyledModal = styled(Modal)`
 
 
 const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => {
-  const { captchaResponse, setCaptchaResponse } = useAppStore(state => state);
+  const { setCaptchaResponse } = useAppStore(state => state);
   const selectedStyle = useAppStore(state => state.selectedStyle);
 
-  const handleCloseModal = () => {
-    closeModal();
+  const responseRef = useRef();
+  const nodeRef = useRef(null);
+
+
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      setCaptchaResponse(responseRef.current.value);
+      closeModal();
+    }
   };
 
-  const handleChallengeResponse = (event) => {
-    setCaptchaResponse(event.target.value);
-  };  
-
-  const nodeRef = React.useRef(null);
 
   return (
     <StyledModal
@@ -272,7 +275,7 @@ const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => {
         <div className="modal-content" ref={nodeRef}>
           <div className="modal-header">
             Challenges for
-            <button className="icon" onClick={handleCloseModal} title="close" />
+            <button className="icon" onClick={() => closeModal()} title="close" />
           </div>
           <div id="form">
             <div>
@@ -287,8 +290,8 @@ const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => {
               type="text" 
               autoComplete='off'
               placeholder="TYPE THE CAPTCHA HERE AND PRESS ENTER" 
-              value={captchaResponse} 
-              onChange={handleChallengeResponse}
+              ref={responseRef}
+              onKeyDown={handleKeyDown}
               autoFocus />
               <img src={captchaImage} alt="captcha" />
             </div>

src/components/views/Board.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect, useRef, Fragment } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Tooltip } from 'react-tooltip';
@@ -34,10 +34,11 @@ const Board = () => {
     showPostFormLink
   } = useAppStore(state => state);
 
-  const [name, setName] = useState('');
-  const [subject, setSubject] = useState('');
-  const [comment, setComment] = useState('');
-  const { publishComment } = usePublishComment();
+  const nameRef = useRef();
+  const subjectRef = useRef();
+  const commentRef = useRef();
+  const linkRef = useRef();
+
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
@@ -46,12 +47,11 @@ const Board = () => {
   const [visible, setVisible] = useState(true);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
   const [selectedFeed, setSelectedFeed] = useState(feed);
-  const { subplebbitAddress } = useParams();  
-  const handleClickForm = useClickForm();
+  const { subplebbitAddress } = useParams();
 
 
   // useEffect(() => {
-  //   console.log(selectedFeed);
+  //   console.log(selectedFeed[3]);
   // }, [selectedFeed]);
 
   // temporary title from JSON, gets subplebbitAddress from URL
@@ -89,7 +89,7 @@ const Board = () => {
       await new Promise(resolve => setTimeout(resolve, 1000));
     }
   };
-  
+
 
   const onChallengeVerification = (challengeVerification) => {
     if (challengeVerification.challengeSuccess === true) {
@@ -103,6 +103,7 @@ const Board = () => {
 
 
   const onChallenge = async (challenges, comment) => {
+    console.log("onChallenge:", challenges, comment)
     let challengeAnswers = [];
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
@@ -114,8 +115,31 @@ const Board = () => {
       await comment.publishChallengeAnswers(challengeAnswers)
     }
   }
-  
 
+
+  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
+  };
+
+
+  const resetFields = () => {
+    nameRef.current.value = '';
+    subjectRef.current.value = '';
+    commentRef.current.value = '';
+    linkRef.current.value = '';
+  };
+
+
+  const { publishComment } = usePublishComment(publishCommentOptions);
+  
+  
   const getChallengeAnswersFromUser = async (challenges) => {
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
@@ -133,6 +157,7 @@ const Board = () => {
             resolve(captchaResponse);
             setIsCaptchaOpen(false);
             document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
           }
         };
 
@@ -162,26 +187,6 @@ const Board = () => {
     navigate(`/${selected}`);
   };
 
-
-  const handlePublishComment = async () => {
-    try {
-      const pendingComment = await publishComment({
-        content: comment,
-        title: subject,
-        subplebbitAddress: selectedAddress,
-        onChallengeVerification,
-        onChallenge,
-        onError: onError,
-      });
-      console.log(`Comment pending with index: ${pendingComment.index}`);
-      setName('');
-      setSubject('');
-      setComment('');
-    } catch (error) {
-      onError(error);
-    }
-  };
-
   // scroll to post when quote is clicked
   function handleQuoteClick(reply, event) {
     event.preventDefault();
@@ -194,7 +199,6 @@ const Board = () => {
   };
 
 
-
   return (
     <Container>
       <CaptchaModal 
@@ -267,12 +271,12 @@ const Board = () => {
       <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
         <div id="post-form-link-desktop">
             [
-              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
             ]
           </div>
           <div id="post-form-link-mobile">
             <span className="btn-wrap">
-              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
             </span>
           </div>
         </PostFormLink>
@@ -281,26 +285,27 @@ const Board = () => {
             <tr data-type="Name">
               <td id="td-name">Name</td>
               <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" />
+                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
               </td>
             </tr>
             <tr data-type="Subject">
               <td>Subject</td>
               <td>
-                <input name="sub" type="text" tabIndex={3} />
-                <input id="post-button" type="submit" value="Post" tabIndex={6} onClick={handlePublishComment} />
+                <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
+                <input id="post-button" type="submit" value="Post" tabIndex={6} 
+                onClick={async () => {await publishComment(); resetFields();}} />
               </td>
             </tr>
             <tr data-type="Comment">
               <td>Comment</td>
               <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" />
+                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
               </td>
             </tr>
             <tr data-type="File">
               <td>Embed File</td>
               <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
+                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
                 <button id="t-help" type="button" onClick={
                   () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
                 } data-tip="Help">?</button>

src/components/views/Catalog.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect, useRef, Fragment } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import InfiniteScroll from 'react-infinite-scroller';
 import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
@@ -32,10 +32,11 @@ const Catalog = () => {
     showPostFormLink
   } = useAppStore(state => state);
 
-  const [name, setName] = useState('');
-  const [subject, setSubject] = useState('');
-  const [comment, setComment] = useState('');
-  const { publishComment } = usePublishComment();
+  const nameRef = useRef();
+  const subjectRef = useRef();
+  const commentRef = useRef();
+  const linkRef = useRef();
+
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
@@ -43,9 +44,8 @@ const Catalog = () => {
   const [visible, setVisible] = useState(true);
   const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
   const { subplebbitAddress } = useParams();
-  const handleClickForm = useClickForm();
-
 
+  // temporary title from JSON, gets subplebbitAddress from URL
   useEffect(() => {
     setSelectedAddress(subplebbitAddress);
     const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
@@ -87,6 +87,7 @@ const Catalog = () => {
 
 
   const onChallenge = async (challenges, comment) => {
+    // console.log("onChallenge:", challenges, comment);
     let challengeAnswers = [];
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
@@ -100,6 +101,29 @@ 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
+  };
+
+
+  const resetFields = () => {
+    nameRef.current.value = '';
+    subjectRef.current.value = '';
+    commentRef.current.value = '';
+    linkRef.current.value = '';
+  };
+
+
+  const { publishComment } = usePublishComment(publishCommentOptions);
+
+
   const getChallengeAnswersFromUser = async (challenges) => {
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
@@ -117,6 +141,7 @@ const Catalog = () => {
             resolve(captchaResponse);
             setIsCaptchaOpen(false);
             document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
           }
         };
 
@@ -130,7 +155,7 @@ const Catalog = () => {
     });
   };
 
-
+  // mobile navbar board select functionality
   const handleSelectChange = (event) => {
     const selected = event.target.value;
     const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
@@ -140,27 +165,6 @@ const Catalog = () => {
   };
 
 
-  const handlePublishComment = async () => {
-    // Event.preventDefault();
-    try {
-      const pendingComment = await publishComment({
-        content: comment,
-        title: subject,
-        subplebbitAddress: selectedAddress,
-        onChallengeVerification,
-        onChallenge,
-        onError: onError,
-      });
-      console.log(`Comment pending with index: ${pendingComment.index}`);
-      setName('');
-      setSubject('');
-      setComment('');
-    } catch (error) {
-      onError(error);
-    }
-  };
-
-
   return (
     <Container>
       <CaptchaModal 
@@ -232,46 +236,47 @@ const Catalog = () => {
         <PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
           <div id="post-form-link-desktop">
             [
-              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
             ]
           </div>
           <div id="post-form-link-mobile">
             <span className="btn-wrap">
-              <a onClick={handleClickForm} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
+              <a onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</a>
             </span>
           </div>
         </PostFormLink>
         <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
         <tbody>
-            <tr data-type="Name">
-              <td id="td-name">Name</td>
-              <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" value={name} onChange={(event) => setName(event.target.value)} />
-              </td>
-            </tr>
-            <tr data-type="Subject">
-              <td>Subject</td>
-              <td>
-                <input name="sub" type="text" tabIndex={3} value={subject} onChange={(event) => setSubject(event.target.value)} />
-                <input id="post-button" type="submit" value="Post" tabIndex={6} onClick={handlePublishComment} />
-              </td>
-            </tr>
-            <tr data-type="Comment">
-              <td>Comment</td>
-              <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" value={comment} onChange={(event) => setComment(event.target.value)}></textarea>
-              </td>
-            </tr>
-            <tr data-type="File">
-              <td>Embed File</td>
-              <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
-                <button id="t-help" type="button" onClick={
-                  () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
-                } data-tip="Help">?</button>
-              </td>
-            </tr>
-          </tbody>
+          <tr data-type="Name">
+            <td id="td-name">Name</td>
+            <td>
+              <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
+            </td>
+          </tr>
+          <tr data-type="Subject">
+            <td>Subject</td>
+            <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();}} />
+            </td>
+          </tr>
+          <tr data-type="Comment">
+            <td>Comment</td>
+            <td>
+              <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
+            </td>
+          </tr>
+          <tr data-type="File">
+            <td>Embed File</td>
+            <td>
+              <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
+              <button id="t-help" type="button" onClick={
+                () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
+              } data-tip="Help">?</button>
+            </td>
+          </tr>
+        </tbody>
         </PostFormTable>
       </PostForm>
       <TopBar selectedStyle={selectedStyle}>

src/components/views/Thread.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
@@ -33,12 +33,12 @@ const Thread = () => {
     showPostForm,
     showPostFormLink
   } = useAppStore(state => state);
-  
 
-  const [name, setName] = useState('');
-  const [subject, setSubject] = useState('');
+  const nameRef = useRef();
+  const commentRef = useRef();
+  const linkRef = useRef();
+
   const [commentContent, setCommentContent] = useState('');
-  const { publishComment } = usePublishComment();
   const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
@@ -93,6 +93,7 @@ const Thread = () => {
 
 
   const onChallenge = async (challenges, comment) => {
+    // console.log("onChallenge:", challenges, comment);
     let challengeAnswers = [];
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
@@ -106,6 +107,28 @@ 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,
+    parentCid: selectedThread,
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError
+  };
+
+
+  const resetFields = () => {
+    nameRef.current.value = '';
+    commentRef.current.value = '';
+    linkRef.current.value = '';
+  };
+
+
+  const { publishComment } = usePublishComment(publishCommentOptions);
+
+
   const getChallengeAnswersFromUser = async (challenges) => {
     return new Promise((resolve, reject) => {
       const imageString = challenges?.challenges[0].challenge;
@@ -123,6 +146,7 @@ const Thread = () => {
             resolve(captchaResponse);
             setIsCaptchaOpen(false);
             document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
           }
         };
 
@@ -146,25 +170,6 @@ const Thread = () => {
   };
 
 
-  const handlePublishComment = async () => {
-    try {
-      const pendingComment = await publishComment({
-        content: commentContent,
-        title: subject,
-        subplebbitAddress: selectedAddress,
-        onChallengeVerification,
-        onChallenge,
-        onError: onError,
-      });
-      console.log(`Comment pending with index: ${pendingComment.index}`);
-      setName('');
-      setSubject('');
-      setCommentContent('');
-    } catch (error) {
-      onError(error);
-    }
-  };
-
   // scroll to post when quote is clicked
   function handleQuoteClick(reply, event) {
     event.preventDefault();
@@ -282,20 +287,21 @@ const Thread = () => {
             <tr data-type="Name">
               <td id="td-name">Name</td>
               <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" value={name} onChange={(event) => setName(event.target.value)} />
-                <input id="post-button" type="submit" value="Post" tabIndex={6} onClick={handlePublishComment} />
+                <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();}} />
               </td>
             </tr>
             <tr data-type="Comment">
               <td>Comment</td>
               <td>
-                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" value={commentContent} onChange={(event) => setCommentContent(event.target.value)}></textarea>
+                <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
               </td>
             </tr>
             <tr data-type="File">
               <td>Embed File</td>
               <td>
-                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
+                <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
                 <button id="t-help" type="button" onClick={
                   () => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")}
                   data-tip="Help"