src/features/posts/postsSlice.js

@@ -29,11 +29,32 @@ export const fetchComments = createAsyncThunk(
     }
 );
 
+export const searchByActive = createAsyncThunk(
+    'posts/searchByActive',
+    async(obj) => {
+        const { sub, term } = obj;
+        try {
+            let fulfilledResponse;
+            const myRequest = new Request(`https://www.reddit.com/${sub}/search.json?q=${term}&restrict_sr=1&sr_nsfw=`);
+            let response = await fetch(myRequest);
+            if (response.ok) {
+                let searchData = await response.json();
+                fulfilledResponse = searchData;
+            }
+            return fulfilledResponse;
+
+        } catch(e) {
+            console.log(e);
+        }
+    }
+)
+
 export const postsSlice = createSlice({
     name: 'posts',
     initialState: {
         posts: [],
         activeComments: [],
+        searchResults: [],
         requestsPending: false,
         requestDenied: false,
     },
@@ -43,7 +64,7 @@ export const postsSlice = createSlice({
         },
         updatePosts(state,action) {
             state.posts = action.payload;
-        },
+        }
     },
     extraReducers: (builder) => {
         builder.addCase(fetchBySub.pending, (state,action) => {
@@ -75,12 +96,28 @@ export const postsSlice = createSlice({
             state.requestDenied = false;
             state.activeComments.push(action.payload);
         })
+
+        builder.addCase(searchByActive.pending, (state,action) => {
+            state.requestsPending = true;
+            state.requestDenied = false;
+        })
+        builder.addCase(searchByActive.rejected, (state,action) => {
+            state.requestsPending = false;
+            state.requestDenied = true;
+        })
+        builder.addCase(searchByActive.fulfilled, (state,action) => {
+            state.requestsPending = false;
+            state.requestDenied = false;
+            state.searchResults = action.payload;
+        })
     }
 });
 
 export default postsSlice.reducer;
 export const selectPosts = state => state.postsSlice.posts;
 export const isPending = state => state.postsSlice.requestsPending;
+export const selectSearchResults = state => state.postsSlice.searchResults;
 export const { filterPosts, updatePosts } = postsSlice.actions;
 // exports also includes fetchBySub (takes argument of a sub)
-// exports also includes fetchComments (takes argument of a post permalink)
+// exports also includes fetchComments (takes argument of a post permalink)
+// exports also includes searchByActive

src/features/reddit/redditSlice.js

@@ -62,6 +62,7 @@ export const redditSlice = createSlice({
                 isSelected: true
             }
         },
+        formattedActive: []
     },
     reducers: {
         updateSubVisibility(state,action) {             // receives a subreddit name as action.payload
@@ -69,30 +70,22 @@ export const redditSlice = createSlice({
         },
         getActiveSubs(state,action) {
             let activeSubs = [];
-            let allSubs = state.redditSlice.subreddits;
-            for (let sub in allSubs) {
-                if (sub.isSelected) {
-                    activeSubs.push(sub);
-                } else {
-                    continue;
-                }
+            for (let sub in state.subreddits) {
+                sub.isSelected && activeSubs.push(sub.name);
             }
+            state.formattedActive = activeSubs;
         },
     },
     extraReducers: {},
 });
 
 export const selectAllSubs = state => state.redditSlice.subreddits;
-export const selectActiveSubs = state => {
-    let activeSubs = [];
-    for (let it in state.redditSlice.subreddits) {
-        if (it.isSelected) {
-            activeSubs.push(it);
-        } else {
-            continue;
-        }
+export const selectActive = state => {
+    let subs = [];
+    for (let sub in state.redditSlice.subreddits) {
+        if (sub.isSelected) {subs.push(sub)}
     }
-    return activeSubs;
+    return subs;
 }
 export const { updateSubVisibility, getActiveSubs } = redditSlice.actions;
 export default redditSlice.reducer;

src/features/searchBar/searchBar.js

@@ -1,24 +1,73 @@
 import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { searchByActive, selectSearchResults } from '../posts/postsSlice';
+import { selectAllSubs } from "../reddit/redditSlice";
 
 export default function SearchBar() {
+    const dispatch = useDispatch();
+
+    const selectedSubs = useSelector(selectAllSubs);
+    console.log(selectedSubs);
+
+    const handleActive = () => {
+        let names = [];
+        for (let name in selectedSubs) {
+            names.push(name);
+        }
+
+        console.log(names);
+
+        console.log(Object.values(selectedSubs[0]));
+    }
+
+    handleActive();
+    
     const [term, setTerm] = useState('');
+    const [activeSubs, setActiveSubs] = useState(null);
+    const [toDispatch, setToDispatch] = useState(null);
+    const [results, setResults] = useState(null);
+    const searchData = useSelector(selectSearchResults);
 
     const handleChange = (e) => {
         e.preventDefault();
         setTerm(e.target.value);
     }
 
-    useEffect(() => {
+    const handleSubmit = () => {
+        let examples = ['r/cats', 'r/cattaps'];
+        let mapped = [];
         if (term) {
-            // dispatch an action which filters content by {term}
-        } else {
-            return;
+            mapped = examples.map((sub) => dispatch(searchByActive({
+                sub, term
+            })));
         }
-    }, [term])
+
+        if (activeSubs) {
+            console.log(activeSubs);
+        }
+
+        if (term) {
+            Promise.all([...mapped]).then((results) => setResults(results));
+        }
+    }
+
+
+    useEffect(() => {
+        let active = true;
+
+        if (results && active) {
+            console.log(results);
+        }
+
+        return () => {
+            active = false;
+        }
+    }, [results]);
 
     return (
         <>
         <input type="text" className="nav-searchbar" placeholder="Search posts" value={term ? term : ''} onChange={handleChange} />
+        <input type="submit" onClick={handleSubmit}></input>
         </>
     );
 }