fixed InfiniteScroll pagination

src/components/Board.jsx

@@ -20,16 +20,14 @@ const Board = ({ setBodyStyle }) => {
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
-  const [startIndex, setStartIndex] = useState(0);
   const [endIndex, setEndIndex] = useState(2);
-  const [loadedFeed, setLoadedFeed] = useState([]);
   const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new');
   const [selectedFeed, setSelectedFeed] = useState(feed);
-  const renderedFeed = selectedFeed.slice(startIndex, endIndex);
+  const renderedFeed = selectedFeed.slice(0, endIndex);
   const { subplebbitAddress } = useParams();
 
 
-
+  // temporary title from JSON, gets subplebbitAddress from URL
   useEffect(() => {
     setSelectedAddress(subplebbitAddress);
     const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
@@ -38,12 +36,12 @@ const Board = ({ setBodyStyle }) => {
     }
   }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]);
   
-
+  // sets useFeed to address from URL
   useEffect(() => {
     setSelectedFeed(feed);
   }, [feed]);
 
-
+  // fetches default subplebbits from JSON
   useEffect(() => {
     let didCancel = false;
     fetch(
@@ -61,7 +59,7 @@ const Board = ({ setBodyStyle }) => {
     };
   }, []);
 
-
+  // mobile navbar scroll effect
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollPos = window.pageYOffset;
@@ -75,14 +73,18 @@ const Board = ({ setBodyStyle }) => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [prevScrollPos, visible]);
 
+  // reset endIndex whenever selectedAddress changes
+  useEffect(() => {
+    setEndIndex(2);
+  }, [selectedAddress]);
+
 
 
   const tryLoadMore = async () => {
     try {
       loadMore();
-      const newFeed = [...loadedFeed, ...feed];
+      const newFeed = [...selectedFeed, ...feed];
-      setLoadedFeed(newFeed);
+      setSelectedFeed(newFeed);
-      setStartIndex(endIndex);
       setEndIndex(endIndex + 2);
     } catch (e) {
       await new Promise(resolve => setTimeout(resolve, 1000));
@@ -165,15 +167,24 @@ const Board = ({ setBodyStyle }) => {
   };
   
 
-  const handleVoidClick = () => {}
+  const handleVoidClick = () => {};
-
 
+  // desktop navbar board select functionality
   const handleClickTitle = (title, address) => {
     setSelectedTitle(title);
     setSelectedAddress(address);
     setSelectedFeed(feed.filter(feed => feed.title === title));
   };
 
+  // mobile navbar board select functionality
+  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 = () => {
     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.");
@@ -192,15 +203,6 @@ const Board = ({ setBodyStyle }) => {
   }
   
 
-  const handleSelectChange = (event) => {
-    const selected = event.target.value;
-    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-    setSelectedTitle(selectedTitle);
-    setSelectedAddress(selected);
-    navigate(`/${selected}`);
-  }
-  
-
   const handlePublishComment = async () => {
     try {
       const pendingComment = await publishComment({