From c00a926e154a490d8efff63c5552cb3a4db16966 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 14:41:26 -0600
Subject: [PATCH 01/10] iterates subreddits into sidebar

---
 src/features/posts/Feed.js      |  2 +-
 src/features/posts/Post.js      |  2 +-
 src/features/sidebar/Sidebar.js | 31 ++++++++++++++++++++++++++-----
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index d5e878d..4fb7432 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -28,7 +28,7 @@ export default function Feed() {
                             ups={post.data.ups}
                             comments={post.data.num_comments}
                             time={post.data.created_utc}
-                            id={v4()}
+                            key={v4()}
                             media={post.data.post_hint === 'image' && post.data.url}
                             permalink={post.data.permalink}
                             selftext={post.data.selftext}
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index bc65e4a..c866081 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import './Post.css';
 
-export default function Post({title,author,subreddit,ups,comments,time,id,media,permalink,selftext,video}) {
+export default function Post({title,author,subreddit,ups,comments,time,key,media,permalink,selftext,video}) {
     const limit = 300;
     const [body, setBody] = useState(selftext);
     
diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js
index 37aca36..6ac889e 100644
--- a/src/features/sidebar/Sidebar.js
+++ b/src/features/sidebar/Sidebar.js
@@ -1,12 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { selectAllSubs } from "../reddit/redditSlice";
 
 export default function Sidebar({isCollapsed}) {
+    const allSubs = useSelector(selectAllSubs);
+    let arrayOfSubs = Object.keys(allSubs);
+    const [subs, setSubs] = useState(arrayOfSubs);
+    const [searchSubs, setSearchSubs] = useState('');
+
+    const handleChange = (e) => {
+        e.preventDefault();
+        if (e.target.value) {
+            setSearchSubs(e.target.value);
+        }
+    }
+
     return (
         <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
-            <p>Hard coded subreddit</p>
+            {
+                subs.map((sub) => {
+                    return (
+                        <div className="individual-sub">
+                            <button className="toggle-sub-active">X</button>
+                            <p>{sub}</p>
+                        </div>
+                    )
+                })
+            }
+            <input type="text" onChange={()=>{}} placeholder="Search Subs to Add"></input>
         </div>
     );
 }
\ No newline at end of file
-- 
2.49.1


From 5b1b6ed0ae77713e29f439c2f6cc59b970175351 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 14:50:51 -0600
Subject: [PATCH 02/10] styling and event handling for subreddit search

---
 src/features/sidebar/Sidebar.css | 25 +++++++++++++++++++++++++
 src/features/sidebar/Sidebar.js  | 17 +++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/features/sidebar/Sidebar.css

diff --git a/src/features/sidebar/Sidebar.css b/src/features/sidebar/Sidebar.css
new file mode 100644
index 0000000..b1225db
--- /dev/null
+++ b/src/features/sidebar/Sidebar.css
@@ -0,0 +1,25 @@
+.search-inactive {
+    display: none;
+}
+
+.search-active {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 7rem;
+    right: 17rem;
+    min-height: 25rem;
+    padding: 1.5rem;
+    background-color: grey;
+}
+
+.individual-sub {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0.8rem 0;
+}
+
+.search-sub-input {
+    margin-top: 2rem;
+}
\ No newline at end of file
diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js
index 6ac889e..1c8faf3 100644
--- a/src/features/sidebar/Sidebar.js
+++ b/src/features/sidebar/Sidebar.js
@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { selectAllSubs } from "../reddit/redditSlice";
+import './Sidebar.css';
 
 export default function Sidebar({isCollapsed}) {
     const allSubs = useSelector(selectAllSubs);
@@ -8,14 +9,21 @@ export default function Sidebar({isCollapsed}) {
     const [subs, setSubs] = useState(arrayOfSubs);
     const [searchSubs, setSearchSubs] = useState('');
 
+    const searchWindowStyle = useRef('search-inactive');
+
     const handleChange = (e) => {
         e.preventDefault();
         if (e.target.value) {
+            searchWindowStyle.current = 'search-active';
             setSearchSubs(e.target.value);
+        } else if (e.target.value === '') {
+            searchWindowStyle.current = 'search-inactive';
+            setSearchSubs('');
         }
     }
 
     return (
+        <>
         <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
             {
                 subs.map((sub) => {
@@ -27,7 +35,12 @@ export default function Sidebar({isCollapsed}) {
                     )
                 })
             }
-            <input type="text" onChange={()=>{}} placeholder="Search Subs to Add"></input>
+            <input className="search-sub-input" type="text" onChange={handleChange} placeholder="Search Subs to Add"></input>
         </div>
+        <div className={searchWindowStyle.current}>
+            <h2>Search Results for: {searchSubs}</h2>
+            <p>(results here)</p>
+        </div>
+        </>
     );
 }
\ No newline at end of file
-- 
2.49.1


From 5403267b9e3f58588d7d8d313affe0a721a736b0 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 15:13:11 -0600
Subject: [PATCH 03/10] preparing for experimental changes

---
 src/features/posts/Feed.js       |  4 +++-
 src/features/posts/Post.css      |  4 ++++
 src/features/posts/Post.js       | 14 +++++++++++---
 src/features/posts/postsSlice.js |  2 +-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index 4fb7432..1cd54c7 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import postsSlice, { fetchBySub, updatePosts, selectPosts } from "./postsSlice";
+import { fetchBySub } from "./postsSlice";
 import { selectAllSubs } from "../reddit/redditSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { v4 } from "uuid";
@@ -8,6 +8,8 @@ import Post from "./Post";
 export default function Feed() {
     const [feed, setFeed] = useState(null);
     const dispatch = useDispatch();
+
+    const subs = useSelector(selectAllSubs);
     
     useEffect(() => {
         let isActive = true;
diff --git a/src/features/posts/Post.css b/src/features/posts/Post.css
index 7577f35..5d29457 100644
--- a/src/features/posts/Post.css
+++ b/src/features/posts/Post.css
@@ -27,4 +27,8 @@ img, video {
     display: inline-flex;
     flex-direction: row;
     justify-content: space-between;
+}
+
+.post-text {
+    font-size: 1.2rem;
 }
\ No newline at end of file
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index c866081..f3eebe5 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -11,15 +11,23 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
         } else {
             return;
         }
-    })
+    }, [setBody, selftext]);
+
+    const handleHover = () => {
+        setBody(selftext);
+    }
+
+    const handleMouseOut = () => {
+        setBody(selftext.substring(0,limit) + '...');
+    }
     
     return (
         <>
-        <div className="post-body">
+        <div className="post-body" onMouseOver={handleHover} onMouseOut={handleMouseOut}>
             <a className="title" href={`https://reddit.com${permalink}`}>{title ? title : 'title'}</a>
             {media ? <img alt={title} src={media} /> : ''}
             {video ? <video controls type="video/mp4" src={video}></video> : ''}
-            <p>{body}</p>
+            <p className="post-text">{body}</p>
             <div className="post-metadata">
                 <p className="user">{author ? 'u/' + author : 'u/username'}</p>
                 <p className="time-posted">{time ? time : ''}</p>
diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js
index 7c491a8..2ef0e54 100644
--- a/src/features/posts/postsSlice.js
+++ b/src/features/posts/postsSlice.js
@@ -7,7 +7,7 @@ export const fetchBySub = createAsyncThunk(
             const myRequest = new Request(subreddit);   // initializes request
             let response = await fetch(myRequest);
             let json = await response.json();
-            let postsArray = json.data.children;        // unpacks individual post objects from the subreddit JSON file, as an array
+            let postsArray = json.data.children;        // unpacks individual post objects from the subreddit JSON response, as an array
             return postsArray;
         } catch(e) {
             console.log(e);
-- 
2.49.1


From 03a76e64a9ab067ea0aafca54a0b25daa92ba572 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 15:36:01 -0600
Subject: [PATCH 04/10] adding documentation

---
 src/App.js                         |  2 --
 src/features/posts/Feed.js         | 24 +++++++++++++-----------
 src/features/reddit/redditSlice.js |  2 +-
 src/features/sidebar/Sidebar.js    | 16 +++++++++-------
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index d081c13..6c4b11d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,8 +11,6 @@ function App() {
       <div className="content-container">
 
         <div className="feed">
-          {/* To do: import posts from post directory */}
-          {/* Map post data onto individual post cards, handle undefined values */}
           <Feed />
         </div>
         
diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index 1cd54c7..a91fe53 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -6,23 +6,24 @@ import { v4 } from "uuid";
 import Post from "./Post";
 
 export default function Feed() {
-    const [feed, setFeed] = useState(null);
+    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 dispatch = useDispatch();
-
-    const subs = useSelector(selectAllSubs);
+    
+    const subs = useSelector(selectAllSubs);                    // Selects subreddits from redditSlice
+    const subArray = Object.values(subs);                       // Places the values within an array
     
     useEffect(() => {
         let isActive = true;
 
-        const getPosts = async() => {
-            let myPosts = await dispatch(fetchBySub('https://www.reddit.com/r/cats.json'));
-            myPosts = myPosts.payload;
-            console.log(myPosts);
+        const getPosts = async(subreddit) => {
+            let myPosts = await dispatch(fetchBySub(subreddit));
+            myPosts = myPosts.payload;                                  // sets myPosts to be the array of post objects fetched from the subreddit argument
 
             if (typeof myPosts === 'object' && isActive) {
                 let newFeed = [];
-                for (let post of myPosts) {
-                    newFeed.push(
+                for (let post of myPosts) {                         // maps the data retrieved from fetchBySub onto Post components,
+                    newFeed.push(                                   // then stores them in localized array
                         <Post 
                             title={post.data.title}
                             author={post.data.author}
@@ -38,10 +39,11 @@ export default function Feed() {
                         />
                     );
                 }
-                setFeed(newFeed);
+                setFeed(newFeed);                // once populated, this array is sent to state as "feed" and rendered in this function's return method
             }
         };
-        getPosts();
+        
+        getPosts('https://www.reddit.com/r/cats.json');
 
         return () => {
             isActive = false;
diff --git a/src/features/reddit/redditSlice.js b/src/features/reddit/redditSlice.js
index 537677d..6ea3ab4 100644
--- a/src/features/reddit/redditSlice.js
+++ b/src/features/reddit/redditSlice.js
@@ -5,7 +5,7 @@ const urlBase = 'https://www.reddit.com/';
 export const redditSlice = createSlice({
     name: 'redditSlice',
     initialState: {
-        subreddits: {
+        subreddits: {                                   // the initialized list of subreddits provided with the app
             'r/cats': {
                 name: 'r/cats',
                 access: `${urlBase}r/cats.json`,
diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js
index 1c8faf3..48ba589 100644
--- a/src/features/sidebar/Sidebar.js
+++ b/src/features/sidebar/Sidebar.js
@@ -4,18 +4,20 @@ import { selectAllSubs } from "../reddit/redditSlice";
 import './Sidebar.css';
 
 export default function Sidebar({isCollapsed}) {
+
     const allSubs = useSelector(selectAllSubs);
     let arrayOfSubs = Object.keys(allSubs);
+
     const [subs, setSubs] = useState(arrayOfSubs);
     const [searchSubs, setSearchSubs] = useState('');
 
-    const searchWindowStyle = useRef('search-inactive');
+    const searchWindowStyle = useRef('search-inactive');     // this ref allows us to access and modify the class of the search window container from another part of the render function
 
     const handleChange = (e) => {
         e.preventDefault();
-        if (e.target.value) {
-            searchWindowStyle.current = 'search-active';
-            setSearchSubs(e.target.value);
+        if (e.target.value) {                                       // this logic locally stores the search term in searchSubs,
+            searchWindowStyle.current = 'search-active';            // and will dispatch a search action from the reddit slice
+            setSearchSubs(e.target.value);                          // based on the provided term
         } else if (e.target.value === '') {
             searchWindowStyle.current = 'search-inactive';
             setSearchSubs('');
@@ -24,12 +26,12 @@ export default function Sidebar({isCollapsed}) {
 
     return (
         <>
-        <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
+        <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>  {/* Is collapsed is passed from the parent component, and is mutable within the navbar */}
             {
-                subs.map((sub) => {
+                subs.map((sub) => {             // Maps each sub to its own line within the sidebar, along with a button that toggles its "isSelected" property
                     return (
                         <div className="individual-sub">
-                            <button className="toggle-sub-active">X</button>
+                            <button className="toggle-sub-active">X</button>    {/* This button will dispatch an action to change the state of this specific subreddit */}
                             <p>{sub}</p>
                         </div>
                     )
-- 
2.49.1


From 2f0b10394b79d473d8df3f7570855cd88df76547 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 15:47:20 -0600
Subject: [PATCH 05/10] 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
-- 
2.49.1


From 4577d8fbd4a909d03fef7ee723520c35df1bd43a Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 15:52:42 -0600
Subject: [PATCH 06/10] preparing for experimental changes to feed

---
 src/features/posts/Post.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index f3eebe5..a51293e 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -6,7 +6,9 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
     const [body, setBody] = useState(selftext);
     
     useEffect(() => {
-        if (selftext.length > limit) {
+        if (selftext.length === 0) {            // in the case that the post body is empty, it does not include an ellipsis on mouseout
+            return;
+        } else if (selftext.length > limit) {
             setBody(selftext.substring(0,limit) + '...');
         } else {
             return;
@@ -18,6 +20,10 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
     }
 
     const handleMouseOut = () => {
+        if (selftext.length === 0) {        // ...and then doesn't add it in after a mouseover/out
+            return;
+        }
+
         setBody(selftext.substring(0,limit) + '...');
     }
     
@@ -25,13 +31,13 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
         <>
         <div className="post-body" onMouseOver={handleHover} onMouseOut={handleMouseOut}>
             <a className="title" href={`https://reddit.com${permalink}`}>{title ? title : 'title'}</a>
-            {media ? <img alt={title} src={media} /> : ''}
-            {video ? <video controls type="video/mp4" src={video}></video> : ''}
+            {media ?     <img alt={title} src={media} />                           : ''}
+            {video ?     <video controls type="video/mp4" src={video}></video>     : ''}
             <p className="post-text">{body}</p>
             <div className="post-metadata">
                 <p className="user">{author ? 'u/' + author : 'u/username'}</p>
-                <p className="time-posted">{time ? time : ''}</p>
-                <p className="num-comments">{comments ? comments : 'comments'}</p>
+                <p className="time-posted">posted at {time ? time : '...?'}</p>
+                <p className="num-comments">{comments ? comments : 'no'} comments</p>
             </div>
         </div>
         </>
-- 
2.49.1


From a4d6aea03abaece23c21c5e9dcf11fac38ad79e4 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 17:03:26 -0600
Subject: [PATCH 07/10] renders posts from all initial subreddits

---
 src/features/posts/Feed.js       | 126 +++++++++++++++++++++++++++----
 src/features/posts/Post.js       |  39 +++++-----
 src/features/posts/postsSlice.js |  29 +++----
 3 files changed, 143 insertions(+), 51 deletions(-)

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 (
                         <Post 
                             title={post.data.title}
                             author={post.data.author}
@@ -46,24 +85,83 @@ export default function Feed() {
                             comments={post.data.num_comments}
                             time={post.data.created_utc}
                             key={v4()}
-                            media={post.data.post_hint === 'image' && post.data.url}
+                            media={post.data.post_hint === 'image' && post.url}
                             permalink={post.data.permalink}
                             selftext={post.data.selftext}
                             video={post.data.is_video ? post.data.media.reddit_video.fallback_url : null}
                         />
                     );
+                })
+
+
+                for (let post of allPosts) {
+                    newFeed.push(
+                        <Post 
+                            title={post.title}
+                            author={post.author}
+                            subreddit={post.subreddit}
+                            ups={post.ups}
+                            comments={post.num_comments}
+                            time={post.created_utc}
+                            key={v4()}
+                            media={post.post_hint === 'image' && post.url}
+                            permalink={post.permalink}
+                            selftext={post.selftext}
+                            video={post.is_video ? post.media.reddit_video.fallback_url : null}
+                        />
+                    );
                 }
-                setFeed(newFeed);                // once populated, this array is sent to state as "feed" and rendered in this function's return method
+
+                setFeed(newFeed);
             }
-        };
-        
-        getPosts();
+
+        }
+
+        mapPosts();
 
         return () => {
             isActive = false;
         }
 
-    }, [dispatch])
+    }, [data, setFeed])
+    
+    // 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
+
+    //         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
+    //                     <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}
+    //                         key={v4()}
+    //                         media={post.data.post_hint === 'image' && post.data.url}
+    //                         permalink={post.data.permalink}
+    //                         selftext={post.data.selftext}
+    //                         video={post.data.is_video ? post.data.media.reddit_video.fallback_url : null}
+    //                     />
+    //                 );
+    //             }
+    //             setFeed(newFeed);                // once populated, this array is sent to state as "feed" and rendered in this function's return method
+    //         }
+    //     };
+        
+    //     getPosts();
+
+    //     return () => {
+    //         isActive = false;
+    //     }
+
+    // }, [dispatch])
 
     return (
         <>
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index a51293e..1e67c95 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -5,36 +5,37 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
     const limit = 300;
     const [body, setBody] = useState(selftext);
     
-    useEffect(() => {
-        if (selftext.length === 0) {            // in the case that the post body is empty, it does not include an ellipsis on mouseout
-            return;
-        } else if (selftext.length > limit) {
-            setBody(selftext.substring(0,limit) + '...');
-        } else {
-            return;
-        }
-    }, [setBody, selftext]);
+    // useEffect(() => {
+    //     if (selftext.length === 0) {            // in the case that the post body is empty, it does not include an ellipsis on mouseout
+    //         return;
+    //     } else if (selftext.length > limit) {
+    //         setBody(selftext.substring(0,limit) + '...');
+    //     } else {
+    //         return;
+    //     }
+    // }, [setBody, selftext]);
 
-    const handleHover = () => {
-        setBody(selftext);
-    }
+    // const handleHover = () => {
+    //     setBody(selftext);
+    // }
 
-    const handleMouseOut = () => {
-        if (selftext.length === 0) {        // ...and then doesn't add it in after a mouseover/out
-            return;
-        }
+    // const handleMouseOut = () => {
+    //     if (selftext.length === 0) {        // ...and then doesn't add it in after a mouseover/out
+    //         return;
+    //     }
 
-        setBody(selftext.substring(0,limit) + '...');
-    }
+    //     setBody(selftext.substring(0,limit) + '...');
+    // }
     
     return (
         <>
-        <div className="post-body" onMouseOver={handleHover} onMouseOut={handleMouseOut}>
+        <div className="post-body">
             <a className="title" href={`https://reddit.com${permalink}`}>{title ? title : 'title'}</a>
             {media ?     <img alt={title} src={media} />                           : ''}
             {video ?     <video controls type="video/mp4" src={video}></video>     : ''}
             <p className="post-text">{body}</p>
             <div className="post-metadata">
+                <p>{subreddit ? 'r/' + subreddit : ''}</p>
                 <p className="user">{author ? 'u/' + author : 'u/username'}</p>
                 <p className="time-posted">posted at {time ? time : '...?'}</p>
                 <p className="num-comments">{comments ? comments : 'no'} comments</p>
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',
-- 
2.49.1


From a0d0e4ece4632cf84bc78522d58353c6fd5f8bd8 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 17:07:24 -0600
Subject: [PATCH 08/10] cleanup and adding more documentation

---
 src/features/posts/Feed.js | 35 ++++++-----------------------------
 1 file changed, 6 insertions(+), 29 deletions(-)

diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index 6c2d52e..d931285 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -44,7 +44,7 @@ export default function Feed() {
             }
         }
 
-        getPosts(endpoints);
+        getPosts(endpoints);        // calls this logic on the current value of endpoints
 
         return () => {
             isActive = false;
@@ -55,30 +55,26 @@ export default function Feed() {
     useEffect(() => {
         let isActive = true;
 
-        const mapPosts = () => {
+        const mapPosts = () => {            // the logic for extracting post data from the promise responses
             if (data) {
                 let allPosts = [];
                 for (let each of data) {
                     allPosts.push(each.payload);
                 }
 
-                let extractedPosts = [];
+                let extractedPosts = [];               // logic for flattening arrays and reducing complex variable to a layer of post objects
                 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
+                extractedPosts = extractedPosts.sort((x,y) => x.created_utc > y.created_utc);     // sorts posts by sort time (to do: fix this)
 
-                console.log(extractedPosts);
-
-                let newFeed = [];
-
-                newFeed = extractedPosts.map((post) => {
+                let newFeed = extractedPosts.map((post) => {
                     return (
                         <Post 
-                            title={post.data.title}
+                            title={post.data.title}         // each variable passed in as props
                             author={post.data.author}
                             subreddit={post.data.subreddit}
                             ups={post.data.ups}
@@ -93,25 +89,6 @@ export default function Feed() {
                     );
                 })
 
-
-                for (let post of allPosts) {
-                    newFeed.push(
-                        <Post 
-                            title={post.title}
-                            author={post.author}
-                            subreddit={post.subreddit}
-                            ups={post.ups}
-                            comments={post.num_comments}
-                            time={post.created_utc}
-                            key={v4()}
-                            media={post.post_hint === 'image' && post.url}
-                            permalink={post.permalink}
-                            selftext={post.selftext}
-                            video={post.is_video ? post.media.reddit_video.fallback_url : null}
-                        />
-                    );
-                }
-
                 setFeed(newFeed);
             }
 
-- 
2.49.1


From d0de8db5df135e0ed8fb6050b0a693bb5aa246c2 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 17:08:05 -0600
Subject: [PATCH 09/10] removing useless code

---
 src/features/posts/Feed.js | 40 +-------------------------------------
 1 file changed, 1 insertion(+), 39 deletions(-)

diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index d931285..ddccdea 100644
--- a/src/features/posts/Feed.js
+++ b/src/features/posts/Feed.js
@@ -89,7 +89,7 @@ export default function Feed() {
                     );
                 })
 
-                setFeed(newFeed);
+                setFeed(newFeed);       // stores this array of posts in feed
             }
 
         }
@@ -101,44 +101,6 @@ export default function Feed() {
         }
 
     }, [data, setFeed])
-    
-    // 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
-
-    //         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
-    //                     <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}
-    //                         key={v4()}
-    //                         media={post.data.post_hint === 'image' && post.data.url}
-    //                         permalink={post.data.permalink}
-    //                         selftext={post.data.selftext}
-    //                         video={post.data.is_video ? post.data.media.reddit_video.fallback_url : null}
-    //                     />
-    //                 );
-    //             }
-    //             setFeed(newFeed);                // once populated, this array is sent to state as "feed" and rendered in this function's return method
-    //         }
-    //     };
-        
-    //     getPosts();
-
-    //     return () => {
-    //         isActive = false;
-    //     }
-
-    // }, [dispatch])
 
     return (
         <>
-- 
2.49.1


From ec47de8d6d4dece92d08d8952c1c092c73429348 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Thu, 27 Jan 2022 17:08:50 -0600
Subject: [PATCH 10/10] more extra code

---
 src/features/posts/Feed.js       |  2 +-
 src/features/posts/postsSlice.js | 12 ------------
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index ddccdea..621560e 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, fetchFromAll } from "./postsSlice";
+import { fetchBySub } from "./postsSlice";
 import { selectAllSubs } from "../reddit/redditSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { v4 } from "uuid";
diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js
index 4ccee22..e5edaae 100644
--- a/src/features/posts/postsSlice.js
+++ b/src/features/posts/postsSlice.js
@@ -15,18 +15,6 @@ export const fetchBySub = createAsyncThunk(
     }
 );
 
-// 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',
     initialState: {
-- 
2.49.1