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

revert URL slug

Browse Source
This commit is contained in:
plebbitor
2023-03-02 21:51:06 +01:00
parent 79d254359b
commit d9f37bb3c4
7 changed files with 74 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/plebchan-husbando.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

public/assets/plebchan-thumbdown.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 415 KiB

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={`/p/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}> <Route path={`/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Board />} /> <Route path='post' element={<Board />} />
</Route> </Route>
<Route path={`/p/:subplebbitAddress/thread/:threadCid`} element={<Thread setBodyStyle={setBodyStyle} />}> <Route path={`/:subplebbitAddress/thread/:threadCid`} element={<Thread setBodyStyle={setBodyStyle} />}>
<Route path='post' element={<Thread />} /> <Route path='post' element={<Thread />} />
</Route> </Route>
<Route path={`/p/:subplebbitAddress/catalog`} element={<Catalog setBodyStyle={setBodyStyle} /> }> <Route path={`/:subplebbitAddress/catalog`} element={<Catalog setBodyStyle={setBodyStyle} /> }>
<Route path='post' element={<Catalog />} /> <Route path='post' element={<Catalog />} />
</Route> </Route>
</Routes> </Routes>
src/components/Board.jsx
+32 -14
View File
@@ -3,7 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
import { BoardContext } from '../App'; import { BoardContext } from '../App';
import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
import { useFeed, useAccountsActions, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
@@ -27,9 +27,8 @@ const Board = ({ setBodyStyle }) => {
const [selectedFeed, setSelectedFeed] = useState(feed); const [selectedFeed, setSelectedFeed] = useState(feed);
const renderedFeed = selectedFeed.slice(startIndex, endIndex); const renderedFeed = selectedFeed.slice(startIndex, endIndex);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit(subplebbitAddress);
// console.log(subplebbit);
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
@@ -44,6 +43,7 @@ const Board = ({ setBodyStyle }) => {
setSelectedFeed(feed); setSelectedFeed(feed);
}, [feed]); }, [feed]);
useEffect(() => { useEffect(() => {
let didCancel = false; let didCancel = false;
fetch( fetch(
@@ -61,6 +61,7 @@ const Board = ({ setBodyStyle }) => {
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
const currentScrollPos = window.pageYOffset; const currentScrollPos = window.pageYOffset;
@@ -75,6 +76,7 @@ const Board = ({ setBodyStyle }) => {
}, [prevScrollPos, visible]); }, [prevScrollPos, visible]);
const tryLoadMore = async () => { const tryLoadMore = async () => {
try { try {
loadMore(); loadMore();
@@ -87,6 +89,7 @@ const Board = ({ setBodyStyle }) => {
} }
}; };
const onChallengeVerification = (challengeVerification) => { const onChallengeVerification = (challengeVerification) => {
if (challengeVerification.challengeSuccess === true) { if (challengeVerification.challengeSuccess === true) {
console.log('challenge success', {publishedCid: challengeVerification.publication.cid}) console.log('challenge success', {publishedCid: challengeVerification.publication.cid})
@@ -97,6 +100,7 @@ const Board = ({ setBodyStyle }) => {
} }
} }
const onChallenge = async (challenges, comment) => { const onChallenge = async (challenges, comment) => {
let challengeAnswers = []; let challengeAnswers = [];
try { try {
@@ -110,8 +114,10 @@ const Board = ({ setBodyStyle }) => {
} }
} }
const onError = (error) => console.error(error) const onError = (error) => console.error(error)
const getChallengeAnswersFromUser = async (challenges) => { const getChallengeAnswersFromUser = async (challenges) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const imageString = challenges?.challenges[0].challenge; const imageString = challenges?.challenges[0].challenge;
@@ -150,6 +156,7 @@ const Board = ({ setBodyStyle }) => {
}; };
const handleScroll = (event) => { const handleScroll = (event) => {
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget; const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
if (scrollTop + clientHeight >= scrollHeight) { if (scrollTop + clientHeight >= scrollHeight) {
@@ -157,36 +164,43 @@ const Board = ({ setBodyStyle }) => {
} }
}; };
const handleVoidClick = () => {} const handleVoidClick = () => {}
const handleClickTitle = (title, address) => { const handleClickTitle = (title, address) => {
setSelectedTitle(title); setSelectedTitle(title);
setSelectedAddress(address); setSelectedAddress(address);
setSelectedFeed(feed.filter(feed => feed.title === title)); setSelectedFeed(feed.filter(feed => feed.title === title));
}; };
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.");
}; };
const handleClickForm = () => { const handleClickForm = () => {
setShowPostFormLink(false); setShowPostFormLink(false);
setShowPostForm(true); setShowPostForm(true);
navigate(`/p/${selectedAddress}/post`); navigate(`/${selectedAddress}/post`);
}; };
const handleClickThread = (thread) => { const handleClickThread = (thread) => {
setSelectedThread(thread); setSelectedThread(thread);
} }
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(`/p/${selected}`); navigate(`/${selected}`);
} }
const handlePublishComment = async () => { const handlePublishComment = async () => {
try { try {
const pendingComment = await publishComment({ const pendingComment = await publishComment({
@@ -206,6 +220,7 @@ const Board = ({ setBodyStyle }) => {
} }
}; };
const handleStyleChange = (event) => { const handleStyleChange = (event) => {
switch (event.target.value) { switch (event.target.value) {
case "Yotsuba": case "Yotsuba":
@@ -273,6 +288,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;
@@ -286,6 +302,8 @@ const Board = ({ setBodyStyle }) => {
}).flat(); }).flat();
} }
return ( return (
<Container> <Container>
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
@@ -293,7 +311,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={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)} <Link to={`/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title}</Link> >{subplebbit.title}</Link>
]&nbsp; ]&nbsp;
</span> </span>
@@ -412,12 +430,12 @@ const Board = ({ setBodyStyle }) => {
</span> </span>
<div id="catalog-button-desktop"> <div id="catalog-button-desktop">
[ [
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/${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={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
</span> </span>
</div> </div>
</TopBar> </TopBar>
@@ -504,7 +522,7 @@ const Board = ({ setBodyStyle }) => {
&nbsp; &nbsp;
<span key={`rl1-${thread.cid}`}> <span key={`rl1-${thread.cid}`}>
[ [
<Link key={`rl2-${thread.cid}`} to={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link> <Link key={`rl2-${thread.cid}`} to={`/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)} className="reply-link" >Reply</Link>
] ]
</span> </span>
</span> </span>
@@ -523,7 +541,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={`/p/${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={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
@@ -597,7 +615,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={`/p/${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={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
@@ -690,7 +708,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={`/p/${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={() => handleClickThread(thread.cid)} className="ttl-link">Click here</Link>
&nbsp;to view. </span> &nbsp;to view. </span>
</blockquote> </blockquote>
</> </>
@@ -701,7 +719,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={`/p/${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={() => handleClickThread(thread.cid)} className="button-mobile" >View Thread</Link>
</div> </div>
</div> </div>
{renderedComments.map(reply => { {renderedComments.map(reply => {
@@ -765,7 +783,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={`/p/${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={() => 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
@@ -168,7 +168,7 @@ const Catalog = ({ setBodyStyle }) => {
const handleClickForm = () => { const handleClickForm = () => {
setShowPostFormLink(false); setShowPostFormLink(false);
setShowPostForm(true); setShowPostForm(true);
navigate(`/p/${selectedAddress}/catalog/post`); navigate(`/${selectedAddress}/catalog/post`);
}; };
@@ -273,7 +273,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={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)} <Link to={`/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title}</Link> >{subplebbit.title}</Link>
]&nbsp; ]&nbsp;
</span> </span>
@@ -392,12 +392,12 @@ const Catalog = ({ setBodyStyle }) => {
</span> </span>
<div className="return-button" id="return-button-desktop"> <div className="return-button" id="return-button-desktop">
[ [
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/${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={`/p/${selectedAddress}`}>Return</Link> <Link to={`/${selectedAddress}`}>Return</Link>
</span> </span>
</div> </div>
<hr /> <hr />
@@ -412,7 +412,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={`/p/${selectedAddress}/thread/${thread.cid}`} onClick={() => handleClickThread(thread.cid)}> <Link key={`a-${thread.cid}`} to={`/${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={`/p/${subplebbit.address}`} onClick={() => { <Link to={`/${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
+33 -16
View File
@@ -7,6 +7,7 @@ import { useComment } from '@plebbit/plebbit-react-hooks';
import ImageBanner from './ImageBanner'; import ImageBanner from './ImageBanner';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
const Thread = ({ setBodyStyle }) => { const Thread = ({ setBodyStyle }) => {
const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext);
@@ -15,8 +16,11 @@ const Thread = ({ setBodyStyle }) => {
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);
const comment = useComment(`${selectedThread}`);
const { subplebbitAddress, threadCid } = useParams(); const { subplebbitAddress, threadCid } = useParams();
useEffect(() => { useEffect(() => {
setSelectedAddress(subplebbitAddress); setSelectedAddress(subplebbitAddress);
setSelectedThread(threadCid); setSelectedThread(threadCid);
@@ -25,7 +29,7 @@ const Thread = ({ setBodyStyle }) => {
setSelectedTitle(selectedSubplebbit.title); setSelectedTitle(selectedSubplebbit.title);
} }
}, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]); }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]);
const comment = useComment(`${selectedThread}`);
useEffect(() => { useEffect(() => {
let didCancel = false; let didCancel = false;
@@ -44,6 +48,7 @@ const Thread = ({ setBodyStyle }) => {
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
const currentScrollPos = window.pageYOffset; const currentScrollPos = window.pageYOffset;
@@ -57,13 +62,17 @@ const Thread = ({ setBodyStyle }) => {
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, [prevScrollPos, visible]); }, [prevScrollPos, visible]);
const handleVoidClick = () => {} const handleVoidClick = () => {}
const handleClickTitle = (title, address) => { const handleClickTitle = (title, address) => {
setSelectedTitle(title); setSelectedTitle(title);
setSelectedAddress(address); 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;
@@ -72,16 +81,29 @@ const Thread = ({ setBodyStyle }) => {
navigate(`/${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.");
}; };
const handleClickForm = () => { const handleClickForm = () => {
setShowReplyFormLink(false); setShowReplyFormLink(false);
setShowReplyForm(true); setShowReplyForm(true);
navigate(`/p/${selectedAddress}/thread/${selectedThread}/post`); navigate(`/${selectedAddress}/thread/${selectedThread}/post`);
}; };
const handleClickTop = () => {
window.scrollTo(0, 0);
}
const handleClickBottom = () => {
window.scrollTo(0, document.body.scrollHeight);
}
const handleStyleChange = (event) => { const handleStyleChange = (event) => {
switch (event.target.value) { switch (event.target.value) {
case "Yotsuba": case "Yotsuba":
@@ -148,13 +170,7 @@ const Thread = ({ setBodyStyle }) => {
} }
} }
const handleClickTop = () => {
window.scrollTo(0, 0);
}
const handleClickBottom = () => {
window.scrollTo(0, document.body.scrollHeight);
}
function renderComments(comments) { function renderComments(comments) {
const commentKeys = Object.keys(comments); const commentKeys = Object.keys(comments);
@@ -171,6 +187,7 @@ const Thread = ({ setBodyStyle }) => {
} }
return ( return (
<Container> <Container>
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
@@ -232,12 +249,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={`/p/${selectedAddress}`}>Return</Link> <Link to={`/${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={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
</span> </span>
</div> </div>
<div id="bottom-button-mobile"> <div id="bottom-button-mobile">
@@ -312,12 +329,12 @@ const Thread = ({ setBodyStyle }) => {
</span> </span>
<span className="return-button" id="return-button-desktop"> <span className="return-button" id="return-button-desktop">
[ [
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/${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={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/${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">
@@ -638,12 +655,12 @@ const Thread = ({ setBodyStyle }) => {
<hr /> <hr />
<span className="bottom-bar-return"> <span className="bottom-bar-return">
[ [
<Link to={`/p/${selectedAddress}`}>Return</Link> <Link to={`/${selectedAddress}`}>Return</Link>
] ]
</span> </span>
<span className="bottom-bar-catalog"> <span className="bottom-bar-catalog">
[ [
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
] ]
</span> </span>
<span className="bottom-bar-top"> <span className="bottom-bar-top">
@@ -698,12 +715,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={`/p/${selectedAddress}`}>Return</Link> <Link to={`/${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={`/p/${selectedAddress}/catalog`}>Catalog</Link> <Link to={`/${selectedAddress}/catalog`}>Catalog</Link>
</span> </span>
</div> </div>
<span className="bottom-bar-top"> <span className="bottom-bar-top">