From 63205cd5602e74464a9ea2a8396b06bbc6ac43bd Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Sun, 30 Jan 2022 16:36:45 -0600 Subject: [PATCH 1/5] fixed title, responsive design --- src/App.css | 13 ++++++++----- src/features/navbar/Navbar.js | 4 ++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index bb2cb7e..b8572ef 100644 --- a/src/App.css +++ b/src/App.css @@ -31,7 +31,7 @@ height: 100vh; } -.mobile-title { +.nav-title-mobile { display: none; } @@ -50,7 +50,7 @@ z-index: 9; } -.nav-title { +.nav-title-desktop { display: inline-flex; color: orchid; padding-left: 1.5rem; @@ -234,17 +234,20 @@ position: static; } - .desktop-title { + .nav-title-desktop { display: none; } - .mobile-title { + .nav-title-mobile { display: inline-flex; + color: orchid; + padding-left: 1.5rem; + font-family: 'Open Sans', sans-serif; } .nav-searchbar { width: 12rem; - right: 12rem; + right: 7rem; } .sidebar-button { diff --git a/src/features/navbar/Navbar.js b/src/features/navbar/Navbar.js index 30bff4e..d53dc72 100644 --- a/src/features/navbar/Navbar.js +++ b/src/features/navbar/Navbar.js @@ -12,8 +12,8 @@ export default function Navbar() { return ( <>
-

Reddit, but it's all cats

-

Cat Reddit

+

Reddit, but it's all cats

+

Cat Reddit

From 9d872e9170e2a5f4c702e625dac54b366ddf351c Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Sun, 30 Jan 2022 17:00:40 -0600 Subject: [PATCH 2/5] sidebar item dispatches --- src/App.css | 2 +- src/features/sidebar/Sidebar.css | 8 ++++++++ src/features/sidebar/SidebarItem.js | 20 +++++++------------- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/App.css b/src/App.css index b8572ef..20d9800 100644 --- a/src/App.css +++ b/src/App.css @@ -97,7 +97,7 @@ .sidebar { display: flex; flex-direction: column; - width: 12rem; + width: 13.5rem; position: fixed; background-color: black; color: white; diff --git a/src/features/sidebar/Sidebar.css b/src/features/sidebar/Sidebar.css index b1225db..b2b5f88 100644 --- a/src/features/sidebar/Sidebar.css +++ b/src/features/sidebar/Sidebar.css @@ -20,6 +20,14 @@ margin: 0.8rem 0; } +.individual-sub button { + margin-right: 1rem; +} + +.individual-sub label { + text-align: right; +} + .search-sub-input { margin-top: 2rem; } \ No newline at end of file diff --git a/src/features/sidebar/SidebarItem.js b/src/features/sidebar/SidebarItem.js index 5454eb6..ecc2383 100644 --- a/src/features/sidebar/SidebarItem.js +++ b/src/features/sidebar/SidebarItem.js @@ -1,23 +1,17 @@ -import React, { useState } from "react"; -// import { useDispatch } from "react-redux"; -// import { updateSubVisibility } from "../reddit/redditSlice"; +import React, { useEffect, useRef, useState } from "react"; +import { useDispatch } from "react-redux"; +import { updateSubVisibility } from "../reddit/redditSlice"; export default function SidebarItem({sub}) { - const [visible, setVisible] = useState('hide'); // dispatch will be used to dispatch updateSubVisibility on change in state - // const dispatch = useDispatch(); // this will likely be within a useEffect hook + const dispatch = useDispatch(); - const handleClick = () => { - if (visible === 'hide') { - setVisible('show'); - } else if (visible === 'show') { - setVisible('hide'); - } + const handleClick = () => { + dispatch(updateSubVisibility(sub)); } return (
- {/* */} - +
); From 1959b2c386836c0f33ef80342073739fd6d54933 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Wed, 2 Feb 2022 18:43:04 -0600 Subject: [PATCH 3/5] 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 From e3c2fd9ed0b2838202af549d92b509f19e01223c Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 4 Feb 2022 20:06:07 -0600 Subject: [PATCH 4/5] select active refactored --- src/features/reddit/redditSlice.js | 12 ++++++++++-- src/features/searchBar/searchBar.js | 19 ++++--------------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/features/reddit/redditSlice.js b/src/features/reddit/redditSlice.js index 1d98b78..5f5d930 100644 --- a/src/features/reddit/redditSlice.js +++ b/src/features/reddit/redditSlice.js @@ -83,9 +83,17 @@ export const selectAllSubs = state => state.redditSlice.subreddits; export const selectActive = state => { let subs = []; for (let sub in state.redditSlice.subreddits) { - if (sub.isSelected) {subs.push(sub)} + subs.push(sub); } - return subs; + + let activeSubs = []; + for (let each of subs) { + if (each.isSelected) { + activeSubs.push(each); + } + } + + return activeSubs; } 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 4f0eab2..7a2d7d9 100644 --- a/src/features/searchBar/searchBar.js +++ b/src/features/searchBar/searchBar.js @@ -1,29 +1,18 @@ import React, { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { searchByActive, selectSearchResults } from '../posts/postsSlice'; -import { selectAllSubs } from "../reddit/redditSlice"; +import { selectActive, 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 activeSubs = useSelector(selectActive); + console.log(activeSubs); const [term, setTerm] = useState(''); - const [activeSubs, setActiveSubs] = useState(null); const [toDispatch, setToDispatch] = useState(null); const [results, setResults] = useState(null); const searchData = useSelector(selectSearchResults); From 90374f743033ca1dc190564f6aa8346bfdb40629 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Fri, 4 Feb 2022 20:18:28 -0600 Subject: [PATCH 5/5] search function does not work --- src/features/searchBar/searchBar.js | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/src/features/searchBar/searchBar.js b/src/features/searchBar/searchBar.js index 7a2d7d9..27315c2 100644 --- a/src/features/searchBar/searchBar.js +++ b/src/features/searchBar/searchBar.js @@ -7,13 +7,9 @@ export default function SearchBar() { const dispatch = useDispatch(); const selectedSubs = useSelector(selectAllSubs); - console.log(selectedSubs); - const activeSubs = useSelector(selectActive); - console.log(activeSubs); const [term, setTerm] = useState(''); - const [toDispatch, setToDispatch] = useState(null); const [results, setResults] = useState(null); const searchData = useSelector(selectSearchResults); @@ -23,20 +19,15 @@ export default function SearchBar() { } const handleSubmit = () => { - let examples = ['r/cats', 'r/cattaps']; - let mapped = []; - if (term) { - mapped = examples.map((sub) => dispatch(searchByActive({ - sub, term - }))); - } + if (term && activeSubs) { + let extracted = []; + for (let sub in activeSubs) { + extracted.push(sub); + } - if (activeSubs) { - console.log(activeSubs); - } - - if (term) { - Promise.all([...mapped]).then((results) => setResults(results)); + console.log(extracted); + let mapped = extracted.map((sub) => dispatch(searchByActive({sub, term}))); + Promise.all([...mapped]).then((data) => setResults(data)); } } @@ -51,7 +42,7 @@ export default function SearchBar() { return () => { active = false; } - }, [results]); + }, [results, activeSubs]); return ( <>