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