diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index ba093b9..2452d64 100644 --- a/src/features/posts/Feed.js +++ b/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 :

Loading cats for you...

} + {feedPages ? + +
+ +

Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}

+ +
+ + : null } + + {feedPages ? feedPages[currentPage] :

Loading cats for you...

} + {feedPages ? + +
+ +

Page {currentPage} of {feedPages.length ? feedPages.length : 'unknown'}

+ +
+ + : null } ); } \ No newline at end of file