From cfe92667a128693280adb7c116edcfcd6ec143b2 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 12:27:08 -0600
Subject: [PATCH] experimenting with fetching posts

---
 package-lock.json                  |  3 ++
 package.json                       |  3 ++
 src/App.js                         |  7 +---
 src/features/posts/Feed.js         | 61 ++++++++++++++++++++++++++++++
 src/features/posts/Post.js         |  3 +-
 src/features/posts/postsSlice.js   |  9 ++++-
 src/features/reddit/redditSlice.js |  1 +
 7 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 src/features/posts/Feed.js

diff --git a/package-lock.json b/package-lock.json
index 969c081..b14bb7e 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/package.json b/package.json
index 4ab844f..7bd4505 100644
--- a/package.json
+++ b/package.json
@@ -32,5 +32,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "uuid": "^8.3.2"
   }
 }
diff --git a/src/App.js b/src/App.js
index 6d37811..fa3593e 100644
--- a/src/App.js
+++ b/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 />
-          <Post />
-          <Post />
-          <Post />
+          <Feed />
           <Post />
         </div>
         
diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
new file mode 100644
index 0000000..859b749
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index f406cdc..392f843 100644
--- a/src/features/posts/Post.js
+++ b/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">
diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js
index 9413cee..46c2d2c 100644
--- a/src/features/posts/postsSlice.js
+++ b/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;
\ No newline at end of file
+export const selectPosts = state => state.posts;
+export const { filterPosts, updatePosts } = postsSlice.actions;
+// exports also includes fetchBySub (takes argument of a sub)
\ No newline at end of file
diff --git a/src/features/reddit/redditSlice.js b/src/features/reddit/redditSlice.js
index ae2524f..5184af4 100644
--- a/src/features/reddit/redditSlice.js
+++ b/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;
\ No newline at end of file