From 9bf02a7aac8f4637d019a9178a82157654f49f7b Mon Sep 17 00:00:00 2001 From: Rebecca-123 Date: Sat, 18 May 2024 21:33:23 -0700 Subject: [PATCH 1/3] fix filter conditions and change marker key --- packages/web/src/components/Map/Map.jsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/web/src/components/Map/Map.jsx b/packages/web/src/components/Map/Map.jsx index 5181db2..09fadca 100644 --- a/packages/web/src/components/Map/Map.jsx +++ b/packages/web/src/components/Map/Map.jsx @@ -126,25 +126,24 @@ export default function Map({ const filterItem = useCallback( (item) => { - return ( - search.toLowerCase() === "" || - (((findFilter.isLost && item.isLost) || - (findFilter.isFound && !item.isLost)) && + return (((findFilter.islost && item.islost) || + (findFilter.isFound && !item.islost)) && (findFilter.type === "everything" || findFilter.type === item.type) && (findFilter.uploadDate === "" || (item.itemDate && item.itemDate.includes(findFilter.uploadDate))) && (!findFilter.isYourPosts || item.email === user.email) && - (findFilter.isShowReturned || !item.isResolved)) + (findFilter.isShowReturned || !item.isResolved) ); }, - [search, findFilter, user] + [findFilter, user] ); + const markersData = results.length > 0 ? results : data; const allMarkers = markersData.filter(filterItem).map((item) => { return ( { @@ -161,7 +160,7 @@ export default function Map({ > ); }); - + // moves map when focusLocation state changes function MapFocusLocation({ location }) { const map = useMap(); From aae4097a2f79bb451f2ad16291889b3ca7d506af Mon Sep 17 00:00:00 2001 From: Rebecca-123 Date: Sat, 18 May 2024 21:43:42 -0700 Subject: [PATCH 2/3] fix results bar filtering --- packages/web/src/components/ResultsBar/ResultsBar.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/web/src/components/ResultsBar/ResultsBar.jsx b/packages/web/src/components/ResultsBar/ResultsBar.jsx index 52acf7f..f114ab1 100644 --- a/packages/web/src/components/ResultsBar/ResultsBar.jsx +++ b/packages/web/src/components/ResultsBar/ResultsBar.jsx @@ -21,15 +21,13 @@ export default function ResultsBar({ // Define callback function to return filtered items (filtered according to search bar and filter markers) const filterItem = useCallback( (item) => { - return ( - search.toLowerCase() === "" || - (((findFilter.isLost && item.isLost) || + return (((findFilter.isLost && item.isLost) || (findFilter.isFound && !item.isLost)) && (findFilter.type === "everything" || findFilter.type === item.type) && (findFilter.uploadDate === "" || (item.itemDate && item.itemDate.includes(findFilter.uploadDate))) && (!findFilter.isYourPosts || item.email === user.email) && - (findFilter.isShowReturned || !item.isResolved)) + (findFilter.isShowReturned || !item.isResolved) ); }, [search, findFilter, user] From 9134d1f25cd6aee21eeb50f9983a453b2881f576 Mon Sep 17 00:00:00 2001 From: Rebecca-123 Date: Sat, 18 May 2024 22:08:24 -0700 Subject: [PATCH 3/3] move filterItem to utils --- packages/web/src/components/Map/Map.jsx | 20 +++++------------ .../src/components/ResultsBar/ResultsBar.jsx | 22 ++++++------------- packages/web/src/utils/Utils.js | 13 +++++++++++ 3 files changed, 26 insertions(+), 29 deletions(-) create mode 100644 packages/web/src/utils/Utils.js diff --git a/packages/web/src/components/Map/Map.jsx b/packages/web/src/components/Map/Map.jsx index 09fadca..71063a6 100644 --- a/packages/web/src/components/Map/Map.jsx +++ b/packages/web/src/components/Map/Map.jsx @@ -33,6 +33,8 @@ import { UserAuth } from "../../context/AuthContext"; import axios from "axios"; +import { filterItem } from '../../utils/Utils.js'; + /** * Map is uses react-leaflet's API to communicate user actions to map entities and information * @@ -124,23 +126,13 @@ export default function Map({ const fuse = new Fuse(data, fuseOptions); const results = fuse.search(search).map((result) => result.item); - const filterItem = useCallback( - (item) => { - return (((findFilter.islost && item.islost) || - (findFilter.isFound && !item.islost)) && - (findFilter.type === "everything" || findFilter.type === item.type) && - (findFilter.uploadDate === "" || - (item.itemDate && item.itemDate.includes(findFilter.uploadDate))) && - (!findFilter.isYourPosts || item.email === user.email) && - (findFilter.isShowReturned || !item.isResolved) - ); - }, + const filterItemCallback = useCallback( + (item) => filterItem(item, findFilter, user), [findFilter, user] ); - const markersData = results.length > 0 ? results : data; - const allMarkers = markersData.filter(filterItem).map((item) => { + const allMarkers = markersData.filter(filterItemCallback).map((item) => { return ( ); }); - + // moves map when focusLocation state changes function MapFocusLocation({ location }) { const map = useMap(); diff --git a/packages/web/src/components/ResultsBar/ResultsBar.jsx b/packages/web/src/components/ResultsBar/ResultsBar.jsx index f114ab1..23ba064 100644 --- a/packages/web/src/components/ResultsBar/ResultsBar.jsx +++ b/packages/web/src/components/ResultsBar/ResultsBar.jsx @@ -6,6 +6,8 @@ import DataContext from "../../context/DataContext"; import { UserAuth } from "../../context/AuthContext"; import Fuse from "fuse.js"; +import { filterItem } from '../../utils/Utils.js'; + export default function ResultsBar({ search, findFilter, @@ -18,19 +20,9 @@ export default function ResultsBar({ const [itemsonScreenLimit, setItemsOnScreenLimit] = useState(10); - // Define callback function to return filtered items (filtered according to search bar and filter markers) - const filterItem = useCallback( - (item) => { - return (((findFilter.isLost && item.isLost) || - (findFilter.isFound && !item.isLost)) && - (findFilter.type === "everything" || findFilter.type === item.type) && - (findFilter.uploadDate === "" || - (item.itemDate && item.itemDate.includes(findFilter.uploadDate))) && - (!findFilter.isYourPosts || item.email === user.email) && - (findFilter.isShowReturned || !item.isResolved) - ); - }, - [search, findFilter, user] + const filterItemCallback = useCallback( + (item) => filterItem(item, findFilter, user), + [findFilter, user] ); const mapItem = useCallback( @@ -65,8 +57,8 @@ export default function ResultsBar({ let allResults = search === "" - ? data.filter(filterItem).map(mapItem) - : results.filter(filterItem).map(mapItem); + ? data.filter(filterItemCallback).map(mapItem) + : results.filter(filterItemCallback).map(mapItem); // Callback function that increases the number of items displayed on the screen by 10 const handleLoadMore = useCallback(() => { diff --git a/packages/web/src/utils/Utils.js b/packages/web/src/utils/Utils.js new file mode 100644 index 0000000..a5b0731 --- /dev/null +++ b/packages/web/src/utils/Utils.js @@ -0,0 +1,13 @@ + // Define callback function to return filtered items (filtered according to search bar and filter markers) + const filterItem = (item, findFilter, user) => { + return (((findFilter.islost && item.islost) || + (findFilter.isFound && !item.islost)) && + (findFilter.type === "everything" || findFilter.type === item.type) && + (findFilter.uploadDate === "" || + (item.itemDate && item.itemDate.includes(findFilter.uploadDate))) && + (!findFilter.isYourPosts || item.email === user.email) && + (findFilter.isShowReturned || !item.isResolved) + ); + }; + + export { filterItem }; \ No newline at end of file