From d92317c1207e222c2e6fd065fee3877554cd000a Mon Sep 17 00:00:00 2001 From: ivamach Date: Thu, 18 Apr 2024 18:20:43 +0200 Subject: [PATCH 1/5] SMA-104: placeholder in the search bar is now a property --- frontend/sportsmatch-app/src/components/AllSportsList.tsx | 1 + frontend/sportsmatch-app/src/components/SearchBar.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/sportsmatch-app/src/components/AllSportsList.tsx b/frontend/sportsmatch-app/src/components/AllSportsList.tsx index 13e70b83..01d5eaba 100644 --- a/frontend/sportsmatch-app/src/components/AllSportsList.tsx +++ b/frontend/sportsmatch-app/src/components/AllSportsList.tsx @@ -89,6 +89,7 @@ export function AllSportsList(p: AllSportsProps) { onChange={(query: string) => { setSearchQuery(query) }} + placeholder="Find your sport" /> {sportList}
diff --git a/frontend/sportsmatch-app/src/components/SearchBar.tsx b/frontend/sportsmatch-app/src/components/SearchBar.tsx index f35b87e5..88dd0ff3 100644 --- a/frontend/sportsmatch-app/src/components/SearchBar.tsx +++ b/frontend/sportsmatch-app/src/components/SearchBar.tsx @@ -3,6 +3,7 @@ import '../styles/Sport.css' interface Params { onChange: (query: string) => void + placeholder: string } export function SearchBar(p: Params) { @@ -16,7 +17,7 @@ export function SearchBar(p: Params) { From aa6255b37789de98a7c5b8082d5a95b15dadd219 Mon Sep 17 00:00:00 2001 From: ivamach Date: Sun, 21 Apr 2024 18:34:20 +0200 Subject: [PATCH 2/5] SMA-104: updated clear filter, used search query to filter place name --- frontend/sportsmatch-app/src/pages/Index.tsx | 40 ++++++++++---------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx index e9e99f67..94b38f22 100644 --- a/frontend/sportsmatch-app/src/pages/Index.tsx +++ b/frontend/sportsmatch-app/src/pages/Index.tsx @@ -3,7 +3,7 @@ import SportEvent from '../components/SportEvent' import LoadingSpinner from '../components/LoadingSpinner' import { SearchBar } from '../components/SearchBar' import { useEffect, useState } from 'react' -import { useLocation, useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import '../styles/Index.css' import { ApiError, @@ -17,23 +17,17 @@ import Modal from '../components/Modal' import JoinEventComponent from '../components/JoinEventComponent' export default function MainPage() { - const [searchQuery, setSearchQuery] = useState('') // no implementation yet + const [searchQuery, setSearchQuery] = useState('') const [filteredEvent, setFilteredEvent] = useState([]) const [selectedSports, setSelectedSports] = useState([]) const [clearFilters, setClearFilters] = useState(false) const [selectedEvent, setSelectedEvent] = useState() const [usersRank, setUsersRank] = useState(0) const [userIsInRank, setUserIsInRank] = useState(false) - const location = useLocation() const navigate = useNavigate() const { isOpen, toggle } = useModal() const [page, setPage] = useState(0) - const size = 5 - - // search bar is not yet implemented - useEffect(() => { - console.log(`query`, searchQuery) - }, [searchQuery]) + const size = 3 // handle sports name selected from sportButtoncomponent const handleSportSelectionChange = (selectedButtonSports: string[]) => { @@ -41,7 +35,8 @@ export default function MainPage() { } const clear = () => { - navigate(location.pathname, { state: undefined }) + setPage(0) + setFilteredEvent([]) setSelectedSports([]) setClearFilters(true) setTimeout(() => { @@ -158,6 +153,7 @@ export default function MainPage() { onChange={(query: string) => { setSearchQuery(query) }} + placeholder="Find your place" />
@@ -174,15 +170,21 @@ export default function MainPage() { {filteredEvent.length === 0 ? ( ) : ( - filteredEvent.map((event, index) => ( -
handleEventSelection(event)} - > - -
- )) + filteredEvent + .filter((e) => + e.placeDTO.name + .toLowerCase() + .includes(searchQuery.toLowerCase()), + ) + .map((event, index) => ( +
handleEventSelection(event)} + > + +
+ )) )} From ce3561ed160d912f69cad0162d2b8d657f456cb6 Mon Sep 17 00:00:00 2001 From: ivamach Date: Sun, 21 Apr 2024 18:35:32 +0200 Subject: [PATCH 3/5] SMA-104: deleted scroll to, not needed after fixing the modal position --- frontend/sportsmatch-app/src/pages/Index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx index 94b38f22..be8b2dee 100644 --- a/frontend/sportsmatch-app/src/pages/Index.tsx +++ b/frontend/sportsmatch-app/src/pages/Index.tsx @@ -78,7 +78,6 @@ export default function MainPage() { // handle join event pop up after cliking on the event const handleEventSelection = (e: EventDTO) => { - window.scrollTo(0, 0) if (isOpen) { toggle() } From ac82146d5f41c68ee406cd78df8cdc80ad0f361f Mon Sep 17 00:00:00 2001 From: ivamach Date: Sun, 21 Apr 2024 20:59:48 +0200 Subject: [PATCH 4/5] SMA-104: page is set to 0 when selected sports change to clear the filteredEvent --- frontend/sportsmatch-app/src/pages/Index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/sportsmatch-app/src/pages/Index.tsx b/frontend/sportsmatch-app/src/pages/Index.tsx index be8b2dee..0edc45d2 100644 --- a/frontend/sportsmatch-app/src/pages/Index.tsx +++ b/frontend/sportsmatch-app/src/pages/Index.tsx @@ -34,9 +34,13 @@ export default function MainPage() { setSelectedSports(selectedButtonSports) } + // setting the page to 0 when selected sports change to clear the filteredEvent + useEffect(() => { + setPage(0) + }, [selectedSports]) + const clear = () => { setPage(0) - setFilteredEvent([]) setSelectedSports([]) setClearFilters(true) setTimeout(() => { From e341ae66827876b4811700571d416eb6eeefb419 Mon Sep 17 00:00:00 2001 From: ivamach Date: Sun, 21 Apr 2024 21:10:59 +0200 Subject: [PATCH 5/5] SMA-104: updated HostEventComponent to SearchBar chnages --- frontend/sportsmatch-app/src/components/HostEventComponent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx index 09d19318..65da1f7d 100644 --- a/frontend/sportsmatch-app/src/components/HostEventComponent.tsx +++ b/frontend/sportsmatch-app/src/components/HostEventComponent.tsx @@ -290,6 +290,7 @@ function HostEventComponent() { onChange={(query: string) => { setSearchQuery(query) }} + placeholder="search" />