External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated catalog and thread for pending

Browse Source
This commit is contained in:
plebbitor
2023-04-10 21:34:37 +02:00
parent 3a3b611d73
commit 8f24b70878
2 changed files with 64 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/Catalog.jsx
+48 -39
View File
@@ -20,9 +20,11 @@ import useSuccess from '../../hooks/useSuccess';
const Catalog = () => { const Catalog = () => {
const { const {
captchaResponse, setCaptchaResponse, captchaResponse, setCaptchaResponse,
setChallengesArray,
defaultSubplebbits, defaultSubplebbits,
setIsCaptchaOpen, setIsCaptchaOpen,
isSettingsOpen, setIsSettingsOpen, isSettingsOpen, setIsSettingsOpen,
setPendingComment,
selectedAddress, setSelectedAddress, selectedAddress, setSelectedAddress,
selectedStyle, selectedStyle,
setSelectedThread, setSelectedThread,
@@ -36,7 +38,6 @@ const Catalog = () => {
const commentRef = useRef(); const commentRef = useRef();
const linkRef = useRef(); const linkRef = useRef();
const [setCaptchaImage] = useState('');
const navigate = useNavigate(); const navigate = useNavigate();
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
@@ -48,6 +49,7 @@ const Catalog = () => {
useError(errorMessage, [errorMessage]); useError(errorMessage, [errorMessage]);
useSuccess(successMessage, [successMessage]); useSuccess(successMessage, [successMessage]);
// temporary title from JSON, gets subplebbitAddress from URL // temporary title from JSON, gets subplebbitAddress from URL
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
@@ -80,18 +82,22 @@ const Catalog = () => {
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { 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) { else if (challengeVerification.challengeSuccess === false) {
setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again."); setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again.");
} }
}; }
const onChallenge = async (challenges, comment) => { const onChallenge = async (challenges, comment) => {
setPendingComment(comment);
let challengeAnswers = []; let challengeAnswers = [];
navigate(`/p/${selectedAddress}/c/pending`)
try { try {
challengeAnswers = await getChallengeAnswersFromUser(challenges) challengeAnswers = await getChallengeAnswersFromUser(challenges)
} }
@@ -101,7 +107,7 @@ const Catalog = () => {
if (challengeAnswers) { if (challengeAnswers) {
await comment.publishChallengeAnswers(challengeAnswers) await comment.publishChallengeAnswers(challengeAnswers)
} }
}; }
const publishCommentOptions = { const publishCommentOptions = {
@@ -112,6 +118,9 @@ const Catalog = () => {
subplebbitAddress: selectedAddress, subplebbitAddress: selectedAddress,
onChallenge, onChallenge,
onChallengeVerification, onChallengeVerification,
onError: (error) => {
setErrorMessage(error);
}
}; };
@@ -127,6 +136,8 @@ const Catalog = () => {
const getChallengeAnswersFromUser = async (challenges) => { const getChallengeAnswersFromUser = async (challenges) => {
setChallengesArray(challenges);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const imageString = challenges?.challenges[0].challenge; const imageString = challenges?.challenges[0].challenge;
const imageSource = `data:image/png;base64,${imageString}`; const imageSource = `data:image/png;base64,${imageString}`;
@@ -135,11 +146,9 @@ const Catalog = () => {
challengeImg.onload = () => { challengeImg.onload = () => {
setIsCaptchaOpen(true); setIsCaptchaOpen(true);
setCaptchaImage(imageSource);
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
setCaptchaImage('');
resolve(captchaResponse); resolve(captchaResponse);
setIsCaptchaOpen(false); setIsCaptchaOpen(false);
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keydown', handleKeyDown);
@@ -152,7 +161,7 @@ const Catalog = () => {
}; };
challengeImg.onerror = () => { challengeImg.onerror = () => {
reject(setErrorMessage('Could not load challenge image')); reject(setErrorMessage('Could not load challenges'));
}; };
}); });
}; };
@@ -244,37 +253,37 @@ const Catalog = () => {
</div> </div>
</PostFormLink> </PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form"> <PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
<tbody> <tbody>
<tr data-type="Name"> <tr data-type="Name">
<td id="td-name">Name</td> <td id="td-name">Name</td>
<td> <td>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} /> <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
</td> </td>
</tr> </tr>
<tr data-type="Subject"> <tr data-type="Subject">
<td>Subject</td> <td>Subject</td>
<td> <td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/> <input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
<input id="post-button" type="submit" value="Post" tabIndex={6} <input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={async () => {await publishComment(); resetFields();}} /> onClick={async () => {await publishComment(); resetFields();}} />
</td> </td>
</tr> </tr>
<tr data-type="Comment"> <tr data-type="Comment">
<td>Comment</td> <td>Comment</td>
<td> <td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} /> <textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
</td> </td>
</tr> </tr>
<tr data-type="File"> <tr data-type="File">
<td>Embed File</td> <td>Embed File</td>
<td> <td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} /> <input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
<button id="t-help" type="button" onClick={ <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.") () => 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> } data-tip="Help">?</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</PostFormTable> </PostFormTable>
</PostForm> </PostForm>
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
src/components/views/Thread.jsx
+16 -9
View File
@@ -23,9 +23,11 @@ import useSuccess from '../../hooks/useSuccess';
const Thread = () => { const Thread = () => {
const { const {
captchaResponse, setCaptchaResponse, captchaResponse, setCaptchaResponse,
setChallengesArray,
defaultSubplebbits, defaultSubplebbits,
setIsCaptchaOpen, setIsCaptchaOpen,
isSettingsOpen, setIsSettingsOpen, isSettingsOpen, setIsSettingsOpen,
setPendingComment,
selectedAddress, setSelectedAddress, selectedAddress, setSelectedAddress,
selectedStyle, selectedStyle,
selectedThread, setSelectedThread, selectedThread, setSelectedThread,
@@ -39,7 +41,6 @@ const Thread = () => {
const linkRef = useRef(); const linkRef = useRef();
const [isReplyOpen, setIsReplyOpen] = useState(false); const [isReplyOpen, setIsReplyOpen] = useState(false);
const [captchaImage, setCaptchaImage] = useState('');
const navigate = useNavigate(); const navigate = useNavigate();
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
@@ -82,18 +83,22 @@ const Thread = () => {
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { 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) { else if (challengeVerification.challengeSuccess === false) {
setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again."); setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again.");
} }
}; }
const onChallenge = async (challenges, comment) => { const onChallenge = async (challenges, comment) => {
setPendingComment(comment);
let challengeAnswers = []; let challengeAnswers = [];
navigate(`/p/${selectedAddress}/c/pending`)
try { try {
challengeAnswers = await getChallengeAnswersFromUser(challenges) challengeAnswers = await getChallengeAnswersFromUser(challenges)
} }
@@ -103,17 +108,19 @@ const Thread = () => {
if (challengeAnswers) { if (challengeAnswers) {
await comment.publishChallengeAnswers(challengeAnswers) await comment.publishChallengeAnswers(challengeAnswers)
} }
}; }
const publishCommentOptions = { const publishCommentOptions = {
displayName: nameRef.current ? nameRef.current.value : undefined, displayName: nameRef.current ? nameRef.current.value : undefined,
content: commentRef.current ? commentRef.current.value : undefined, content: commentRef.current ? commentRef.current.value : undefined,
link: linkRef.current ? linkRef.current.value : undefined, link: linkRef.current ? linkRef.current.value : undefined,
parentCid: selectedThread,
subplebbitAddress: selectedAddress, subplebbitAddress: selectedAddress,
onChallenge, onChallenge,
onChallengeVerification, onChallengeVerification,
onError: (error) => {
setErrorMessage(error);
}
}; };
@@ -128,6 +135,8 @@ const Thread = () => {
const getChallengeAnswersFromUser = async (challenges) => { const getChallengeAnswersFromUser = async (challenges) => {
setChallengesArray(challenges);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const imageString = challenges?.challenges[0].challenge; const imageString = challenges?.challenges[0].challenge;
const imageSource = `data:image/png;base64,${imageString}`; const imageSource = `data:image/png;base64,${imageString}`;
@@ -136,11 +145,9 @@ const Thread = () => {
challengeImg.onload = () => { challengeImg.onload = () => {
setIsCaptchaOpen(true); setIsCaptchaOpen(true);
setCaptchaImage(imageSource);
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
if (event.key === 'Enter') { if (event.key === 'Enter') {
setCaptchaImage('');
resolve(captchaResponse); resolve(captchaResponse);
setIsCaptchaOpen(false); setIsCaptchaOpen(false);
document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keydown', handleKeyDown);
@@ -153,7 +160,7 @@ const Thread = () => {
}; };
challengeImg.onerror = () => { challengeImg.onerror = () => {
reject(setErrorMessage('Could not load challenge image')); reject(setErrorMessage('Could not load challenges'));
}; };
}); });
}; };