diff --git a/client/components/main/Desktop/TypeSelector/index.js b/client/components/main/Desktop/TypeSelector/index.js index f92737ede..bce5c9fb1 100644 --- 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 => ( - - + + {leftCol && leftCol.map(type => ( + updateTypesFilter(type.typeId) } + onChange={() => updateTypesFilter(type.typeId)} /> } label={type.typeName} /> - - ))} - - + ))} checkAll(items)} - - + onChange={()=>updateAll(checkAll())} /> } label='Select All' /> - - - {/* - - {leftCol && leftCol.map(type => ( - updateTypesFilter(type.typeId)} - /> - } - label={type.typeName} - /> - ))} @@ -168,7 +139,7 @@ const RequestTypeSelector = ({ /> ))} - */} + ); diff --git a/client/redux/tempTypes.js b/client/redux/tempTypes.js index b1a6889e3..0b76bda1e 100644 --- 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;