From 1959b2c386836c0f33ef80342073739fd6d54933 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Wed, 2 Feb 2022 18:43:04 -0600 Subject: [PATCH] problems with active sub selector --- src/features/posts/postsSlice.js | 41 +++++++++++++++++++- src/features/reddit/redditSlice.js | 25 +++++------- src/features/searchBar/searchBar.js | 59 ++++++++++++++++++++++++++--- 3 files changed, 102 insertions(+), 23 deletions(-) diff --git a/src/features/posts/postsSlice.js b/src/features/posts/postsSlice.js index 0c57117..b4360e3 100644 --- a/src/features/posts/postsSlice.js +++ b/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) \ No newline at end of file +// exports also includes fetchComments (takes argument of a post permalink) +// exports also includes searchByActive \ No newline at end of file diff --git a/src/features/reddit/redditSlice.js b/src/features/reddit/redditSlice.js index e92887a..1d98b78 100644 --- a/src/features/reddit/redditSlice.js +++ b/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; \ No newline at end of file diff --git a/src/features/searchBar/searchBar.js b/src/features/searchBar/searchBar.js index 6973652..4f0eab2 100644 --- a/src/features/searchBar/searchBar.js +++ b/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 ( <> + ); } \ No newline at end of file