From 940ac18f83b6ad1f105264ebe5cd7f6b53ce753d Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Sat, 27 Jan 2024 12:54:03 -0500 Subject: [PATCH 01/87] save ui state for filters and searching --- FU.SPA/src/components/pages/Discover.jsx | 59 ++++++++++++++++++++---- 1 file changed, 50 insertions(+), 9 deletions(-) diff --git a/FU.SPA/src/components/pages/Discover.jsx b/FU.SPA/src/components/pages/Discover.jsx index ba62b904..6884f82a 100644 --- a/FU.SPA/src/components/pages/Discover.jsx +++ b/FU.SPA/src/components/pages/Discover.jsx @@ -1,15 +1,28 @@ import { TextField, Typography } from '@mui/material'; import { useEffect, useState } from 'react'; +import { useLocation, useNavigate } from 'react-router-dom'; import { TagsSelector, GamesSelector } from '../Selectors'; import SearchService from '../../services/searchService'; import Posts from '../Posts'; import './Discover.css'; export default function Discover() { + const location = useLocation(); + const navigate = useNavigate(); + + const searchParams = new URLSearchParams(location.search); + const initialSearchText = searchParams.get('q') || ''; + const initialGames = searchParams.getAll('game'); + const initialTags = searchParams.getAll('tag'); const [posts, setPosts] = useState([]); - const [searchText, setSearchText] = useState(''); + const [searchText, setSearchText] = useState(initialSearchText); const [games, setGames] = useState([]); const [tags, setTags] = useState([]); + + useEffect(() => { + // update searchText when query changes + setSearchText(searchParams.get('q') || ''); + }, [location]); useEffect(() => { const submitSearch = async () => { @@ -25,6 +38,24 @@ export default function Discover() { submitSearch(); }, [games, tags, searchText]); + + // function for search submissions + const searchSubmit = (newSearchText) => { + setSearchText(newSearchText); + updateURL(newSearchText, games, tags); + }; + + useEffect(() => { + // build query string + const params = new URLSearchParams(); + if (searchText) params.append('q', searchText); + games.forEach(game => params.append('game', game)); + tags.forEach(tag => params.append('tag', tag)); + + // update URL + navigate(`/discover?${params.toString()}`, { replace: true }); + }, [searchText, games, tags, navigate]); + return (
@@ -33,30 +64,40 @@ export default function Discover() { setTags(v)} />
- +
); } -function SearchBar({ onSearchSubmit }) { - const [searchText, setSearchText] = useState(''); +function SearchBar({ searchText, onSearchSubmit }) { + const [localSearchText, setLocalSearchText] = useState(searchText); + + useEffect(() => { + setLocalSearchText(searchText); + }, [searchText]); - function onKeyDown(event) { + const onKeyDown = (event) => { if (event.key === 'Enter') { - onSearchSubmit(searchText); + //event.preventDefault(); + onSearchSubmit(localSearchText); } - } + }; + + const handleChange = (event) => { + setLocalSearchText(event.target.value); + }; + return ( From b1cd93a3fc9cb17fde63165ea569b5187e4e814d Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Sun, 28 Jan 2024 14:23:44 -0500 Subject: [PATCH 02/87] fixed game id --- FU.SPA/src/components/pages/Discover.jsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/FU.SPA/src/components/pages/Discover.jsx b/FU.SPA/src/components/pages/Discover.jsx index 6884f82a..ceed7017 100644 --- a/FU.SPA/src/components/pages/Discover.jsx +++ b/FU.SPA/src/components/pages/Discover.jsx @@ -19,10 +19,10 @@ export default function Discover() { const [games, setGames] = useState([]); const [tags, setTags] = useState([]); - useEffect(() => { + /*useEffect(() => { // update searchText when query changes setSearchText(searchParams.get('q') || ''); - }, [location]); + }, [location]); */ useEffect(() => { const submitSearch = async () => { @@ -49,8 +49,8 @@ export default function Discover() { // build query string const params = new URLSearchParams(); if (searchText) params.append('q', searchText); - games.forEach(game => params.append('game', game)); - tags.forEach(tag => params.append('tag', tag)); + games.forEach(game => params.append('game', game.id)); + tags.forEach(tag => params.append('tag', tag.id)); // update URL navigate(`/discover?${params.toString()}`, { replace: true }); @@ -74,18 +74,17 @@ export default function Discover() { function SearchBar({ searchText, onSearchSubmit }) { const [localSearchText, setLocalSearchText] = useState(searchText); - useEffect(() => { + useEffect(() => { setLocalSearchText(searchText); }, [searchText]); - const onKeyDown = (event) => { + function onKeyDown(event) { if (event.key === 'Enter') { - //event.preventDefault(); onSearchSubmit(localSearchText); } - }; + } - const handleChange = (event) => { + function handleChange(event) { setLocalSearchText(event.target.value); }; From f8d37c0f3aad71574ed0a1424ba1ae5668aa5e67 Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Mon, 29 Jan 2024 18:15:43 -0500 Subject: [PATCH 03/87] filters state is saved but resets within the filters menu --- FU.SPA/src/components/pages/Discover.jsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/FU.SPA/src/components/pages/Discover.jsx b/FU.SPA/src/components/pages/Discover.jsx index ceed7017..dabb9769 100644 --- a/FU.SPA/src/components/pages/Discover.jsx +++ b/FU.SPA/src/components/pages/Discover.jsx @@ -12,18 +12,14 @@ export default function Discover() { const searchParams = new URLSearchParams(location.search); const initialSearchText = searchParams.get('q') || ''; - const initialGames = searchParams.getAll('game'); - const initialTags = searchParams.getAll('tag'); + const initialGames = searchParams.getAll('game').map(gameId => ({ id: gameId })); + const initialTags = searchParams.getAll('tag').map(tagId => ({ id: tagId })); + const [posts, setPosts] = useState([]); const [searchText, setSearchText] = useState(initialSearchText); - const [games, setGames] = useState([]); - const [tags, setTags] = useState([]); + const [games, setGames] = useState(initialGames); + const [tags, setTags] = useState(initialTags); - /*useEffect(() => { - // update searchText when query changes - setSearchText(searchParams.get('q') || ''); - }, [location]); */ - useEffect(() => { const submitSearch = async () => { const query = { @@ -49,8 +45,8 @@ export default function Discover() { // build query string const params = new URLSearchParams(); if (searchText) params.append('q', searchText); - games.forEach(game => params.append('game', game.id)); - tags.forEach(tag => params.append('tag', tag.id)); + games.forEach(game => game.id && params.append('game', game.id)); + tags.forEach(tag => tag.id && params.append('tag', tag.id)); // update URL navigate(`/discover?${params.toString()}`, { replace: true }); From 5be10b05fb515362704bd16c8a6e8195a043de44 Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Wed, 31 Jan 2024 21:33:41 -0500 Subject: [PATCH 04/87] added pagination and saved in routes --- FU.SPA/src/components/pages/Discover.jsx | 37 +++++++++++++++++++----- 1 file changed, 30 insertions(+), 7 deletions(-) diff --git a/FU.SPA/src/components/pages/Discover.jsx b/FU.SPA/src/components/pages/Discover.jsx index dabb9769..fab31124 100644 --- a/FU.SPA/src/components/pages/Discover.jsx +++ b/FU.SPA/src/components/pages/Discover.jsx @@ -1,4 +1,5 @@ -import { TextField, Typography } from '@mui/material'; +import { TextField, Typography, Pagination } from '@mui/material'; +import Stack from '@mui/material/Stack'; import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { TagsSelector, GamesSelector } from '../Selectors'; @@ -9,17 +10,26 @@ import './Discover.css'; export default function Discover() { const location = useLocation(); const navigate = useNavigate(); + const [page, setPage] = useState(1); + const postsPerPage = 10; // limit of posts on a page(increase later, low for testing) const searchParams = new URLSearchParams(location.search); const initialSearchText = searchParams.get('q') || ''; const initialGames = searchParams.getAll('game').map(gameId => ({ id: gameId })); const initialTags = searchParams.getAll('tag').map(tagId => ({ id: tagId })); + // index of the last post + const lastPost = page * postsPerPage; + // index of first + const firstPost = lastPost - postsPerPage; const [posts, setPosts] = useState([]); const [searchText, setSearchText] = useState(initialSearchText); const [games, setGames] = useState(initialGames); const [tags, setTags] = useState(initialTags); + // each page has correct number of posts + const currentPosts = posts.slice(firstPost, lastPost); + useEffect(() => { const submitSearch = async () => { const query = { @@ -34,23 +44,27 @@ export default function Discover() { submitSearch(); }, [games, tags, searchText]); - // function for search submissions const searchSubmit = (newSearchText) => { setSearchText(newSearchText); - updateURL(newSearchText, games, tags); + setPage(1); // reset to page 1 on new search }; + const handlePageChange = (event, newPage) => { + setPage(newPage); + }; + useEffect(() => { // build query string const params = new URLSearchParams(); if (searchText) params.append('q', searchText); + if (page > 1) params.set('page', page); games.forEach(game => game.id && params.append('game', game.id)); tags.forEach(tag => tag.id && params.append('tag', tag.id)); - // update URL - navigate(`/discover?${params.toString()}`, { replace: true }); - }, [searchText, games, tags, navigate]); + // update URL(only show page in URL if page > 1) + navigate(`/discover${params.toString() ? `?${params.toString()}` : ''}`, { replace: true }); + }, [searchText, page, games, tags, navigate]); return (
@@ -61,7 +75,16 @@ export default function Discover() {
- + +
+ + Page: {page} + + +
); From 9459a11ac5472fcaa550f07286f733641637f2f8 Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Wed, 31 Jan 2024 21:34:57 -0500 Subject: [PATCH 05/87] if all filters are selected, with only one post, filter box extends out too far --- FU.SPA/src/components/pages/Discover.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FU.SPA/src/components/pages/Discover.jsx b/FU.SPA/src/components/pages/Discover.jsx index fab31124..345f5504 100644 --- a/FU.SPA/src/components/pages/Discover.jsx +++ b/FU.SPA/src/components/pages/Discover.jsx @@ -68,7 +68,7 @@ export default function Discover() { return (
-
+
Filters setGames(v)} /> setTags(v)} /> From d49b436ed48e6abe719998760d93322232d24532 Mon Sep 17 00:00:00 2001 From: Jackson Williams Date: Wed, 31 Jan 2024 21:43:56 -0500 Subject: [PATCH 06/87] Unnecessary semicolon --- FU.SPA/src/components/pages/Discover.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FU.SPA/src/components/pages/Discover.jsx b/FU.SPA/src/components/pages/Discover.jsx index 345f5504..7c6dbaea 100644 --- a/FU.SPA/src/components/pages/Discover.jsx +++ b/FU.SPA/src/components/pages/Discover.jsx @@ -106,7 +106,7 @@ function SearchBar({ searchText, onSearchSubmit }) { function handleChange(event) { setLocalSearchText(event.target.value); - }; + } return (