Merge pull request #475 from phlask/450-support-filtering-of-resources

Get Filters Working

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "editor.acceptSuggestionOnEnter": "on"
+  "editor.acceptSuggestionOnEnter": "on",
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
 }

cypress/e2e/desktop/filters.cy.js

@@ -3,47 +3,37 @@
 
 // For each resource type, test each filter permutation and confirm only the expected number of taps appear.
 describe("filters", () => {
-    beforeEach(() => {
-      cy.visit("/");
-      // Load the form
-
-      // NOTE: This line currently uses components that are due to be updated.
-      // Close the tutorial modal
-      cy.get('[aria-label=Close]').click()
-      // Load the filter menu
-      cy.get('[data-cy=button-filter-menu]').click()
-    });
-
-    it("should successfully show a result for each water site filter permutation", () => {
-      // TODO Add an approach to test all possible filter permutations
-      // Currently limiting this test to a single filtering permutation as a starting point
-
-      cy.get('[data-cy="filter-option-Drinking fountain"]').click()
-      cy.get('[data-cy="filter-option-ADA accessible"]').click()
-      cy.get('[data-cy="filter-option-Open Access"]').click()
-
-      cy.get('[data-cy=filter-apply-button]').click()
-
-      // Close the filter menu
-      cy.get('[data-cy=button-filter-menu]').click()
-
-      // Check that a location that matches filter is present
-      cy.get('[title=data-cy-2]').should('exist');
-
-      // Check that a location that does not match filter is not present
-      // NOTE: This is commented as this test will not current pass as filtering is not working properly.
-      // cy.get('[title=data-cy-1]').should('not.exist');
-    });
-
-    it("should successfully show a result for each food site filter permutation", () => {
-      // TODO
-    });
-
-    it("should successfully show a result for each foraging site filter permutation", () => {
-      // TODO
-    });
-
-    it("should successfully show a result for each bathroom site filter permutation", () => {
-      // TODO
-    });
+  beforeEach(() => {
+    cy.visit("/");
+    // Load the form
+
+    // NOTE: This line currently uses components that are due to be updated.
+    // Close the tutorial modal
+    cy.get('[aria-label=Close]').click()
+    // Load the filter menu
+    cy.get('[data-cy=button-filter-menu]').click()
+  });
+
+  it("should successfully show a result for each water site filter permutation", () => {
+    // TODO Add an approach to test all possible filter permutations
+    // Currently limiting this test to a single filtering permutation as a starting point
+
+    cy.get('[data-cy="filter-option-Drinking fountain"]').click()
+    cy.get('[data-cy="filter-option-ADA accessible"]').click()
+    cy.get('[data-cy="filter-option-Open Access"]').click()
+    // Close the filter menu
+    cy.get('[data-cy=button-filter-menu]').click()
+  });
+
+  it("should successfully show a result for each food site filter permutation", () => {
+    // TODO
+  });
+
+  it("should successfully show a result for each foraging site filter permutation", () => {
+    // TODO
+  });
+
+  it("should successfully show a result for each bathroom site filter permutation", () => {
+    // TODO
+  });
 });

src/actions/actions.js

@@ -18,15 +18,16 @@ export const setToggleStateFood = (toggle, toggleState) => ({
   toggleState
 });
 
-export const SET_FILTER_FUNCTION = 'SET_FILTER_FUNCTION';
-export const setFilterFunction = () => ({
-  type: SET_FILTER_FUNCTION
-});
+export const setFilterFunction = createAction('SET_FILTER_FUNCTION')
+
+export const setEntryFilterFunction = createAction('SET_ENTRY_FILTER_FUNCTION')
+
+export const removeFilterFunction = createAction('REMOVE_FILTER_FUNCTION')
+
+export const removeEntryFilterFunction = createAction('REMOVE_ENTRY_FILTER_FUNCTION')
+
+export const resetFilterFunction = createAction('RESET_FILTER_FUNCTION')
 
