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

added board URL slug

Browse Source
This commit is contained in:
plebbitor
2023-03-02 13:42:26 +01:00
parent 1a1e9ec476
commit 147875367f
5 changed files with 75 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+3 -3
View File
@@ -58,13 +58,13 @@ export default function App() {
<BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle }}> <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle }}>
<Routes> <Routes>
<Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} /> <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
<Route path={`/${selectedAddress}`} element={<Board setBodyStyle={setBodyStyle} />}> <Route path={`/p/${selectedAddress}`} element={<Board setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Board />} /> <Route path='post' element={<Board />} />
</Route> </Route>
<Route path={`/${selectedAddress}/thread/${selectedThread}`} element={<Thread setBodyStyle={setBodyStyle} />}> <Route path={`/p/${selectedAddress}/thread/${selectedThread}`} element={<Thread setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Thread />} /> <Route path='post' element={<Thread />} />
</Route> </Route>
<Route path={`/${selectedAddress}/catalog`} element={<Catalog setBodyStyle={setBodyStyle} /> }> <Route path={`/p/${selectedAddress}/catalog`} element={<Catalog setBodyStyle={setBodyStyle} /> }>
<Route path='post' element={<Catalog />} /> <Route path='post' element={<Catalog />} />
</Route> </Route>
</Routes> </Routes>
src/components/Board.jsx
+57 -54
View File
@@ -28,17 +28,41 @@ const Board = ({ setBodyStyle }) => {
const renderedFeed = selectedFeed.slice(startIndex, endIndex); const renderedFeed = selectedFeed.slice(startIndex, endIndex);
const handleScroll = (event) => {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
if (scrollTop + clientHeight >= scrollHeight) {
setEndIndex(endIndex + 5);
}
};
useEffect(() => { useEffect(() => {
setSelectedFeed(feed); setSelectedFeed(feed);
}, [feed]); }, [feed]);
useEffect(() => {
let didCancel = false;
fetch(
"https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json",
{ cache: "no-cache" }
)
.then((res) => res.json())
.then(res => {
if (!didCancel) {
setDefaultSubplebbits(res);
}
});
return () => {
didCancel = true;
};
}, []);
useEffect(() => {
const handleScroll = () => {
const currentScrollPos = window.pageYOffset;
setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
setPrevScrollPos(currentScrollPos);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [prevScrollPos, visible]);
const tryLoadMore = async () => { const tryLoadMore = async () => {
try { try {
loadMore(); loadMore();
@@ -113,36 +137,14 @@ const Board = ({ setBodyStyle }) => {
}); });
}; };
useEffect(() => {
let didCancel = false;
fetch(
"https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json",
{ cache: "no-cache" }
)
.then((res) => res.json())
.then(res => {
if (!didCancel) {
setDefaultSubplebbits(res);
}
});
return () => {
didCancel = true;
};
}, []);
useEffect(() => {
const handleScroll = () => {
const currentScrollPos = window.pageYOffset;
setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
setPrevScrollPos(currentScrollPos);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [prevScrollPos, visible]);
const handleScroll = (event) => {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
if (scrollTop + clientHeight >= scrollHeight) {
setEndIndex(endIndex + 5);
}
};
const handleVoidClick = () => {} const handleVoidClick = () => {}
const handleClickTitle = (title, address) => { const handleClickTitle = (title, address) => {
@@ -151,14 +153,6 @@ const Board = ({ setBodyStyle }) => {
setSelectedFeed(feed.filter(feed => feed.title === title)); setSelectedFeed(feed.filter(feed => feed.title === title));
}; };
const handleSelectChange = (event) => {
const selected = event.target.value;
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle);
setSelectedAddress(selected);
navigate(`/${selected}`);
}
const handleClickHelp = () => { const handleClickHelp = () => {
alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan."); alert("- The CAPTCHA loads after you click \"Post\" \n- The CAPTCHA is case-sensitive. \n- Make sure to not block any cookies set by plebchan.");
}; };
@@ -166,12 +160,20 @@ const Board = ({ setBodyStyle }) => {
const handleClickForm = () => { const handleClickForm = () => {
setShowPostFormLink(false); setShowPostFormLink(false);
setShowPostForm(true); setShowPostForm(true);
navigate(`/${selectedAddress}/post`); navigate(`/p/${selectedAddress}/post`);
}; };
const handleClickThread = (thread) => { const handleClickThread = (thread) => {
setSelectedThread(thread); setSelectedThread(thread);
} }
const handleSelectChange = (event) => {
const selected = event.target.value;
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle);
setSelectedAddress(selected);
navigate(`/p/${selected}`);
}
const handlePublishComment = async () => { const handlePublishComment = async () => {
try { try {
@@ -258,6 +260,7 @@ const Board = ({ setBodyStyle }) => {
} }
} }
function renderComments(comments) { function renderComments(comments) {
return comments.map(comment => { return comments.map(comment => {
const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment; const { replyCount, replies: { pages: { topAll: { comments: nestedComments } } } } = comment;
@@ -278,7 +281,7 @@ const Board = ({ setBodyStyle }) => {
{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={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title}</Link> >{subplebbit.title}</Link>
]&nbsp; ]&nbsp;
</span> </span>
@@ -397,12 +400,12 @@ const Board = ({ setBodyStyle }) => {
</span> </span>
<div id="catalog-button-desktop"> <div id="catalog-button-desktop">
[ [
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
] ]
</div> </div>
<div id="catalog-button-mobile"> <div id="catalog-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span> </span>
</div> </div>
</TopBar> </TopBar>
@@ -489,7 +492,7 @@ const Board = ({ setBodyStyle }) => {
&nbsp; &nbsp;
<span key={`rl1-${thread.cid}`}> <span key={`rl1-${thread.cid}`}>
[ [
<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={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
] ]
</span> </span>
</span> </span>
@@ -508,7 +511,7 @@ const Board = ({ setBodyStyle }) => {
<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={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
@@ -582,7 +585,7 @@ const Board = ({ setBodyStyle }) => {
<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={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
@@ -675,7 +678,7 @@ const Board = ({ setBodyStyle }) => {
<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={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
@@ -686,7 +689,7 @@ const Board = ({ setBodyStyle }) => {
</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 / ? Images</span> <span key={`mob-info-${thread.cid}`} className="info-mobile">{thread.replyCount} Replies / ? Images</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={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
</div> </div>
</div> </div>
{renderedComments.map(reply => { {renderedComments.map(reply => {
@@ -750,7 +753,7 @@ const Board = ({ setBodyStyle }) => {
<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={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
src/components/Catalog.jsx
+5 -5
View File
@@ -144,7 +144,7 @@ const Catalog = ({ setBodyStyle }) => {
const handleClickForm = () => { const handleClickForm = () => {
setShowPostFormLink(false); setShowPostFormLink(false);
setShowPostForm(true); setShowPostForm(true);
navigate(`/${selectedAddress}/catalog/post`); navigate(`/p/${selectedAddress}/catalog/post`);
}; };
const handleClickThread = (thread) => { const handleClickThread = (thread) => {
@@ -245,7 +245,7 @@ const Catalog = ({ setBodyStyle }) => {
{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={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title}</Link> >{subplebbit.title}</Link>
]&nbsp; ]&nbsp;
</span> </span>
@@ -364,12 +364,12 @@ const Catalog = ({ setBodyStyle }) => {
</span> </span>
<div className="return-button" id="return-button-desktop"> <div className="return-button" id="return-button-desktop">
[ [
<Link to={`/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
] ]
</div> </div>
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap-catalog btn-wrap"> <span className="btn-wrap-catalog btn-wrap">
<Link to={`/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<hr /> <hr />
@@ -384,7 +384,7 @@ const Catalog = ({ setBodyStyle }) => {
{feed.map(thread => { {feed.map(thread => {
return ( return (
<div key={`${thread.cid}`} className="thread"> <div key={`${thread.cid}`} className="thread">
<Link key={`a-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}> <Link key={`a-${thread.cid}`} to={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}>
<img key={`img-${thread.cid}`} alt="" src="/assets/plebchan-psycho.png" /> <img key={`img-${thread.cid}`} alt="" src="/assets/plebchan-psycho.png" />
</Link> </Link>
<div key={`ti-${thread.cid}`} className="thread-icons" > <div key={`ti-${thread.cid}`} className="thread-icons" >
src/components/Home.jsx
+1 -1
View File
@@ -74,7 +74,7 @@ const Home = ({ setBodyStyle }) => {
{defaultSubplebbits.map(subplebbit => ( {defaultSubplebbits.map(subplebbit => (
<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={`/p/${subplebbit.address}`} onClick={() => {
handleClick(subplebbit.title, subplebbit.address); handleClick(subplebbit.title, subplebbit.address);
}} > }} >
<img alt="board logo" src="/assets/plebchan.png" /> <img alt="board logo" src="/assets/plebchan.png" />
src/components/Thread.jsx
+9 -9
View File
@@ -70,7 +70,7 @@ const Thread = ({ setBodyStyle }) => {
const handleClickForm = () => { const handleClickForm = () => {
setShowReplyFormLink(false); setShowReplyFormLink(false);
setShowReplyForm(true); setShowReplyForm(true);
navigate(`/${selectedAddress}/thread/${selectedThread}/post`); navigate(`/p/${selectedAddress}/thread/${selectedThread}/post`);
}; };
const handleStyleChange = (event) => { const handleStyleChange = (event) => {
@@ -223,12 +223,12 @@ const Thread = ({ setBodyStyle }) => {
<ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} selectedStyle={selectedStyle} > <ReplyFormLink id="post-form-link" showReplyFormLink={showReplyFormLink} selectedStyle={selectedStyle} >
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<div id="catalog-button-mobile"> <div id="catalog-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span> </span>
</div> </div>
<div id="bottom-button-mobile"> <div id="bottom-button-mobile">
@@ -303,12 +303,12 @@ const Thread = ({ setBodyStyle }) => {
</span> </span>
<span className="return-button" id="return-button-desktop"> <span className="return-button" id="return-button-desktop">
[ [
<Link to={`/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
] ]
</span> </span>
<span className="return-button catalog-button" id="catalog-button-desktop"> <span className="return-button catalog-button" id="catalog-button-desktop">
[ [
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
] ]
</span> </span>
<span className="return-button catalog-button" id="bottom-button-desktop"> <span className="return-button catalog-button" id="bottom-button-desktop">
@@ -629,12 +629,12 @@ const Thread = ({ setBodyStyle }) => {
<hr /> <hr />
<span className="bottom-bar-return"> <span className="bottom-bar-return">
[ [
<Link to={`/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
] ]
</span> </span>
<span className="bottom-bar-catalog"> <span className="bottom-bar-catalog">
[ [
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
] ]
</span> </span>
<span className="bottom-bar-top"> <span className="bottom-bar-top">
@@ -689,12 +689,12 @@ const Thread = ({ setBodyStyle }) => {
<div id="btns-container"> <div id="btns-container">
<div id="return-button-mobile"> <div id="return-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/${selectedAddress}`}>Return</Link> <Link to={`/p/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<div id="catalog-button-mobile"> <div id="catalog-button-mobile">
<span className="btn-wrap"> <span className="btn-wrap">
<Link to={`/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
</span> </span>
</div> </div>
<span className="bottom-bar-top"> <span className="bottom-bar-top">