add function to update types if their type value doesnt match checked…

…value
hackforla · Dec 6, 2021 · 48c1b8f · 48c1b8f
1 parent 4a45374
commit 48c1b8f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 69 deletions.
diff --git a/client/components/main/Desktop/TypeSelector/index.js b/client/components/main/Desktop/TypeSelector/index.js
@@ -2,7 +2,7 @@
 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';
@@ -12,6 +12,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 // import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import useToggle from './isToggle.js';
 
+
 const useStyles = makeStyles(theme => ({
   label: {
     display: 'flex',
@@ -36,35 +37,34 @@ const RequestTypeSelector = ({
   updateTypesFilter,
   selectedTypes,
 }) => {
-  // const [leftCol, setLeftCol] = useState();
-  // const [rightCol, setRightCol] = useState();
-  const [items, setCols] = useState();
+  const [leftCol, setLeftCol] = useState();
+  const [rightCol, setRightCol] = useState();
   const classes = useStyles();
   const headerClass = useHeaderStyles();
   const [isToggled, toggle] = useToggle(false);
 
   useEffect(() => {
     if (requestTypes) {
-      // const mid = Math.ceil(requestTypes.length / 2);
-      // const left = requestTypes.slice(0, mid);
-      // const right = requestTypes.slice(-mid);
-      // setLeftCol(left);
-      // setRightCol(right);
-
-      const items = requestTypes;
-      setCols(items);
+      const mid = Math.ceil(requestTypes.length / 2);
+      const left = requestTypes.slice(0, mid);
+      const right = requestTypes.slice(-mid);
+      setLeftCol(left);
+      setRightCol(right);
     }
   }, [requestTypes]);
 
-  const checkAll = (items) => {
-     toggle(!isToggled);
-     if(!isToggled){
-      items.map(type=>selectedTypes[type.typeId] = true);
-     }else{
-      items.map(type=>selectedTypes[type.typeId] = false);
-     }
+  const checkAll = () => {
+    toggle(!isToggled);
+    return !isToggled;
   }
 
+  const updateAll = (value) =>{
+      requestTypes.map(type => {
+        if(selectedTypes[type.typeId] !== value){
+          updateTypesFilter(type.typeId)
+        }
+      })
+  }
 
   return (
     <>
@@ -78,9 +78,11 @@ const RequestTypeSelector = ({
         paddingBottom: '3px',
       }}>
 
-        {items && items.map(type => (
-          <Grid item style = {{width:'50%'}}>
-            <FormControlLabel
+
+        <Grid item style={{ width: '50%' }}>
+          <FormGroup>
+            {leftCol && leftCol.map(type => (
+              <FormControlLabel
                 key={type.typeId}
                 classes={classes}
                 control={
@@ -91,17 +93,13 @@ const RequestTypeSelector = ({
                       padding: '0 0 0 9px',
                     }}
                     checked={selectedTypes[type.typeId]}
-
 
-                    onChange={() => updateTypesFilter(type.typeId) }
+                    onChange={() => updateTypesFilter(type.typeId)}
                   />
                 }
                 label={type.typeName}
               /> 
-          </Grid>
-        ))}
-
-        <Grid item style={{width: '50%'}}>
+            ))}
             <FormControlLabel 
               key={'all'}
               classes={classes}
@@ -112,38 +110,11 @@ const RequestTypeSelector = ({
                       color: 'white',
                       padding: '0 0 0 9px',
                     }}
-
-
-                   onChange={()=>checkAll(items)}
-
-
+                   onChange={()=>updateAll(checkAll())}
                   />
                 }
                 label='Select All'
             />
-        </Grid>
-
-        {/* <Grid item style={{ width: '50%' }}>
-          <FormGroup>
-            {leftCol && leftCol.map(type => (
-              <FormControlLabel
-                key={type.typeId}
-                classes={classes}
-                control={
-                  <Checkbox 
-                    style={{
-                      transform: 'scale(0.8)',
-                      color: type.color,
-                      padding: '0 0 0 9px',
-                    }}
-                    checked={selectedTypes[type.typeId]}
-                    
-                    onChange={() => updateTypesFilter(type.typeId)}
-                  />
-                }
-                label={type.typeName}
-              /> 
-            ))}
           </FormGroup>
         </Grid>
         <Grid item style={{ width: '50%' }}>
@@ -168,7 +139,7 @@ const RequestTypeSelector = ({
               /> 
             ))}
           </FormGroup>
-        </Grid> */}
+        </Grid>
       </Grid>
     </>
   );

diff --git a/client/redux/tempTypes.js b/client/redux/tempTypes.js
@@ -13,13 +13,12 @@ const tempTypes = [
   },
   {
     "typeId": 2,
-    "typeName": "Water Waste",
-    "agencyId": 1,
-    "agencyName": "Street Lighting Bureau",
-    "color": "#F58505",
-    "description": "Water runoff, over-watering, incorrect water days, or any other water waste "
+    "typeName": "Homeless Encampment",
+    "agencyId": 2,
+    "agencyName": "Sanitation Bureau",
+    "color": "#15BC76",
+    "description": "Encampments impacting right-of-way or maintenance of clean and sanitary public areas"
   },
-
   {
     "typeId": 3,
     "typeName": "Animal Remains",
@@ -78,11 +77,11 @@ const tempTypes = [
   },
   {
     "typeId": 10,
-    "typeName": "Homeless Encampment",
-    "agencyId": 2,
-    "agencyName": "Sanitation Bureau",
-    "color": "#15BC76",
-    "description": "Encampments impacting right-of-way or maintenance of clean and sanitary public areas"
+    "typeName": "Water Waste",
+    "agencyId": 1,
+    "agencyName": "Street Lighting Bureau",
+    "color": "#F58505",
+    "description": "Water runoff, over-watering, incorrect water days, or any other water waste "
   },
   {
     "typeId": 11,
@@ -100,7 +99,6 @@ const tempTypes = [
     "color": "#54ABDE",
     "description": "Issues that do not fit into any of the other available types"
   },
-
 ];
 
 export default tempTypes;