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;