Merge pull request #17 from icssc/item-filter

Filter Items on Map and Results Bar
icssc · May 19, 2024 · 3b99c06 · 3b99c06
2 parents 55e4615 + 9134d1f
commit 3b99c06
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 33 deletions.
diff --git 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 (
       <Marker
-        key={item.location}
+        key={item.key}
         position={item.location}
         eventHandlers={{
           click: () => {

diff --git 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
@@ -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 };