Merge branch 'develop' into remove-tutorial

.eslintignore

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

cypress/e2e/desktop/siteInfo.cy.js

@@ -19,9 +19,9 @@ 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-resource-type-menu]').click();
+ cy.get('[data-cy=button-resource-type-menu]').click()
+ cy.get('[data-cy=button-FOOD-data-selector]').click()
+ cy.get('[data-cy=button-resource-type-menu]').click()
 
  // Load a sample food site
  // This is currently using live data, but should be updated to make use of test data.

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;