diff --git a/src/features/posts/Feed.js b/src/features/posts/Feed.js
index 0fd42a7..126419e 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, 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 (
);
})
-
- 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 (
<>
diff --git a/src/features/posts/Post.js b/src/features/posts/Post.js
index a5a1ef0..49c394d 100644
--- a/src/features/posts/Post.js
+++ b/src/features/posts/Post.js
@@ -33,7 +33,7 @@ export default function Post({title,author,subreddit,ups,comments,time,key,media
return (
<>
-
+
{title ?
{title}
diff --git a/src/features/reddit/redditSlice.js b/src/features/reddit/redditSlice.js
index adc9cba..e92887a 100644
--- a/src/features/reddit/redditSlice.js
+++ b/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;
\ No newline at end of file
+export const { updateSubVisibility, getActiveSubs } = redditSlice.actions;
+export default redditSlice.reducer;
\ No newline at end of file
diff --git a/src/features/sidebar/Sidebar.js b/src/features/sidebar/Sidebar.js
index 0bb5e8e..7a69d44 100644
--- a/src/features/sidebar/Sidebar.js
+++ b/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 (
<>
{/* 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 (
-
+
)
})
}
diff --git a/src/features/sidebar/SidebarItem.js b/src/features/sidebar/SidebarItem.js
index 3d0ba87..a9658c5 100644
--- a/src/features/sidebar/SidebarItem.js
+++ b/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 (