diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index 9fdb9ec..6c2d52e 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -6,14 +6,17 @@ import { v4 } from "uuid";
import Post from "./Post";
export default function Feed() {
- const [feed, setFeed] = useState(null); // Expects to receive an array of Post components mapped with data from fetchBySub
const [endpoints, setEndpoints] = useState(null); // Expects to receive an array of endpoints from which to fetch the posts
+ 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 dispatch = useDispatch();
const subs = useSelector(selectAllSubs); // Selects subreddits from redditSlice
const subArray = Object.values(subs); // Places the values within an array
- useEffect(() => {
+
+
+ useEffect(() => { // this useEffect loop pulls the endpoints from the selected subreddits and stores them as an array in "endpoints"
const prepareData = () => {
let myEndpoints = [];
for (let sub of subArray) {
@@ -26,18 +29,54 @@ export default function Feed() {
prepareData();
}
}, [setEndpoints]);
+
+
+ useEffect(() => { // once this is done, this loop pulls posts from each endpoint
+ let isActive = true;
+
+ const getPosts = async(arr) => {
+ if (endpoints) {
+ const mappedResults = arr.map(each => dispatch(fetchBySub(each)));
+ return Promise.all([
+ ...mappedResults
+ ]).then((results) => setData(results)); // data is now set to an object (returned promise)
+ }
+ }
+
+ getPosts(endpoints);
+
+ return () => {
+ isActive = false;
+ }
+
+ }, [dispatch, setData, endpoints]);
+
useEffect(() => {
let isActive = true;
- 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
+ const mapPosts = () => {
+ if (data) {
+ let allPosts = [];
+ for (let each of data) {
+ allPosts.push(each.payload);
+ }
+
+ let extractedPosts = [];
+ for (let each of allPosts) {
+ for (let indiv of each) {
+ extractedPosts.push(indiv);
+ }
+ };
+
+ extractedPosts = extractedPosts.sort((x,y) => x.created_utc > y.created_utc); // sorts posts by sort time
+
+ console.log(extractedPosts);
- if (typeof myPosts === 'object' && isActive) {
let newFeed = [];
- for (let post of myPosts) { // maps the data retrieved from fetchBySub onto Post components,
- newFeed.push( // then stores them in localized array
+
+ newFeed = extractedPosts.map((post) => {
+ return (
{body}
{subreddit ? 'r/' + subreddit : ''}
{author ? 'u/' + author : 'u/username'}
posted at {time ? time : '...?'}
{comments ? comments : 'no'} comments
diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js index 1a9210f..4ccee22 100644 --- a/src/features/posts/postsSlice.js +++ b/src/features/posts/postsSlice.js @@ -15,24 +15,17 @@ 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 fetchFromAll = createAsyncThunk( +// 'posts/fetchAll', +// async(arr) => { // arr represents here an array of subreddit endpoints +// try { +// let mappedResults = arr.map((each) => dispatch(fetchBySub(each))); +// Promise.all([...mappedResults]).then((repsonse) => console.log(repsonse)); +// } catch(e) { +// console.log(e); +// } +// } +// ) export const postsSlice = createSlice({ name: 'posts',