Merge pull request #1149 from hackforla/1141-Map-SelectOptions

1141 map select options

client/components/main/Desktop/TypeSelector/index.js

@@ -2,14 +2,16 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { updateRequestTypes } from '@reducers/filters';
+import { updateRequestTypes,} from '@reducers/filters';
 import { makeStyles } from '@material-ui/core/styles';
 
 import Grid from '@material-ui/core/Grid';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
 // import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import useToggle from './isToggle.js';
+
 
 const useStyles = makeStyles(theme => ({
   label: {
@@ -27,6 +29,9 @@ const useHeaderStyles = makeStyles(theme => ({
   }
 }))
 
+
+
+
 const RequestTypeSelector = ({
   requestTypes,
   updateTypesFilter,
@@ -36,6 +41,7 @@ const RequestTypeSelector = ({
   const [rightCol, setRightCol] = useState();
   const classes = useStyles();
   const headerClass = useHeaderStyles();
+  const [isToggled, toggle] = useToggle(false);
 
   useEffect(() => {
     if (requestTypes) {
@@ -47,6 +53,19 @@ const RequestTypeSelector = ({
     }
   }, [requestTypes]);
 
+  const checkAll = () => {
+    toggle(!isToggled);
+    return !isToggled;
+  }
+
+  const updateAll = (value) =>{
+      requestTypes.map(type => {
+        if(selectedTypes[type.typeId] !== value){
+          updateTypesFilter(type.typeId)
+        }
+      })
+  }
+
   return (
     <>
       <div className={headerClass.header}>Request Types</div>
@@ -55,9 +74,11 @@ const RequestTypeSelector = ({
         backgroundColor: '#192730',
         borderRadius: '5px',
         padding: '5px',
-        // paddingTop: '3px',
-        // paddingBottom: '3px',
+        paddingTop: '3px',
+        paddingBottom: '3px',
       }}>
+
+
         <Grid item style={{ width: '50%' }}>
           <FormGroup>
             {leftCol && leftCol.map(type => (
@@ -72,12 +93,28 @@ const RequestTypeSelector = ({
                       padding: '0 0 0 9px',
                     }}
                     checked={selectedTypes[type.typeId]}
+
                     onChange={() => updateTypesFilter(type.typeId)}
                   />
                 }
                 label={type.typeName}
               /> 
             ))}
+            <FormControlLabel 
+              key='all'
+              classes={classes}
+              control={
+                  <Checkbox 
+                    style={{
+                      transform: 'scale(0.8)',
+                      color: 'white',
+                      padding: '0 0 0 9px',
+                    }}
+                   onChange={()=>updateAll(checkAll())}
+                  />
+                }
+                label='Select All'
+            />
           </FormGroup>
         </Grid>
         <Grid item style={{ width: '50%' }}>
@@ -94,6 +131,7 @@ const RequestTypeSelector = ({
                       padding: '0 2px 0 9px',
                     }}
                     checked={selectedTypes[type.typeId]}
+
                     onChange={() => updateTypesFilter(type.typeId)}
                   />
                 }

client/components/main/Desktop/TypeSelector/isToggle.js

@@ -0,0 +1,17 @@
+import {
+  useEffect, useRef, useCallback, useState,
+} from 'react';
+
+const useToggle = initialState => {
+  const [isToggled, setIsToggled] = useState(initialState);
+  const isToggledRef = useRef(isToggled);
+  const toggle = useCallback(() => setIsToggled(!isToggledRef.current),
+    [isToggledRef, setIsToggled]);
+
+  useEffect(() => {
+    isToggledRef.current = isToggled;
+  }, [isToggled]);
+  return [isToggled, toggle];
+};
+
+export default useToggle;

client/redux/reducers/filters.js

@@ -39,21 +39,21 @@ const initialState = {
   endDate: null,
   councilId: null,
   requestTypes: {
-    1: true,
-    2: true,
-    3: true,
-    4: true,
-    5: true,
-    6: true,
-    7: true,
-    8: true,
-    9: true,
-    10: true,
-    11: true,
-    12: true,
+    1: false,
+    2: false,
+    3: false,
+    4: false,
+    5: false,
+    6: false,
+    7: false,
+    8: false,
+    9: false,
+    10: false,
+    11: false,
+    12: false,
   },
   requestStatus: {
-    open: true,
+    open: false,
     closed: false,
   },
 };

client/redux/tempTypes.js

@@ -85,20 +85,20 @@ const tempTypes = [
   },
   {
     "typeId": 11,
-    "typeName": "Other",
+    "typeName": "Feedback",
     "agencyId": 0,
     "agencyName": null,
-    "color": "#54ABDE",
-    "description": "Issues that do not fit into any of the other available types"
+    "color": "#F86747",
+    "description": "Either follow up on other issues or something that doesn't fit into the other types"
   },
   {
     "typeId": 12,
-    "typeName": "Feedback",
+    "typeName": "Other",
     "agencyId": 0,
     "agencyName": null,
-    "color": "#F86747",
-    "description": "Either follow up on other issues or something that doesn't fit into the other types"
-  }
+    "color": "#54ABDE",
+    "description": "Issues that do not fit into any of the other available types"
+  },
 ];
 
 export default tempTypes;