diff --git a/packages/web/src/components/Map/Map.jsx b/packages/web/src/components/Map/Map.jsx index 5181db2..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,27 +126,16 @@ export default function Map({ const fuse = new Fuse(data, fuseOptions); const results = fuse.search(search).map((result) => result.item); - const filterItem = useCallback( - (item) => { - return ( - search.toLowerCase() === "" || - (((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 markersData = results.length > 0 ? results : data; - const allMarkers = markersData.filter(filterItem).map((item) => { + const allMarkers = markersData.filter(filterItemCallback).map((item) => { return ( { diff --git a/packages/web/src/components/ResultsBar/ResultsBar.jsx b/packages/web/src/components/ResultsBar/ResultsBar.jsx index 52acf7f..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,21 +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 ( - search.toLowerCase() === "" || - (((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( @@ -67,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