Refactor resource modal - v2 (#463)

* Prettier formatting

* Refactor resource menu show/hide

The mobile resource menu modal shown state was being handled with
its own action, TOGGLE_RESOURCE_MENU. Here we retire that action,
and instead use SET_TOOLBAR_MODAL, which is consistent with how
other toolbar modals' shown state is being handled on both mobile
and desktop.

* Refactor of resource selection

Consolidate behavior of CHANGE_RESOURCE_TYPE and TOGGLE_RESOURCE_TYPE
actions into one new action, SET_RESOURCE_TYPE.

* Remove unused past component

* Reorganize resource selection components

Use consistent naming for mobile and desktop resource menu
components, and bring to one location.

* Remove currently unnecessary isMobile condition

Currently the isMobile condition occurs on the parent component,
and so is not needed in DesktopChooseResource.js.

* Prefer hooks over using redux connect for dispatch

* Remove unused import

* Minor code order change

* Fix - use redux variable directly, not from props

* Use strict equality comparisons

* Remove no longer used component

* Close choose resource modal on mobile after click

On mobile, we close the choose resource modal upon resource selection to
conserve screen space.

* Prefer using `createAction`

* Change component name to ChooseResourceType

* Share common data, tweak approach

Share common data between Mobile and Desktop ChooseResourceType
components. And, use a more consistent approach and naming for Desktop
and Mobile.

* Prefer `sx` over `style` prop for mui components

* Use strict equality comparison

* Fixes siteInfo test to match new selector value

---------

Co-authored-by: Gabriel Cardona <2278918+gcardonag@users.noreply.github.com>

.eslintignore

@@ -10,4 +10,3 @@ build/
 
 # Unused files
 Legend.js
-TypeToggle.js

cypress/e2e/desktop/siteInfo.cy.js

@@ -20,7 +20,7 @@ describe("site info", () => {
   it("should successfully display a food site", () => {
     // Switch to food view
     cy.get('[data-cy=button-resource-type-menu]').click()
-    cy.get('[data-cy=button-food-data-selector').click()
+    cy.get('[data-cy=button-FOOD-data-selector]').click()
     cy.get('[data-cy=button-resource-type-menu]').click()
 
     // Load a sample food site

src/actions/actions.js

@@ -68,9 +68,8 @@ export const setMapCenter = coords => ({
   type: SET_MAP_CENTER,
   coords
 });
-export const toggleInfoWindow = createAction('TOGGLE_INFO_WINDOW');
 
-export const TOGGLE_INFO_WINDOW_CLASS = 'TOGGLE_INFO_WINDOW_CLASS';
+export const toggleInfoWindow = createAction('TOGGLE_INFO_WINDOW');
 export const toggleInfoWindowClass = createAction('TOGGLE_INFO_WINDOW_CLASS');
 
 export const TOGGLE_INFO_EXPANDED = 'TOGGLE_INFO_EXPANDED';
@@ -103,12 +102,4 @@ export const TOOLBAR_MODAL_FILTER = 'TOOLBAR_MODAL_FILTER';
 export const TOOLBAR_MODAL_SEARCH = 'TOOLBAR_MODAL_SEARCH';
 export const TOOLBAR_MODAL_CONTRIBUTE = 'TOOLBAR_MODAL_CONTRIBUTE';
 
-export const toggleResourceType = createAction('TOGGLE_RESOURCE_TYPE');
-
-export const toggleResourceMenu = createAction('TOGGLE_RESOURCE_MENU');
-
-export const CHANGE_RESOURCE_TYPE = 'CHANGE_RESOURCE_TYPE';
-export const changeResourceType = resourceType => ({
-  type: CHANGE_RESOURCE_TYPE,
-  resourceType
-});
+export const setResourceType = createAction('SET_RESOURCE_TYPE');

src/components/AddResourceModal/useOnClickOutside.js

@@ -1,23 +1,23 @@
 import { useEffect } from "react";
 
 const useOnClickOutside = (ref, callback) => {
-    useEffect(() => {
-      const listener = (event) => {
-        if (!ref.current || ref.current.contains(event.target)) {
-          return;
-        }
-  
-        callback(event);
-      };
-  
-      document.addEventListener('mousedown', listener);
-      document.addEventListener('touchstart', listener);
-  
-      return () => {
-        document.removeEventListener('mousedown', listener);
-        document.removeEventListener('touchstart', listener);
-      };
-    }, [ref, callback]);
-  };
-  
-  export default useOnClickOutside;
+  useEffect(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+
+      callback(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, callback]);
+};
+
+export default useOnClickOutside;

src/components/ChooseResourceType/ChooseResourceType.js

@@ -0,0 +1,63 @@
+import useIsMobile from 'hooks/useIsMobile';
+import DesktopChooseResourceType from './DesktopChooseResourceType';
+import MobileChooseResourceType from './MobileChooseResourceType';
+import { ReactComponent as DesktopBathroomIcon } from '../icons/BathroomIconChooseResource.svg';
+import { ReactComponent as DesktopFoodIcon } from '../icons/FoodIconChooseResource.svg';
+import { ReactComponent as DesktopForagingIcon } from '../icons/ForagingIconChooseResource.svg';
+import { ReactComponent as DesktopWaterIcon } from '../icons/WaterIconChooseResource.svg';
+import { ReactComponent as MobileWaterIcon } from '../icons/WaterIconV2.svg';
+import { ReactComponent as MobileFoodIcon } from '../icons/FoodIconV2.svg';
+import { ReactComponent as MobileForagingIcon } from '../icons/ForagingIconV2.svg';
+import { ReactComponent as MobileBathroomIcon } from '../icons/ToiletIconV2.svg';
+import {
+  WATER_RESOURCE_TYPE,
+  FOOD_RESOURCE_TYPE,
+  FORAGE_RESOURCE_TYPE,
+  BATHROOM_RESOURCE_TYPE
+} from '../../types/ResourceEntry';
+
+const resourceTypeInfo = [
+  {
+    type: WATER_RESOURCE_TYPE,
+    textLabel: 'Water',
+    color: "#5286E9",
+    desktopIcon: DesktopWaterIcon,
+    mobileIcon: MobileWaterIcon,
+  },
+  {
+    type: FOOD_RESOURCE_TYPE,
+    textLabel: 'Food',
+    color: "#FF9A55",
+    desktopIcon: DesktopFoodIcon,
+    mobileIcon: MobileFoodIcon,
+  },
+  {
+    type: FORAGE_RESOURCE_TYPE,
+    textLabel: 'Foraging',
+    color: "#5DA694",
+    desktopIcon: DesktopForagingIcon,
+    mobileIcon: MobileForagingIcon,
+  },
+  {
+    type: BATHROOM_RESOURCE_TYPE,
+    textLabel: 'Bathroom',
+    color: "#9E9E9E",
+    desktopIcon: DesktopBathroomIcon,
+    mobileIcon: MobileBathroomIcon,
+  }
+]
+
+const ChooseResourceType = () => {
+
+  const isMobile = useIsMobile();
+
+  return (
+    <>{!isMobile ?
+      <DesktopChooseResourceType resourceTypeInfo={resourceTypeInfo} />
+      :
+      <MobileChooseResourceType resourceTypeInfo={resourceTypeInfo} />}
+    </>
+  );
+};
+
+export default ChooseResourceType;