From 79d254359b95f53631f72b21f9239def80626c52 Mon Sep 17 00:00:00 2001 From: plebbitor Date: Thu, 2 Mar 2023 18:19:08 +0100 Subject: [PATCH] implemented useParams for direct links --- src/App.js | 6 +-- src/components/Board.jsx | 16 ++++++- src/components/Catalog.jsx | 90 +++++++++++++++++++++++++------------- src/components/Thread.jsx | 13 +++++- 4 files changed, 87 insertions(+), 38 deletions(-) diff --git a/src/App.js b/src/App.js index a98e194f..b629a7bd 100644 --- a/src/App.js +++ b/src/App.js @@ -58,13 +58,13 @@ export default function App() { } /> - }> + }> } /> - }> + }> } /> - }> + }> } /> diff --git a/src/components/Board.jsx b/src/components/Board.jsx index d1caa3fe..9ce9aa93 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -1,9 +1,9 @@ import React, { useState, useEffect, useContext } from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +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 } from '@plebbit/plebbit-react-hooks'; +import { useFeed, useAccountsActions, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; @@ -26,7 +26,19 @@ const Board = ({ setBodyStyle }) => { const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new'); const [selectedFeed, setSelectedFeed] = useState(feed); const renderedFeed = selectedFeed.slice(startIndex, endIndex); + const { subplebbitAddress } = useParams(); + const subplebbit = useSubplebbit(subplebbitAddress); + // console.log(subplebbit); + + useEffect(() => { + setSelectedAddress(subplebbitAddress); + const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); + if (selectedSubplebbit) { + setSelectedTitle(selectedSubplebbit.title); + } + }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]); + useEffect(() => { setSelectedFeed(feed); diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx index 5f18237b..c5b37825 100644 --- a/src/components/Catalog.jsx +++ b/src/components/Catalog.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext } from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useNavigate, useParams } from 'react-router-dom'; import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled'; import { TopBar } from './styles/Thread.styled'; import { Threads } from './styles/Catalog.styled'; @@ -8,6 +8,7 @@ import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; import InfiniteScroll from 'react-infinite-scroller'; + const Catalog = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); @@ -19,8 +20,53 @@ const Catalog = ({ setBodyStyle }) => { const navigate = useNavigate(); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); - + const { publishComment } = useAccountsActions(); const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new'); + const { subplebbitAddress } = useParams(); + + + + useEffect(() => { + setSelectedAddress(subplebbitAddress); + const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); + if (selectedSubplebbit) { + setSelectedTitle(selectedSubplebbit.title); + } + }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]); + + + 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 () => { try {loadMore()} @@ -28,7 +74,6 @@ const Catalog = ({ setBodyStyle }) => { {await new Promise(resolve => setTimeout(resolve, 1000))} } - const { publishComment } = useAccountsActions(); const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { @@ -40,6 +85,7 @@ const Catalog = ({ setBodyStyle }) => { } } + const onChallenge = async (challenges, comment) => { let challengeAnswers = []; try { @@ -53,8 +99,10 @@ const Catalog = ({ setBodyStyle }) => { } } + const onError = (error) => console.error(error) + const getChallengeAnswersFromUser = async (challenges) => { return new Promise((resolve, reject) => { const imageString = challenges?.challenges[0].challenge; @@ -92,43 +140,17 @@ const Catalog = ({ 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 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; @@ -137,20 +159,24 @@ const Catalog = ({ 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 = () => { setShowPostFormLink(false); setShowPostForm(true); navigate(`/p/${selectedAddress}/catalog/post`); }; + const handleClickThread = (thread) => { setSelectedThread(thread); } + const handlePublishComment = async () => { // Event.preventDefault(); try { @@ -238,6 +264,8 @@ const Catalog = ({ setBodyStyle }) => { } } + + return ( diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 67389e5a..fe3b4599 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext } from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useNavigate, useParams } from 'react-router-dom'; import { Container, NavBar, Header, Break, PostForm, BoardForm } from './styles/Board.styled'; import { ReplyFormTable, ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled'; import { BoardContext } from '../App'; @@ -9,13 +9,22 @@ import { Tooltip } from 'react-tooltip'; const Thread = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle } = useContext(BoardContext); const [showReplyFormLink, setShowReplyFormLink] = useState(true); const [showReplyForm, setShowReplyForm] = useState(false); const navigate = useNavigate(); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); + const { subplebbitAddress, threadCid } = useParams(); + useEffect(() => { + setSelectedAddress(subplebbitAddress); + setSelectedThread(threadCid); + const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); + if (selectedSubplebbit) { + setSelectedTitle(selectedSubplebbit.title); + } + }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]); const comment = useComment(`${selectedThread}`); useEffect(() => {