divides feed into pages, introduces primitive page change system

src/features/posts/Feed.js

@@ -11,8 +11,8 @@ export default function Feed() {
     const [data, setData] = useState(null);                     // Receives data from getPosts and them maps it onto Post components
     const [feed, setFeed] = useState(null);                     // Expects to receive an array of Post components mapped with data from fetchBySub
 
-    const [feedPage, setFeedPage] = useState(['']);             // Expects an array of arrays (pages of feed posts)
-    const [currentPage, setCurrentPage] = useState(0);
+    const [feedPages, setFeedPages] = useState(null);             // Expects an array of arrays (pages of feed posts)
+    const [currentPage, setCurrentPage] = useState(0);          // Determines current feed page; corresponds to index of feedPage array
     const dispatch = useDispatch();
 
     // const posts = useSelector(selectPosts);
@@ -70,8 +70,6 @@ export default function Feed() {
                     }
                 };
 
-                console.log(extractedPosts);
-
                 const comparePosts = (a,b) => {                                 // sorting function: compares time posted within each object in array
                     if (a.data.created_utc > b.data.created_utc) {
                         return -1;
@@ -90,8 +88,9 @@ export default function Feed() {
                             data={post.data}
                             key={v4()}
                         />
-                    );
+                    )
                 })
+                
                 // dispatch(updatePosts(newFeed));    // stores current feed in state of postsSlice
                 setFeed(newFeed);
             }
@@ -108,9 +107,113 @@ export default function Feed() {
 
     }, [data, setFeed, dispatch]);
 
+
+    useEffect(() => {
+        let isActive = false;
+
+        if (!feed) {
+            isActive = false;
+        } else if (feed) {
+            isActive = true;
+        }
+
+        if (isActive) {
+            try {
+                let allPages = [];
+                for (let i = 0; i < feed.length; i += 10) {
+                    let indivPage = [];
+                    indivPage = feed.slice(i,i+10);
+                    allPages.push(indivPage);
+                }
+                setFeedPages(allPages);
+            } catch(e) {
+                console.log(e);
+            }
+        }
+
+        return () => {
+            isActive = false;
+        }
+    },[feed, setFeedPages]);
+
+
+    // useEffect(() => {                   // this loops handles mapping the feed onto individual pages,
+    //     let isActive = true;            // allowing the application to render subsets of the whole feed at once, reducing render times
+
+    //     const doPages = async () => {
+    //         try {
+    //             let localFeed = await feed;
+
+    //             if (localFeed) {
+    //                 for (let i = 0; i < feed.length; i += 10) {
+    //                     let allPages = [];
+    //                     for (let j = 0; j < 10; j++) {
+    //                         let indivPage = [];
+    //                         if (feed[i+j]) {
+    //                             indivPage.push(feed[i+j])
+    //                         } else {
+    //                             return;
+    //                         }
+    //                         allPages.push(indivPage);
+    //                     }
+    //                     setFeedPages(allPages);
+    //                 }
+    //             }
+    //         } catch(e) {
+    //             console.log(e);
+    //         }
+    //     }
+
+    //     if (isActive && feed) {
+    //         doPages();
+    //     }
+
+    //     return () => {
+    //         isActive = false;
+    //     }
+
+    // }, [feed, feedPages]);
+
+    const handleIncrement = () => {
+        if (currentPage + 1 > feedPages.length) {
+            return;
+        } else {
+            setCurrentPage((prev) => prev+1);
+            window.scrollTo(0,0);
+        }
+    }
+
+    const handleDecrement = () => {
+        if (currentPage - 1 < 0) {
+            return;
+        } else {
+            setCurrentPage((prev) => prev-1);
+            window.scrollTo(0,0);
+        }
+    }
+
     return (
         <>
-        {feed ? feed : <h1 className="loading-message">Loading cats for you...</h1>}
+        {feedPages ? 
+
+        <div className="page-handling">
+            <button className="decrement" onClick={handleDecrement}>-</button>
+            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <button className="increment" onClick={handleIncrement}>+</button>
+        </div>
+
+        : null }
+
+        {feedPages ? feedPages[currentPage] : <h1 className="loading-message">Loading cats for you...</h1>}
+        {feedPages ? 
+
+        <div className="page-handling">
+            <button className="decrement" onClick={handleDecrement}>-</button>
+            <p>Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}</p>
+            <button className="increment" onClick={handleIncrement}>+</button>
+        </div>
+
+        : null }
         </>
     );
 }