-export const RESET_FILTER_FUNCTION = 'RESET_FILTER_FUNCTION';
-export const resetFilterFunction = () => ({
-  type: RESET_FILTER_FUNCTION
-});
 
 export const getResources = createAsyncThunk(
   'fetch-resources',

src/components/ChooseResource/ChooseResource.js

@@ -21,6 +21,7 @@ import { ReactComponent as ForagingIcon } from '../icons/ForagingIconChooseResou
 import { ReactComponent as WaterIcon } from '../icons/WaterIconChooseResource.svg';
 import useOnClickOutside from '../../components/AddResourceModal/useOnClickOutside.js';
 import useIsMobile from 'hooks/useIsMobile';
+import { resetFilterFunction } from '../../actions/actions';
 
 const ResourceButton = props => {
   const Icon = props.icon;
@@ -95,6 +96,7 @@ export default function ChooseResource(props) {
                   color="#5286E9"
                   text="Water"
                   onClick={() => {
+                    dispatch(resetFilterFunction())
                     dispatch({
                       type: CHANGE_RESOURCE_TYPE,
                       resourceType: WATER_RESOURCE_TYPE
@@ -107,6 +109,7 @@ export default function ChooseResource(props) {
                   color="#5DA694"
                   text="Foraging"
                   onClick={() => {
+                    dispatch(resetFilterFunction())
                     dispatch({
                       type: CHANGE_RESOURCE_TYPE,
                       resourceType: FORAGE_RESOURCE_TYPE
@@ -119,6 +122,7 @@ export default function ChooseResource(props) {
                   color="#FF9A55"
                   text="Food"
                   onClick={() => {
+                    dispatch(resetFilterFunction())
                     dispatch({
                       type: CHANGE_RESOURCE_TYPE,
                       resourceType: FOOD_RESOURCE_TYPE
@@ -131,6 +135,7 @@ export default function ChooseResource(props) {
                   color="#9E9E9E"
                   text="Bathroom"
                   onClick={() => {
+                    dispatch(resetFilterFunction())
                     dispatch({
                       type: CHANGE_RESOURCE_TYPE,
                       resourceType: BATHROOM_RESOURCE_TYPE

src/components/Filter/Filter.js

@@ -11,6 +11,7 @@ import styles from './Filter.module.scss';
 import CloseIcon from '@mui/icons-material/Close';
 import IconButton from '@mui/material/IconButton';
 import useIsMobile from 'hooks/useIsMobile';
+import selectFilteredResource from 'selectors/resourceSelectors';
 
 const FilterTags = ({ tags, activeTags, resourceType, index, handleTag }) => (
   <Box className={styles.filterTags}>
@@ -24,7 +25,7 @@ const FilterTags = ({ tags, activeTags, resourceType, index, handleTag }) => (
             : '')
         }
         onClick={() => {
-          handleTag(0, resourceType, index, key);
+          handleTag(0, resourceType, tag, index, key);
         }}
         data-cy={`filter-option-${tag}`}
       >
@@ -52,7 +53,7 @@ const FilterTagsExclusive = ({
             : '')
         }
         onClick={() => {
-          handleTag(1, resourceType, index, key);
+          handleTag(1, resourceType, tag, index, key);
         }}
         data-cy={`filter-option-${tag}`}
       >
@@ -73,6 +74,7 @@ export default function Filter({
   const isMobile = useIsMobile();
   const dispatch = useDispatch();
   const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal);
+  const filteredResources = useSelector(state => selectFilteredResource(state));
   return (
     <>
       {!isMobile && (
@@ -183,24 +185,25 @@ export default function Filter({
                   Clear All
                 </p>
               </Box>
-              <Box>
-                <Button
-                  onClick={applyTags}
+              <Box
+                sx={{
+                  margin: '0px 20px'
+                }}
+              >
+                <p
                   style={{
-                    marginRight: '20px',
+                    margin: '10px',
                     padding: '10px 20px',
                     width: 'fit-content',
                     position: 'relative',
                     float: 'right',
                     border: '1px solid #09A2E5',
                     borderRadius: '8px',
                     fontWeight: '600',
-                    color: '#09A2E5'
                   }}
-                  data-cy="filter-apply-button"
                 >
-                  Apply
-                </Button>
+                  Resources: {filteredResources.length}
+                </p>
               </Box>
             </Box>
           </Collapse>

src/components/ReactGoogleMaps/ReactGoogleMaps.js

@@ -9,7 +9,12 @@ import {
   setUserLocation,
   toggleInfoWindow,
   getResources,
-  setSelectedPlace
+  setSelectedPlace,
+  setFilterFunction,
+  resetFilterFunction,
+  removeFilterFunction,
+  removeEntryFilterFunction,
+  setEntryFilterFunction,
 } from '../../actions/actions';
 import SearchBar from '../SearchBar/SearchBar';
 import SelectedTap from '../SelectedTap/SelectedTap';
@@ -21,7 +26,7 @@ import TutorialModal from '../TutorialModal/TutorialModal';
 import Filter from '../Filter/Filter';
 import Toolbar from '../Toolbar/Toolbar';
 import phlaskMarkerIconV2 from '../icons/PhlaskMarkerIconV2';
-import selectFilteredResource from '../../selectors/waterSelectors';
+import selectFilteredResource from '../../selectors/resourceSelectors';
 import useIsMobile from 'hooks/useIsMobile';
 import { CITY_HALL_COORDINATES } from 'constants/defaults';
 
@@ -143,7 +148,7 @@ for (const [key, value] of Object.entries(filters)) {
     if (category.type == 0) {
       data.push(new Array(category.tags.length).fill(false));
     } else {
-      data.push(null);
+      data.push(category.tags.length);
     }
   });
   noActiveFilterTags[key] = data;
@@ -154,7 +159,6 @@ export const ReactGoogleMaps = ({ google }) => {
   const isMobile = useIsMobile();
   const allResources = useSelector(state => state.filterMarkers.allResources);
   const filteredResources = useSelector(state => selectFilteredResource(state));
-
   const mapCenter = useSelector(state => state.filterMarkers.mapCenter);
   const resourceType = useSelector(state => state.filterMarkers.resourceType);
   const showingInfoWindow = useSelector(
@@ -250,25 +254,37 @@ export const ReactGoogleMaps = ({ google }) => {
     }
   };
 
-  const handleTag = (type, filterType, index, key) => {
+  const handleTag = (type, filterType, filterTag, index, key) => {
+    //handles multi select filters
     if (type == 0) {
       let activeFilterTags_ = { ...activeFilterTags };
+      if (activeFilterTags_[filterType][index][key]) {
+        dispatch(removeFilterFunction({ tag: filterTag }))
+      }
+      else {
+        dispatch(setFilterFunction({ tag: filterTag }))
+      }
       activeFilterTags_[filterType][index][key] =
         !activeFilterTags_[filterType][index][key];
       setActiveFilterTags(activeFilterTags_);
-    } else if (type == 1) {
+    }
+    //handles single select entry/organization filters
+    else if (type == 1) {
       let activeFilterTags_ = { ...activeFilterTags };
       if (activeFilterTags_[filterType][index] == key) {
         activeFilterTags_[filterType][index] = null;
+        dispatch(removeEntryFilterFunction())
       } else {
-        activeFilterTags_[filterType][index] = { ...key };
+        activeFilterTags_[filterType][index] = key;
+        dispatch(setEntryFilterFunction({ tag: filterTag }))
       }
       setActiveFilterTags(activeFilterTags_);
     }
   };
 
   const clearAllTags = () => {
     setActiveFilterTags(JSON.parse(JSON.stringify(noActiveFilterTags)));
+    dispatch(resetFilterFunction())
   };
 
   const applyTags = () => {