experimenting with fetching posts

package-lock.json

@@ -16,6 +16,9 @@
         "react-dom": "^17.0.2",
         "react-redux": "^7.2.6",
         "react-scripts": "5.0.0"
+      },
+      "devDependencies": {
+        "uuid": "^8.3.2"
       }
     },
     "node_modules/@babel/code-frame": {

package.json

@@ -32,5 +32,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "uuid": "^8.3.2"
   }
 }

src/App.js

@@ -2,7 +2,7 @@ import React from 'react';
 import './App.css';
 import Navbar from './features/navbar/Navbar';
 import Post from './features/posts/Post';
-import redditSlice from './features/reddit/redditSlice';
+import Feed from './features/posts/Feed';
 
 function App() {
   return (
@@ -14,10 +14,7 @@ function App() {
         <div className="feed">
           {/* To do: import posts from post directory */}
           {/* Map post data onto individual post cards, handle undefined values */}
-          <Post />
+          <Feed />
-          <Post />
-          <Post />
-          <Post />
           <Post />
         </div>
         

src/features/posts/Feed.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { fetchBySub, updatePosts, selectPosts } from "./postsSlice";
+import { selectAllSubs } from "../reddit/redditSlice";
+import { useSelector, useDispatch } from "react-redux";
+import { v4 } from "uuid";
+import Post from "./Post";
+
+export default function Feed() {
+    const [feed, setFeed] = useState(null);
+    const dispatch = useDispatch();
+    const allSubs = useSelector(selectAllSubs);
+    
+    const doTheThing = async() => {
+        try {
+            let myPromises = [];
+            for (let sub in allSubs) {
+                myPromises.push(dispatch(fetchBySub(sub)));
+            }
+            let response = await Promise.all([...myPromises]).then((response) => dispatch(updatePosts(response)));
+            console.log(response);
+        } catch(e) {
+            console.log(e);
+        }
+    }
+
+    doTheThing();
+
+    const allPosts = useSelector(selectPosts);
+
+    const handlePosts = () => {
+        if (allPosts) {
+            try {
+                allPosts.forEach((post) => {
+                    setFeed((prev) => [
+                        ...prev,
+                        <Post 
+                            title={post.data.title}
+                            author={post.data.author}
+                            subreddit={post.data.subreddit}
+                            ups={post.data.ups}
+                            comments={post.data.num_comments}
+                            time={post.data.created_utc}
+                            id={v4()}
+                            media={post.data.post_hint === 'image' && post.data.url}
+                        />
+                    ])
+                })
+            } catch(e) {
+                console.log(e);
+            }
+        }
+    }
+
+    handlePosts();
+
+    return (
+        <div className="all-posts">
+            {feed}
+        </div>
+    );
+}

src/features/posts/Post.js

@@ -1,7 +1,8 @@
 import React from "react";
 import './Post.css';
 
-export default function Post() {
+export default function Post({props}) {
+    
     return (
         <>
         <div className="post-body">

src/features/posts/postsSlice.js

@@ -25,7 +25,10 @@ export const postsSlice = createSlice({
     reducers: {
         filterPosts(state,action) {             // Expects action.payload to be the searchterm imported from the state of searchBar
             state.posts.filter(post => (post.data.title !== action.payload) && (post.data.selftext !== action.payload));
-        }
+        },
+        updatePosts(state,action) {
+            state.posts = action.payload;
+        },
     },
     extraReducers: (builder) => {
         builder.addCase(fetchBySub.pending, (state,action) => {
@@ -47,4 +50,6 @@ export const postsSlice = createSlice({
 });
 
 export default postsSlice.reducer;
-export const { filterPosts } = postsSlice.actions;
+export const selectPosts = state => state.posts;
+export const { filterPosts, updatePosts } = postsSlice.actions;
+// exports also includes fetchBySub (takes argument of a sub)

src/features/reddit/redditSlice.js

@@ -73,4 +73,5 @@ export const redditSlice = createSlice({
 });
 
 export default redditSlice.reducer;
+export const selectAllSubs = state => state.subreddits;
 export const { updateSubVisibility } = redditSlice.actions;