From 2f0b10394b79d473d8df3f7570855cd88df76547 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Thu, 27 Jan 2022 15:47:20 -0600 Subject: [PATCH] renders an array of endpoints --- src/features/posts/Feed.js | 22 ++++++++++++++++++---- src/features/posts/postsSlice.js | 22 +++++++++++++++++++++- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js index a91fe53..9fdb9ec 100644 --- a/src/features/posts/Feed.js +++ b/src/features/posts/Feed.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { fetchBySub } from "./postsSlice"; +import { fetchBySub, fetchFromAll } from "./postsSlice"; import { selectAllSubs } from "../reddit/redditSlice"; import { useSelector, useDispatch } from "react-redux"; import { v4 } from "uuid"; @@ -12,12 +12,26 @@ export default function Feed() { const subs = useSelector(selectAllSubs); // Selects subreddits from redditSlice const subArray = Object.values(subs); // Places the values within an array + + useEffect(() => { + const prepareData = () => { + let myEndpoints = []; + for (let sub of subArray) { + myEndpoints.push(sub.access); + } + setEndpoints(myEndpoints); + } + + if (subArray) { + prepareData(); + } + }, [setEndpoints]); useEffect(() => { let isActive = true; - const getPosts = async(subreddit) => { - let myPosts = await dispatch(fetchBySub(subreddit)); + const getPosts = async() => { + let myPosts = await dispatch(fetchBySub('https://www.reddit.com/r/cats.json')); myPosts = myPosts.payload; // sets myPosts to be the array of post objects fetched from the subreddit argument if (typeof myPosts === 'object' && isActive) { @@ -43,7 +57,7 @@ export default function Feed() { } }; - getPosts('https://www.reddit.com/r/cats.json'); + getPosts(); return () => { isActive = false; diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js index 2ef0e54..1a9210f 100644 --- a/src/features/posts/postsSlice.js +++ b/src/features/posts/postsSlice.js @@ -15,6 +15,25 @@ export const fetchBySub = createAsyncThunk( } ); +export const fetchFromAll = createAsyncThunk( + 'posts/fetchAll', + async(arr) => { // arr represents here an array of subreddit endpoints + try { + let myPromises = []; + for (let subreddit in arr) { + myPromises.push(new Promise(fetchBySub(subreddit))); + } + Promise.all([ + ...myPromises + ]).then((response) => { + return response; + }); + } catch(e) { + console.log(e); + } + } +) + export const postsSlice = createSlice({ name: 'posts', initialState: { @@ -52,4 +71,5 @@ export const postsSlice = createSlice({ export default postsSlice.reducer; export const selectPosts = state => state.postsSlice.posts; export const { filterPosts, updatePosts } = postsSlice.actions; -// exports also includes fetchBySub (takes argument of a sub) \ No newline at end of file +// exports also includes fetchBySub (takes argument of a sub) +// exports also includes fetchFromAll (takes argument of an array of subs) \ No newline at end of file