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

cleaned code in views

Browse Source
This commit is contained in:
plebbitor
2023-04-01 13:59:54 +02:00
parent 75f8cab3a0
commit 4399087f95
6 changed files with 161 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -6,7 +6,7 @@
"@babel/core": "^7.21.3", "@babel/core": "^7.21.3",
"@babel/plugin-syntax-flow": "^7.18.6", "@babel/plugin-syntax-flow": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.21.0", "@babel/plugin-transform-react-jsx": "^7.21.0",
"@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#b42bcb6a4f74ab23bbb8dfa49e43e9cccef3ece6", "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#47c89c104bf3f16f790282fbdf26f672c395df52",
"@testing-library/dom": "^9.0.1", "@testing-library/dom": "^9.0.1",
"@testing-library/jest-dom": "^5.14.1", "@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^14.0.0", "@testing-library/react": "^14.0.0",
src/components/views/Board.jsx
+32 -67
View File
@@ -49,11 +49,11 @@ const Board = () => {
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const handleClickForm = useClickForm(); const handleClickForm = useClickForm();
// useEffect(() => { // useEffect(() => {
// console.log(selectedFeed); // console.log(selectedFeed);
// }, [selectedFeed]); // }, [selectedFeed]);
// temporary title from JSON, gets subplebbitAddress from URL // temporary title from JSON, gets subplebbitAddress from URL
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
@@ -82,8 +82,6 @@ const Board = () => {
}, [prevScrollPos, visible]); }, [prevScrollPos, visible]);
const tryLoadMore = async () => { const tryLoadMore = async () => {
try { try {
await loadMore(); await loadMore();
@@ -93,7 +91,6 @@ const Board = () => {
}; };
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { if (challengeVerification.challengeSuccess === true) {
onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid})
@@ -149,10 +146,6 @@ const Board = () => {
}); });
}; };
const handleVoidClick = () => {};
// desktop navbar board select functionality // desktop navbar board select functionality
const handleClickTitle = (title, address) => { const handleClickTitle = (title, address) => {
setSelectedTitle(title); setSelectedTitle(title);
@@ -167,16 +160,6 @@ const Board = () => {
setSelectedTitle(selectedTitle); setSelectedTitle(selectedTitle);
setSelectedAddress(selected); setSelectedAddress(selected);
navigate(`/${selected}`); navigate(`/${selected}`);
}
const handleClickHelp = () => {
alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.");
};
const handleClickThread = (thread) => {
setSelectedThread(thread);
}; };
@@ -208,28 +191,8 @@ const Board = () => {
if (targetElement) { if (targetElement) {
targetElement.scrollIntoView({ behavior: "instant" }); targetElement.scrollIntoView({ behavior: "instant" });
} }
}
const handleCaptchaClose = () => {
setIsCaptchaOpen(false);
}; };
const handleReplyClose = () => {
setIsReplyOpen(false);
};
const handleReplyOpen = () => {
setIsReplyOpen(true);
};
const handleSettingsClose = () => {
setIsSettingsOpen(false);
}
const handleSettingsOpen = () => {
setIsSettingsOpen(true);
}
return ( return (
@@ -237,16 +200,16 @@ const Board = () => {
<CaptchaModal <CaptchaModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isCaptchaOpen} isOpen={isCaptchaOpen}
closeModal={handleCaptchaClose} closeModal={() => setIsCaptchaOpen(false)}
captchaImage={captchaImage} /> captchaImage={captchaImage} />
<ReplyModal <ReplyModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isReplyOpen} isOpen={isReplyOpen}
closeModal={handleReplyClose} /> closeModal={() => setIsReplyOpen(false)} />
<SettingsModal <SettingsModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isSettingsOpen} isOpen={isSettingsOpen}
closeModal={handleSettingsClose} /> closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
<> <>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
@@ -259,7 +222,7 @@ const Board = () => {
))} ))}
<span className="nav"> <span className="nav">
[ [
<Link to={`/${selectedAddress}/settings`} onClick={handleSettingsOpen}>Settings</Link> <Link to={`/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
] ]
[ [
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -278,7 +241,7 @@ const Board = () => {
</select> </select>
</div> </div>
<div className="page-jump"> <div className="page-jump">
<Link to={`/${selectedAddress}/settings`} onClick={handleSettingsOpen}>Settings</Link> <Link to={`/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link> )}>Home</Link>
@@ -338,7 +301,9 @@ const Board = () => {
<td>Embed File</td> <td>Embed File</td>
<td> <td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" /> <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
<button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button> <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> </td>
</tr> </tr>
</tbody> </tbody>
@@ -466,12 +431,12 @@ const Board = () => {
<span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span> <span key={`dt-${thread.cid}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${thread.cid}`} className="post-number"> <span key={`pn-${thread.cid}`} className="post-number">
<Link to="" key={`pl1-${thread.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link> <Link to="" key={`pl1-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.shortCid}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${thread.cid}`} onClick={() => setIsReplyOpen(true)} title="Reply to this post">{thread.shortCid}</button>
&nbsp; &nbsp;
<span key={`rl1-${thread.cid}`}>&nbsp; <span key={`rl1-${thread.cid}`}>&nbsp;
[ [
<Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link> <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="reply-link" >Reply</Link>
] ]
</span> </span>
</span>&nbsp; </span>&nbsp;
@@ -482,7 +447,7 @@ const Board = () => {
.map((reply) => ( .map((reply) => (
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
<Link key={`ql-${reply.cid}`} <Link key={`ql-${reply.cid}`}
to={handleVoidClick} className="quote-link" to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
&nbsp; &nbsp;
@@ -499,7 +464,7 @@ const Board = () => {
<span key={`ttl-s-${thread.cid}`} className="ttl"> (...) <span key={`ttl-s-${thread.cid}`} className="ttl"> (...)
<br key={`ttl-s-br1-${thread.cid}`} /><br key={`ttl-s-br2${thread.cid}`} /> <br key={`ttl-s-br1-${thread.cid}`} /><br key={`ttl-s-br2${thread.cid}`} />
Post too long.&nbsp; Post too long.&nbsp;
<Link key={`ttl-l-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`ttl-l-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</Fragment> </Fragment>
@@ -515,7 +480,7 @@ const Board = () => {
<span key={`oc-${thread.cid}`} className="ttl"> <span key={`oc-${thread.cid}`} className="ttl">
<span key={`oc1-${thread.cid}`}> <span key={`oc1-${thread.cid}`}>
{omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp; {omittedCount} post{omittedCount > 1 ? "s" : ""} omitted. Click&nbsp;
<Link key={`oc2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">here</Link> <Link key={`oc2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">here</Link>
&nbsp;to view. &nbsp;to view.
</span> </span>
</span>) : null} </span>) : null}
@@ -556,16 +521,16 @@ const Board = () => {
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span> <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`pn-${reply.cid}`} className="post-number">
<Link to="" key={`pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link> <Link to="" key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.shortCid}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={() => setIsReplyOpen(true)} title="Reply to this post">{reply.shortCid}</button>
</span>&nbsp; </span>&nbsp;
<button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button> <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }} data-cmd="post-menu">▶</button>
<div id="backlink-id" className="backlink"> <div id="backlink-id" className="backlink">
{reply.replies?.pages.topAll.comments {reply.replies?.pages.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply) => ( .map((reply) => (
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
<Link to={handleVoidClick} key={`ql-${reply.cid}`} <Link to={() => {}} key={`ql-${reply.cid}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
@@ -625,19 +590,19 @@ const Board = () => {
reply.content.length > 500 ? reply.content.length > 500 ?
<Fragment key={`fragment8-${reply.cid}`}> <Fragment key={`fragment8-${reply.cid}`}>
<blockquote key={`pm-${reply.cid}`} className="post-message"> <blockquote key={`pm-${reply.cid}`} className="post-message">
<Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={handleVoidClick}> <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={() => {}}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />} {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link> </Link>
<Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} /> <Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} />
<span key={`ttl-s-${reply.cid}`} className="ttl"> (...) <span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
<br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} /> <br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
<Link key={`ttl-l-${reply.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`ttl-l-${reply.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote key={`pm-${reply.cid}`} className="post-message"> : <blockquote key={`pm-${reply.cid}`} className="post-message">
<Link to={handleVoidClick} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}> <Link to={() => {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />} {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link> </Link>
<Post content={reply.content} key={`post-${reply.cid}`} /> <Post content={reply.content} key={`post-${reply.cid}`} />
@@ -653,7 +618,7 @@ const Board = () => {
<div key={`mob-c-${thread.cid}`} className="op-container"> <div key={`mob-c-${thread.cid}`} className="op-container">
<div key={`mob-po-${thread.cid}`} className="post op"> <div key={`mob-po-${thread.cid}`} className="post op">
<div key={`mob-pi-${thread.cid}`} className="post-info-mobile"> <div key={`mob-pi-${thread.cid}`} className="post-info-mobile">
<button key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick} style={{ all: 'unset', cursor: 'pointer' }}>...</button> <button key={`mob-pb-${thread.cid}`} className="post-menu-button-mobile" onClick={() => {}} style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<span key={`mob-nbm-${thread.cid}`} className="name-block-mobile"> <span key={`mob-nbm-${thread.cid}`} className="name-block-mobile">
{thread.author.displayName {thread.author.displayName
? thread.author.displayName.length > 15 ? thread.author.displayName.length > 15
@@ -696,8 +661,8 @@ const Board = () => {
<span key={`mob-dt-${thread.cid}`} className="date-time-mobile"> <span key={`mob-dt-${thread.cid}`} className="date-time-mobile">
{getDate(thread.timestamp)} {getDate(thread.timestamp)}
&nbsp; &nbsp;
<Link to="" key={`mob-no-${thread.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link> <Link to="" key={`mob-no-${thread.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={handleReplyOpen} title="Reply to this post">{thread.shortCid}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no2-${thread.cid}`} onClick={() => setIsReplyOpen(true)} title="Reply to this post">{thread.shortCid}</button>
</span> </span>
</div> </div>
{thread.link ? ( {thread.link ? (
@@ -742,7 +707,7 @@ const Board = () => {
<span key={`mob-ttl-s-${thread.cid}`} className="ttl"> (...) <span key={`mob-ttl-s-${thread.cid}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${thread.cid}`} /><br key={`mob-ttl-s-br2${thread.cid}`} /> <br key={`mob-ttl-s-br1-${thread.cid}`} /><br key={`mob-ttl-s-br2${thread.cid}`} />
Post too long.&nbsp; Post too long.&nbsp;
<Link key={`mob-ttl-l-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`mob-ttl-l-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</Fragment> </Fragment>
@@ -753,7 +718,7 @@ const Board = () => {
</div> </div>
<div key={`mob-pl-${thread.cid}`} className="post-link-mobile"> <div key={`mob-pl-${thread.cid}`} className="post-link-mobile">
<span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies</span> <span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies</span>
<Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link> <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="button-mobile" >View Thread</Link>
</div> </div>
</div> </div>
{renderedComments.map((reply) => { {renderedComments.map((reply) => {
@@ -790,8 +755,8 @@ const Board = () => {
</span> </span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile"> <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
{getDate(reply.timestamp)}&nbsp; {getDate(reply.timestamp)}&nbsp;
<Link to="" key={`mob-pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link> <Link to="" key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.shortCid}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => setIsReplyOpen(true)} title="Reply to this post">{reply.shortCid}</button>
</span> </span>
</div> </div>
{reply.link ? ( {reply.link ? (
@@ -831,19 +796,19 @@ const Board = () => {
reply.content.length > 500 ? reply.content.length > 500 ?
<Fragment key={`fragment15-${reply.cid}`}> <Fragment key={`fragment15-${reply.cid}`}>
<blockquote key={`mob-pm-${reply.cid}`} className="post-message"> <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
<Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={handleVoidClick}> <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={() => {}}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />} {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link> </Link>
<Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} /> <Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} />
<span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...) <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
<br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} /> <br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
Comment too long.&nbsp; Comment too long.&nbsp;
<Link key={`mob-ttl-l-${reply.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link> <Link key={`mob-ttl-l-${reply.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</Fragment> </Fragment>
: <blockquote key={`mob-pm-${reply.cid}`} className="post-message"> : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
<Link to={handleVoidClick} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}> <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />} {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link> </Link>
<Post content={reply.content} key={`post-mobile-${reply.cid}`} /> <Post content={reply.content} key={`post-mobile-${reply.cid}`} />
src/components/views/Catalog.jsx
+16 -42
View File
@@ -46,7 +46,6 @@ const Catalog = () => {
const handleClickForm = useClickForm(); const handleClickForm = useClickForm();
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
@@ -55,7 +54,6 @@ const Catalog = () => {
} }
}, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]); }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]);
// mobile navbar scroll effect // mobile navbar scroll effect
useEffect(() => { useEffect(() => {
const debouncedHandleScroll = debounce(() => { const debouncedHandleScroll = debounce(() => {
@@ -70,12 +68,11 @@ const Catalog = () => {
}, [prevScrollPos, visible]); }, [prevScrollPos, visible]);
const tryLoadMore = async () => { const tryLoadMore = async () => {
try {loadMore()} try {loadMore()}
catch (e) catch (e)
{await new Promise(resolve => setTimeout(resolve, 1000))} {await new Promise(resolve => setTimeout(resolve, 1000))}
} };
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
@@ -86,7 +83,7 @@ const Catalog = () => {
onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
} }
} };
const onChallenge = async (challenges, comment) => { const onChallenge = async (challenges, comment) => {
@@ -100,7 +97,7 @@ const Catalog = () => {
if (challengeAnswers) { if (challengeAnswers) {
await comment.publishChallengeAnswers(challengeAnswers) await comment.publishChallengeAnswers(challengeAnswers)
} }
} };
const getChallengeAnswersFromUser = async (challenges) => { const getChallengeAnswersFromUser = async (challenges) => {
@@ -134,30 +131,14 @@ const Catalog = () => {
}; };
const handleClickTitle = (title, address) => {
setSelectedTitle(title);
setSelectedAddress(address);
};
const handleSelectChange = (event) => { const handleSelectChange = (event) => {
const selected = event.target.value; const selected = event.target.value;
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title; const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle); setSelectedTitle(selectedTitle);
setSelectedAddress(selected); setSelectedAddress(selected);
navigate(`/${selected}`); navigate(`/${selected}`);
}
const handleClickHelp = () => {
alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.");
}; };
const handleClickThread = (thread) => {
setSelectedThread(thread);
}
const handlePublishComment = async () => { const handlePublishComment = async () => {
// Event.preventDefault(); // Event.preventDefault();
@@ -179,43 +160,34 @@ const Catalog = () => {
} }
}; };
const handleCaptchaClose = () => {
setIsCaptchaOpen(false);
};
const handleSettingsClose = () => {
setIsSettingsOpen(false);
}
const handleSettingsOpen = () => {
setIsSettingsOpen(true);
}
return ( return (
<Container> <Container>
<CaptchaModal <CaptchaModal
isOpen={isCaptchaOpen} isOpen={isCaptchaOpen}
closeModal={handleCaptchaClose} closeModal={() => setIsCaptchaOpen(false)}
captchaImage={captchaImage} /> captchaImage={captchaImage} />
<SettingsModal <SettingsModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isSettingsOpen} isOpen={isSettingsOpen}
closeModal={handleSettingsClose} /> closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
<> <>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className="boardList" key={`span-${subplebbit.address}`}>
[ [
<Link to={`/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)} <Link to={`/${subplebbit.address}`} key={`a-${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title}</Link> >{subplebbit.title}</Link>
]&nbsp; ]&nbsp;
</span> </span>
))} ))}
<span className="nav"> <span className="nav">
[ [
<Link to={`/${selectedAddress}/catalog/settings`} onClick={handleSettingsOpen}>Settings</Link> <Link to={`/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
] ]
[ [
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -234,7 +206,7 @@ const Catalog = () => {
</select> </select>
</div> </div>
<div className="page-jump"> <div className="page-jump">
<Link to={`/${selectedAddress}/catalog/settings`} onClick={handleSettingsOpen}>Settings</Link> <Link to={`/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link> )}>Home</Link>
@@ -294,7 +266,9 @@ const Catalog = () => {
<td>Embed File</td> <td>Embed File</td>
<td> <td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" /> <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
<button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button> <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> </td>
</tr> </tr>
</tbody> </tbody>
@@ -342,7 +316,7 @@ const Catalog = () => {
const commentMediaInfo = getCommentMediaInfo(thread); const commentMediaInfo = getCommentMediaInfo(thread);
const fallbackImgUrl = "/assets/filedeleted-res.gif"; const fallbackImgUrl = "/assets/filedeleted-res.gif";
return ( return (
<Link style={{all: "unset", cursor: "pointer"}} key={`link-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}> <Link style={{all: "unset", cursor: "pointer"}} key={`link-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => setSelectedThread(thread.cid)}>
<div key={`thread-${thread.cid}`} className="thread"> <div key={`thread-${thread.cid}`} className="thread">
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<Fragment key="f-catalog"> <Fragment key="f-catalog">
src/components/views/Home.jsx
+2 -7
View File
@@ -13,12 +13,6 @@ const Home = () => {
setSelectedTitle setSelectedTitle
} = useAppStore(state => state); } = useAppStore(state => state);
const handleClick = (title, address) => {
setSelectedTitle(title);
setSelectedAddress(address);
}
// prevent dark mode // prevent dark mode
useEffect(() => { useEffect(() => {
setBodyStyle({ setBodyStyle({
@@ -67,7 +61,8 @@ const Home = () => {
<div className="board" key={subplebbit.address}> <div className="board" key={subplebbit.address}>
<div className="board-title">{subplebbit.title}</div> <div className="board-title">{subplebbit.title}</div>
<Link to={`/${subplebbit.address}`} onClick={() => { <Link to={`/${subplebbit.address}`} onClick={() => {
handleClick(subplebbit.title, subplebbit.address); setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}} > }} >
<img alt="board logo" src="/assets/plebchan.png" /> <img alt="board logo" src="/assets/plebchan.png" />
</Link> </Link>
src/components/views/Thread.jsx
+42 -77
View File
@@ -52,11 +52,11 @@ const Thread = () => {
const commentMediaInfo = getCommentMediaInfo(comment); const commentMediaInfo = getCommentMediaInfo(comment);
const fallbackImgUrl = "/assets/filedeleted-res.gif"; const fallbackImgUrl = "/assets/filedeleted-res.gif";
// useEffect(() => { // useEffect(() => {
// console.log(comment); // console.log(comment);
// }, [comment]); // }, [comment]);
// temporary title from JSON, gets subplebbitAddress and threadCid from URL // temporary title from JSON, gets subplebbitAddress and threadCid from URL
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
@@ -81,7 +81,6 @@ const Thread = () => {
}, [prevScrollPos, visible]); }, [prevScrollPos, visible]);
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { if (challengeVerification.challengeSuccess === true) {
onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid}) onSuccess('challenge success', {publishedCid: challengeVerification.publication.cid})
@@ -90,7 +89,7 @@ const Thread = () => {
onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); onError('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors});
onError("Error: You seem to have mistyped the CAPTCHA. Please try again."); onError("Error: You seem to have mistyped the CAPTCHA. Please try again.");
} }
} };
const onChallenge = async (challenges, comment) => { const onChallenge = async (challenges, comment) => {
@@ -104,7 +103,7 @@ const Thread = () => {
if (challengeAnswers) { if (challengeAnswers) {
await comment.publishChallengeAnswers(challengeAnswers) await comment.publishChallengeAnswers(challengeAnswers)
} }
} };
const getChallengeAnswersFromUser = async (challenges) => { const getChallengeAnswersFromUser = async (challenges) => {
@@ -137,16 +136,6 @@ const Thread = () => {
}); });
}; };
const handleVoidClick = () => {}
// desktop navbar board select functionality
const handleClickTitle = (title, address) => {
setSelectedTitle(title);
setSelectedAddress(address);
};
// mobile navbar board select functionality // mobile navbar board select functionality
const handleSelectChange = (event) => { const handleSelectChange = (event) => {
const selected = event.target.value; const selected = event.target.value;
@@ -154,24 +143,9 @@ const Thread = () => {
setSelectedTitle(selectedTitle); setSelectedTitle(selectedTitle);
setSelectedAddress(selected); setSelectedAddress(selected);
navigate(`/${selected}`); navigate(`/${selected}`);
}
const handleClickHelp = () => {
alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.");
}; };
const handleClickTop = () => {
window.scrollTo(0, 0);
}
const handleClickBottom = () => {
window.scrollTo(0, document.body.scrollHeight);
}
const handlePublishComment = async () => { const handlePublishComment = async () => {
try { try {
const pendingComment = await publishComment({ const pendingComment = await publishComment({
@@ -200,44 +174,23 @@ const Thread = () => {
if (targetElement) { if (targetElement) {
targetElement.scrollIntoView({ behavior: "instant" }); targetElement.scrollIntoView({ behavior: "instant" });
} }
}
const handleCaptchaClose = () => {
setIsCaptchaOpen(false);
}; };
const handleReplyClose = () => {
setIsReplyOpen(false);
};
const handleReplyOpen = () => {
setIsReplyOpen(true);
};
const handleSettingsClose = () => {
setIsSettingsOpen(false);
}
const handleSettingsOpen = () => {
setIsSettingsOpen(true);
}
return ( return (
<Container> <Container>
<CaptchaModal <CaptchaModal
isOpen={isCaptchaOpen} isOpen={isCaptchaOpen}
closeModal={handleCaptchaClose} closeModal={() => setIsCaptchaOpen(false)}
captchaImage={captchaImage} /> captchaImage={captchaImage} />
<ReplyModal <ReplyModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isReplyOpen} isOpen={isReplyOpen}
closeModal={handleReplyClose} /> closeModal={() => setIsReplyOpen(false)} />
<SettingsModal <SettingsModal
selectedStyle={selectedStyle} selectedStyle={selectedStyle}
isOpen={isSettingsOpen} isOpen={isSettingsOpen}
closeModal={handleSettingsClose} /> closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
<> <>
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
@@ -245,14 +198,17 @@ const Thread = () => {
[ [
<Link key={`a-${subplebbit.address}`} <Link key={`a-${subplebbit.address}`}
to={`/${subplebbit.address}`} to={`/${subplebbit.address}`}
onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)} onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title}</Link> >{subplebbit.title}</Link>
]&nbsp; ]&nbsp;
</span> </span>
))} ))}
<span className="nav"> <span className="nav">
[ [
<Link to={`/${selectedAddress}/thread/${selectedThread}/settings`} onClick={handleSettingsOpen}>Settings</Link> <Link to={`/${selectedAddress}/thread/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
] ]
[ [
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -271,7 +227,7 @@ const Thread = () => {
</select> </select>
</div> </div>
<div className="page-jump"> <div className="page-jump">
<Link to={`/${selectedAddress}/thread/${selectedThread}/settings`} onClick={handleSettingsOpen}>Settings</Link> <Link to={`/${selectedAddress}/thread/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}} <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
)}>Home</Link> )}>Home</Link>
@@ -307,7 +263,7 @@ const Thread = () => {
</div> </div>
<div id="bottom-button-mobile"> <div id="bottom-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<a onClick={handleClickBottom} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</a> <a onClick={() => window.scrollTo(0, document.body.scrollHeight)} onMouseOver={(event) => event.target.style.cursor='pointer'}>Bottom</a>
</span> </span>
</div> </div>
<div id="post-form-link-desktop"> <div id="post-form-link-desktop">
@@ -340,7 +296,10 @@ const Thread = () => {
<td>Embed File</td> <td>Embed File</td>
<td> <td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" /> <input name="embed" type="text" tabIndex={7} placeholder="Paste link" />
<button id="t-help" type="button" onClick={handleClickHelp} data-tip="Help">?</button> <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> </td>
</tr> </tr>
</tbody> </tbody>
@@ -372,7 +331,9 @@ const Thread = () => {
</span> </span>
<span className="return-button catalog-button" id="bottom-button-desktop"> <span className="return-button catalog-button" id="bottom-button-desktop">
[ [
<a onClick={handleClickBottom} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickBottom}>Bottom</a> <a onClick={() => window.scrollTo(0, document.body.scrollHeight)}
onMouseOver={(event) => event.target.style.cursor='pointer'}
onTouchStart={() => window.scrollTo(0, document.body.scrollHeight)}>Bottom</a>
] ]
</span> </span>
{comment ? ( {comment ? (
@@ -476,16 +437,16 @@ const Thread = () => {
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span> <span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp; &nbsp;
<span className="post-number"> <span className="post-number">
<Link to="" onClick={handleVoidClick} title="Link to this post">c/</Link> <Link to="" onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={handleReplyOpen} title="Reply to this post">{comment.shortCid}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => setIsReplyOpen(true)} title="Reply to this post">{comment.shortCid}</button>
</span>&nbsp;&nbsp; </span>&nbsp;&nbsp;
<button key={`pmb-${comment.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button> <button key={`pmb-${comment.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
<div id="backlink-id" className="backlink"> <div id="backlink-id" className="backlink">
{comment.replies?.pages.topAll.comments {comment.replies?.pages.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply) => ( .map((reply) => (
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
<Link to={handleVoidClick} key={`ql-${reply.cid}`} <Link to={() => {}} key={`ql-${reply.cid}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
@@ -541,16 +502,16 @@ const Thread = () => {
<span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span> <span key={`dt-${reply.cid}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
&nbsp; &nbsp;
<span key={`pn-${reply.cid}`} className="post-number"> <span key={`pn-${reply.cid}`} className="post-number">
<Link to="" key={`pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link> <Link to="" key={`pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.shortCid}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${reply.cid}`} onClick={() => setIsReplyOpen(true)} title="Reply to this post">{reply.shortCid}</button>
</span>&nbsp; </span>&nbsp;
<button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={handleVoidClick} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button> <button key={`pmb-${reply.cid}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
<div id="backlink-id" className="backlink"> <div id="backlink-id" className="backlink">
{reply.replies?.pages.topAll.comments {reply.replies?.pages.topAll.comments
.sort((a, b) => a.timestamp - b.timestamp) .sort((a, b) => a.timestamp - b.timestamp)
.map((reply) => ( .map((reply) => (
<div key={`div-${reply.cid}`} style={{display: 'inline-block'}}> <div key={`div-${reply.cid}`} style={{display: 'inline-block'}}>
<Link to={handleVoidClick} key={`ql-${reply.cid}`} <Link to={() => {}} key={`ql-${reply.cid}`}
className="quote-link" className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, event)}>
c/{reply.shortCid}</Link> c/{reply.shortCid}</Link>
@@ -606,7 +567,7 @@ const Thread = () => {
</div> </div>
) : null} ) : null}
<blockquote key={`pm-${reply.cid}`} className="post-message"> <blockquote key={`pm-${reply.cid}`} className="post-message">
<Link to={handleVoidClick} className="quote-link" <Link to={() => {}} className="quote-link"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />} {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link> </Link>
@@ -623,7 +584,7 @@ const Thread = () => {
<div className="op-container" key="op-container"> <div className="op-container" key="op-container">
<div key={`mob-po-${comment.cid}`} className="post op"> <div key={`mob-po-${comment.cid}`} className="post op">
<div key={`mob-pi-${comment.cid}`} className="post-info-mobile"> <div key={`mob-pi-${comment.cid}`} className="post-info-mobile">
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={handleVoidClick}>...</button> <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${comment.cid}`} className="post-menu-button-mobile" onClick={() => {}}>...</button>
<span className="name-block-mobile"> <span className="name-block-mobile">
{comment.author?.displayName {comment.author?.displayName
? comment.author?.displayName.length > 15 ? comment.author?.displayName.length > 15
@@ -665,8 +626,8 @@ const Thread = () => {
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile"> <span key={`mob-dt-${comment.cid}`} className="date-time-mobile">
{getDate(comment?.timestamp)} {getDate(comment?.timestamp)}
&nbsp; &nbsp;
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={handleReplyOpen} title="Link to this post">c/</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => setIsReplyOpen(true)} title="Link to this post">c/</button>
<Link to="" key={`mob-no2-${comment.cid}`} onClick={handleVoidClick} title="Reply to this post">{comment.cid?.slice(0, 8)}</Link> <Link to="" key={`mob-no2-${comment.cid}`} onClick={() => {}} title="Reply to this post">{comment.cid?.slice(0, 8)}</Link>
</span> </span>
</div> </div>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
@@ -746,12 +707,12 @@ const Thread = () => {
</span> </span>
<span key={`mob-dt-${reply.cid}`} className="date-time-mobile"> <span key={`mob-dt-${reply.cid}`} className="date-time-mobile">
{getDate(reply?.timestamp)}&nbsp; {getDate(reply?.timestamp)}&nbsp;
<Link to="" key={`mob-pl1-${reply.cid}`} onClick={handleVoidClick} title="Link to this post">c/</Link> <Link to="" key={`mob-pl1-${reply.cid}`} onClick={() => {}} title="Link to this post">c/</Link>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={handleReplyOpen} title="Reply to this post">{reply.shortCid}</button> <button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${reply.cid}`} onClick={() => setIsReplyOpen(true)} title="Reply to this post">{reply.shortCid}</button>
</span> </span>
</div> </div>
<blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile"> <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
<Link to={handleVoidClick} key={`mob-ql-${reply.cid}`} className="quotelink-mobile" <Link to={() => {}} key={`mob-ql-${reply.cid}`} className="quotelink-mobile"
onClick={(event) => handleQuoteClick(reply, event)}> onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />} {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link> </Link>
@@ -778,12 +739,14 @@ const Thread = () => {
</span> </span>
<span className="bottom-bar-top"> <span className="bottom-bar-top">
[ [
<a onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a> <a onClick={() => window.scrollTo(0, 0)}
onMouseOver={(event) => event.target.style.cursor='pointer'}
onTouchStart={() => window.scrollTo(0, 0)}>Top</a>
] ]
</span> </span>
<span className="quickreply-button"> <span className="quickreply-button">
[ [
<Link to="" onClick={handleVoidClick} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link> <Link to="" onClick={() => {}} onMouseOver={(event) => event.target.style.cursor='pointer'}>Post a Reply</Link>
] ]
</span> </span>
{comment.replyCount > 0 ? ( {comment.replyCount > 0 ? (
@@ -847,7 +810,9 @@ const Thread = () => {
</div> </div>
<span className="bottom-bar-top"> <span className="bottom-bar-top">
<span className="btn-wrap"> <span className="btn-wrap">
<a onClick={handleClickTop} onMouseOver={(event) => event.target.style.cursor='pointer'} onTouchStart={handleClickTop}>Top</a> <a onClick={() => window.scrollTo(0, 0)}
onMouseOver={(event) => event.target.style.cursor='pointer'}
onTouchStart={() => window.scrollTo(0, 0)}>Top</a>
</span> </span>
</span> </span>
</div> </div>
yarn.lock
+68 -6
View File
@@ -2455,6 +2455,46 @@
tunnel "0.0.6" tunnel "0.0.6"
uuid "9.0.0" uuid "9.0.0"
"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#d5f312ef577dc4a845e15d1f87c4273cb2195c08":
version "0.0.3"
resolved "https://github.com/plebbit/plebbit-js.git#d5f312ef577dc4a845e15d1f87c4273cb2195c08"
dependencies:
"@keyv/sqlite" "3.6.2"
"@plebbit/plebbit-logger" "github:plebbit/plebbit-logger"
"@types/node-fetch" "2.6.2"
"@types/proper-lockfile" "4.1.2"
"@types/uuid" "8.3.4"
assert "2.0.0"
async-wait-until "2.0.12"
buffer "6.0.3"
captcha-canvas "3.2.1"
err-code "3.0.1"
ethers "5.7.2"
file-type "16.5.4"
form-data "4.0.0"
hpagent "1.2.0"
ipfs-http-client "56.0.3"
ipfs-only-hash "4.0.0"
is-ipfs "6.0.2"
jose "4.11.0"
js-sha256 "0.9.0"
keyv "4.5.2"
knex "2.3.0"
libp2p-crypto "0.21.2"
limiter "2.1.0"
lodash-es "4.17.21"
open-graph-scraper "5.2.3"
peer-id "0.16.0"
proper-lockfile "github:plebbit/node-proper-lockfile"
retry "0.13.1"
safe-stable-stringify "2.4.1"
skia-canvas "1.0.0"
sqlite3 "5.1.2"
tiny-typed-emitter "2.1.0"
tinycache "1.1.2"
ts-custom-error "3.3.1"
uuid "9.0.0"
"@plebbit/plebbit-logger@github:plebbit/plebbit-logger": "@plebbit/plebbit-logger@github:plebbit/plebbit-logger":
version "0.0.1" version "0.0.1"
uid "9525ca9539479918931c3b334e8d490d1c87e507" uid "9525ca9539479918931c3b334e8d490d1c87e507"
@@ -2468,11 +2508,11 @@
dependencies: dependencies:
debug "4.3.3" debug "4.3.3"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#b42bcb6a4f74ab23bbb8dfa49e43e9cccef3ece6": "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#47c89c104bf3f16f790282fbdf26f672c395df52":
version "0.0.1" version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#b42bcb6a4f74ab23bbb8dfa49e43e9cccef3ece6" resolved "https://github.com/plebbit/plebbit-react-hooks.git#47c89c104bf3f16f790282fbdf26f672c395df52"
dependencies: dependencies:
"@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#7e6f4d7d90f628e474e02c51a89e2723fb71a73d" "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#d5f312ef577dc4a845e15d1f87c4273cb2195c08"
"@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
assert "2.0.0" assert "2.0.0"
ethers "5.6.9" ethers "5.6.9"
@@ -2483,9 +2523,9 @@
uuid "8.3.2" uuid "8.3.2"
zustand "4.0.0" zustand "4.0.0"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#e47cb245b8af0ae0fdf1ad3170d5097918d1349e": "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#b42bcb6a4f74ab23bbb8dfa49e43e9cccef3ece6":
version "0.0.1" version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#e47cb245b8af0ae0fdf1ad3170d5097918d1349e" resolved "https://github.com/plebbit/plebbit-react-hooks.git#b42bcb6a4f74ab23bbb8dfa49e43e9cccef3ece6"
dependencies: dependencies:
"@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#7e6f4d7d90f628e474e02c51a89e2723fb71a73d" "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#7e6f4d7d90f628e474e02c51a89e2723fb71a73d"
"@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
@@ -6780,6 +6820,11 @@ hpack.js@^2.1.6:
readable-stream "^2.0.1" readable-stream "^2.0.1"
wbuf "^1.1.0" wbuf "^1.1.0"
hpagent@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hpagent/-/hpagent-1.2.0.tgz#0ae417895430eb3770c03443456b8d90ca464903"
integrity sha512-A91dYTeIB6NoXG+PxTQpCCDDnfHsW9kc06Lvpu1TEe9gnd6ZFeiBoRO9JvzEv6xK7EX97/dUE8g/vBMTqTS3CA==
html-encoding-sniffer@^2.0.1: html-encoding-sniffer@^2.0.1:
version "2.0.1" version "2.0.1"
resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -8380,6 +8425,11 @@ jsonpointer@^5.0.0:
array-includes "^3.1.5" array-includes "^3.1.5"
object.assign "^4.1.3" object.assign "^4.1.3"
just-performance@4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/just-performance/-/just-performance-4.3.0.tgz#cc2bc8c9227f09e97b6b1df4cd0de2df7ae16db1"
integrity sha512-L7RjvtJsL0QO8xFs5wEoDDzzJwoiowRw6Rn/GnvldlchS2JQr9wFYPiwZcDfrbbujEKqKN0tvENdbjXdYhDp5Q==
keyv@4.5.2, keyv@^4.5.2: keyv@4.5.2, keyv@^4.5.2:
version "4.5.2" version "4.5.2"
resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.2.tgz#0e310ce73bf7851ec702f2eaf46ec4e3805cce56" resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.2.tgz#0e310ce73bf7851ec702f2eaf46ec4e3805cce56"
@@ -8494,6 +8544,13 @@ lilconfig@^2.0.3, lilconfig@^2.0.5, lilconfig@^2.0.6:
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52" resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ== integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
limiter@2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/limiter/-/limiter-2.1.0.tgz#d38d7c5b63729bb84fb0c4d8594b7e955a5182a2"
integrity sha512-361TYz6iay6n+9KvUUImqdLuFigK+K79qrUtBsXhJTLdH4rIt/r1y8r1iozwh8KbZNpujbFTSh74mJ7bwbAMOw==
dependencies:
just-performance "4.3.0"
lines-and-columns@^1.1.6: lines-and-columns@^1.1.6:
version "1.2.4" version "1.2.4"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -9573,7 +9630,7 @@ onetime@^5.1.2:
dependencies: dependencies:
mimic-fn "^2.1.0" mimic-fn "^2.1.0"
open-graph-scraper@^5.2.2: open-graph-scraper@5.2.3, open-graph-scraper@^5.2.2:
version "5.2.3" version "5.2.3"
resolved "https://registry.yarnpkg.com/open-graph-scraper/-/open-graph-scraper-5.2.3.tgz#8a84b4f48d42e18d9ec44453377499acf57cfe66" resolved "https://registry.yarnpkg.com/open-graph-scraper/-/open-graph-scraper-5.2.3.tgz#8a84b4f48d42e18d9ec44453377499acf57cfe66"
integrity sha512-OFKyI3Zv60onbwjUtwTdLwMB9P1O0+U2JV0HD4hHdwyKGwDhyM09udZVU5vEwe/PxI4MyPuVaxcdy1okc4SgWw== integrity sha512-OFKyI3Zv60onbwjUtwTdLwMB9P1O0+U2JV0HD4hHdwyKGwDhyM09udZVU5vEwe/PxI4MyPuVaxcdy1okc4SgWw==
@@ -12230,6 +12287,11 @@ tryer@^1.0.1:
resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA== integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
ts-custom-error@3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==
ts-node@^10.7.0: ts-node@^10.7.0:
version "10.9.1" version "10.9.1"
resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b" resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"