implemented useParams for direct links

src/App.js

@@ -58,13 +58,13 @@ export default function App() {
     <BoardContext.Provider value={{ selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle }}>
       <Routes>
         <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
-        <Route path={`/p/${selectedAddress}`} element={<Board setBodyStyle={setBodyStyle} />}>
+        <Route path={`/p/:subplebbitAddress`} element={<Board setBodyStyle={setBodyStyle} />}>
           <Route path='post' element={<Board />} />
         </Route>
-        <Route path={`/p/${selectedAddress}/thread/${selectedThread}`} element={<Thread setBodyStyle={setBodyStyle} />}>
+        <Route path={`/p/:subplebbitAddress/thread/:threadCid`} element={<Thread setBodyStyle={setBodyStyle} />}>
           <Route path='post' element={<Thread />} />
         </Route>
-        <Route path={`/p/${selectedAddress}/catalog`} element={<Catalog setBodyStyle={setBodyStyle} /> }>
+        <Route path={`/p/:subplebbitAddress/catalog`} element={<Catalog setBodyStyle={setBodyStyle} /> }>
           <Route path='post' element={<Catalog />} />
         </Route>
       </Routes>

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);

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 (
     <Container>
       <NavBar selectedStyle={selectedStyle}>

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(() => {