will return to sidebaritem

src/features/posts/Feed.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { fetchBySub } from "./postsSlice";
+import { fetchBySub, selectPosts } from "./postsSlice";
 import { selectAllSubs } from "../reddit/redditSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { updatePosts } from "./postsSlice";
@@ -11,17 +11,21 @@ export default function Feed() {
     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
 
+    const posts = useSelector(selectPosts);
+    const subs = useSelector(selectAllSubs);                    // Selects subreddits from redditSlice
     
-    
-    useEffect(() => {                           // this useEffect loop pulls the endpoints from the selected subreddits and stores them as an array in "endpoints"
+    useEffect(() => {                                // this useEffect loop pulls the endpoints from the selected subreddits and stores them as an array in "endpoints"
+        const subArray = Object.values(subs);        // extracts values from selected subs
+
         const prepareData = () => {
             let myEndpoints = [];
-            for (let sub of subArray) {
-                myEndpoints.push(sub.access);
+            for (let sub of subArray) {             // this loop filters subs which are set to isSelected in state
+                if (sub.isSelected) {
+                    myEndpoints.push(sub.access);
+                } else {
+                    continue;
+                }
             }
             setEndpoints(myEndpoints);
         }
@@ -38,14 +42,14 @@ export default function Feed() {
 
         const getPosts = async(arr) => {
             if (endpoints) {
-                const mappedResults = arr.map(each => dispatch(fetchBySub(each)));
+                const mappedResults = arr.map(each => dispatch(fetchBySub(each)));      // maps each endpoint into a call to dispatch fetchBySub
                 return Promise.all([
-                    ...mappedResults
-                ]).then((results) => setData(results));         // data is now set to an object (returned promise)
+                    ...mappedResults                            // ...then promises each of the calls within this array,
+                ]).then((results) => setData(results));         // and stores the returned promises in state as data
             }
         }
 
-        getPosts(endpoints);        // calls this logic on the current value of endpoints
+        getPosts(endpoints);
 
         return () => {
             isActive = false;
@@ -82,8 +86,6 @@ export default function Feed() {
 
                 let sortedPosts = extractedPosts.sort(comparePosts);        // implements sorting function
 
-                console.log(sortedPosts);
-
                 let newFeed = sortedPosts.map((post) => {
                     return (
                         <Post 
@@ -101,8 +103,8 @@ export default function Feed() {
                         />
                     );
                 })
-
-                setFeed(newFeed);       // stores this array of posts in feed
+                // dispatch(updatePosts(newFeed));    // stores current feed in state of postsSlice
+                setFeed(newFeed);
             }
 
         }
@@ -115,7 +117,7 @@ export default function Feed() {
             isActive = false;
         }
 
-    }, [data, setFeed]);
+    }, [data, setFeed, dispatch]);
 
     return (
         <>

src/features/posts/Post.js

@@ -33,7 +33,7 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
     
     return (
         <>
-        <div className="post-body">
+        <div className="post-body" key={key}>
 
             {title ?
                 <a className="title" href={`https://reddit.com${permalink}`}>{title}</a>

src/features/reddit/redditSlice.js

@@ -66,12 +66,22 @@ export const redditSlice = createSlice({
     reducers: {
         updateSubVisibility(state,action) {             // receives a subreddit name as action.payload
             state.subreddits[action.payload].isSelected = !state.subreddits[action.payload].isSelected;
-        }
+        },
+        getActiveSubs(state,action) {
+            let activeSubs = [];
+            let allSubs = state.redditSlice.subreddits;
+            for (let sub in allSubs) {
+                if (sub.isSelected) {
+                    activeSubs.push(sub);
+                } else {
+                    continue;
+                }
+            }
+        },
     },
     extraReducers: {},
 });
 
-export default redditSlice.reducer;
 export const selectAllSubs = state => state.redditSlice.subreddits;
 export const selectActiveSubs = state => {
     let activeSubs = [];
@@ -84,4 +94,5 @@ export const selectActiveSubs = state => {
     }
     return activeSubs;
 }
-export const { updateSubVisibility } = redditSlice.actions;
+export const { updateSubVisibility, getActiveSubs } = redditSlice.actions;
+export default redditSlice.reducer;

src/features/sidebar/Sidebar.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { selectAllSubs } from "../reddit/redditSlice";
+import { v4 } from 'uuid';
 import SidebarItem from "./SidebarItem";
 import './Sidebar.css';
 
@@ -26,17 +27,13 @@ export default function Sidebar({isCollapsed}) {
         }
     }
 
-    const handleClick = (e) => {
-
-    }
-
     return (
         <>
         <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>  {/* Is collapsed is passed from the parent component, and is mutable within the navbar */}
             {
                 subs.map((sub) => {             // Maps each sub to its own line within the sidebar, along with a button that toggles its "isSelected" property
                     return (
-                        <SidebarItem sub={sub} isChecked={true}/>
+                        <SidebarItem sub={sub} key={v4()}/>
                     )
                 })
             }

src/features/sidebar/SidebarItem.js

@@ -1,23 +1,24 @@
-import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { updateSubVisibility, selectAllSubs } from "../reddit/redditSlice";
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { updateSubVisibility } from "../reddit/redditSlice";
 
-export default function SidebarItem({sub, isChecked}) {
-    const [checked, setChecked] = useState(isChecked);
+export default function SidebarItem({sub}) {
+    const [visible, setVisible] = useState('hide');
     const dispatch = useDispatch();
-    const allSubs = useSelector(selectAllSubs);
 
     const handleClick = () => {
-        setChecked(!checked);
-        dispatch(updateSubVisibility(sub));
+        if (visible === 'hide') {
+            setVisible('show');
+        } else if (visible === 'show') {
+            setVisible('hide');
+        }
     }
 
-    console.log(allSubs);
-
     return (
         <div className="individual-sub">
-            <input type="checkbox" id={sub} htmlFor={sub} checked={checked} onChange={handleClick}></input>
-            <label htmlFor={sub}>{sub}</label>
+            {/* <input type="checkbox" id={sub} checked={checked} onChange={handleClick}></input> */}
+            <button id={sub} onClick={handleClick}>{visible}</button>
+            <label id={sub}>{sub}</label>
         </div>
     );
 }