1465 search filter request types

client/components/Map/RequestDetail.jsx

@@ -52,10 +52,10 @@ const styles = theme => ({
 
 class RequestDetail extends React.Component {
   componentDidUpdate(prev) {
-    const { requestId, pinsInfo, getPinInfo } = this.props;
+    const { requestId, pinsInfo, dispatchGetPinInfo } = this.props;
     if (requestId === prev.requestId) return;
 
-    if (requestId && !pinsInfo[requestId]) getPinInfo(requestId);
+    if (requestId && !pinsInfo[requestId]) dispatchGetPinInfo(requestId);
   }
 
   renderDaysOpen = days => {
@@ -210,7 +210,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  getPinInfo: srnumber => dispatch(getPinInfoRequest(srnumber)),
+  dispatchGetPinInfo: srnumber => dispatch(getPinInfoRequest(srnumber)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(RequestDetail));
@@ -220,7 +220,7 @@ RequestDetail.propTypes = {
   pinsInfo: PropTypes.shape({}),
   requestTypes: PropTypes.arrayOf(PropTypes.shape({})),
   agencies: PropTypes.arrayOf(PropTypes.shape({})),
-  getPinInfo: PropTypes.func.isRequired,
+  dispatchGetPinInfo: PropTypes.func.isRequired,
 };
 
 RequestDetail.defaultProps = {

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

@@ -35,7 +35,6 @@ const CouncilSelector = ({
   const classes = useStyles();
 
   useEffect(() => {
-    console.log('CouncilSelector: ', { councils });
     dispatchUpdateUnselectedCouncils(councils);
   }, [councils, dispatchUpdateUnselectedCouncils]);
 

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

@@ -34,12 +34,12 @@ const formStyles = makeStyles(() => ({
 
 const RequestTypeSelector = ({
   requestTypes,
-  updateTypesFilter,
+  dispatchUpdateTypesFilter,
   selectedTypes,
 }) => {
   const [leftCol, setLeftCol] = useState();
   const [rightCol, setRightCol] = useState();
-  const [isToggled, toggle] = useToggle(false);
+  const [isToggled, toggle] = useToggle(true);
 
   // FormControlLabel related classes.
   const formClasses = formStyles();
@@ -49,9 +49,10 @@ const RequestTypeSelector = ({
 
   useEffect(() => {
     if (requestTypes) {
-      const mid = Math.ceil(requestTypes.length / 2);
-      const left = requestTypes.slice(0, mid);
-      const right = requestTypes.slice(-mid);
+      const sortedRequestTypes = requestTypes.sort((a, b) => a.orderId - b.orderId);
+      const mid = Math.ceil(sortedRequestTypes.length / 2);
+      const left = sortedRequestTypes.slice(0, mid);
+      const right = sortedRequestTypes.slice(-mid);
       setLeftCol(left);
       setRightCol(right);
     }
@@ -65,7 +66,7 @@ const RequestTypeSelector = ({
   function updateAll(isSelected) {
     requestTypes.forEach(type => {
       if (selectedTypes[type.typeId] !== isSelected) {
-        updateTypesFilter(type.typeId);
+        dispatchUpdateTypesFilter(type.typeId);
       }
     });
   }
@@ -128,7 +129,7 @@ const RequestTypeSelector = ({
                           padding: '0 0 0 9px',
                         }}
                         checked={selectedTypes[type.typeId]}
-                        onChange={() => updateTypesFilter(type.typeId)}
+                        onChange={() => dispatchUpdateTypesFilter(type.typeId)}
                       />
                     )}
                     label={type.typeName}
@@ -155,7 +156,7 @@ const RequestTypeSelector = ({
                           padding: '0 2px 0 9px',
                         }}
                         checked={selectedTypes[type.typeId]}
-                        onChange={() => updateTypesFilter(type.typeId)}
+                        onChange={() => dispatchUpdateTypesFilter(type.typeId)}
                       />
                     )}
                     label={type.typeName}
@@ -176,7 +177,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  updateTypesFilter: type => dispatch(updateRequestTypes(type)),
+  dispatchUpdateTypesFilter: type => dispatch(updateRequestTypes(type)),
 });
 
 export default connect(
@@ -186,7 +187,7 @@ export default connect(
 
 RequestTypeSelector.propTypes = {
   requestTypes: PropTypes.arrayOf(PropTypes.shape({})),
-  updateTypesFilter: PropTypes.func.isRequired,
+  dispatchUpdateTypesFilter: PropTypes.func.isRequired,
   selectedTypes: PropTypes.shape({}).isRequired,
 };
 

client/redux/tempTypes.js

@@ -4,48 +4,57 @@
 
 import colors from '@theme/colors'
 
+// For tempTypes below:
+// 'orderId' is used to order items in main/TypeSelector/index.js.
+// 'typeId' is the actual request ID value from server API.
 const tempTypes = [
-  {
-    "typeId": 1,
+  {    
+    "orderId": 1,
+    "typeId": 3,
     "typeName": "Animal Remains",
     "agencyId": 2,
     "agencyName": "Sanitation Bureau",
     "color": colors.requestTypes.animalRemains,
     "description": "Dead animal located on the streets or outside of residences"
 },
   {
-    "typeId": 2,
+    "orderId": 2,
+    "typeId": 4,
     "typeName": "Bulky Items",
     "agencyId": 2,
     "agencyName": "Sanitation Bureau",
     "color": colors.requestTypes.bulkyItems,
     "description": "Chairs, desks, mattress and more..."
 },
   {
-    "typeId": 3,
+    "orderId": 3,
+    "typeId": 5,
     "typeName": "Electronic Waste",
     "agencyId": 2,
     "agencyName": "Sanitation Bureau",
     "color": colors.requestTypes.eWaste,
     "description": "Computers, microwaves, laptops and more..."
 },
   {
-    "typeId": 4,
+    "orderId": 4,
+    "typeId": 1,
     "typeName": "Graffiti",
     "agencyId": 4,
     "agencyName": "Office of Community Beautification",
     "color": colors.requestTypes.graffiti,
     "description": "Graffiti on walls/bulidings, unpainted concrete surfaces or metal posts"
 },
   {
-    "typeId": 5,
+    "orderId": 5,
+    "typeId": 2,
     "typeName": "Homeless Encampment",
     "agencyId": 2,
     "agencyName": "Sanitation Bureau",
     "color": colors.requestTypes.homeless,
     "description": "Encampments impacting right-of-way or maintenance of clean and sanitary public areas"
 },
   {
+    "orderId": 6,
     "typeId": 6,
     "typeName": "Illegal Dumping",
     "agencyId": 2,
@@ -54,6 +63,7 @@ const tempTypes = [
     "description": "Disposing of garbage, waste and other matter on public or private property"
 },
   {
+    "orderId": 7,
     "typeId": 7,
     "typeName": "Metal Appliances",
     "agencyId": 2,
@@ -62,22 +72,25 @@ const tempTypes = [
     "description": "Air conditioners, dryers, refrigerator and more..."
 },
   {
-    "typeId": 8,
+    "orderId": 8,
+    "typeId": 9,
     "typeName": "Multiple Streetlights",
     "agencyId": 1,
     "agencyName": "Street Lighting Bureau",
     "color": colors.requestTypes.multiStreetlight,
     "description": "Multiple poles knocked down, streetlight outages on wooden power poles, or malfunctioning traffic signals"
 },
   {
-    "typeId": 9,
+    "orderId": 9,
+    "typeId": 8,
     "typeName": "Single Streetlight",
     "agencyId": 1,
     "agencyName": "Street Lighting Bureau",
     "color": colors.requestTypes.singleStreetlight,
     "description": "Pole knocked down, streetlight outage on a wooden power pole, or malfunctioning traffic signal"
 },
   {
+    "orderId": 10,
     "typeId": 10,
     "typeName": "Water Waste",
     "agencyId": 1,
@@ -86,15 +99,17 @@ const tempTypes = [
     "description": "Water runoff, over-watering, incorrect water days, or any other water waste "
 },
   {
-    "typeId": 11,
+    "orderId": 11,
+    "typeId": 12,
     "typeName": "Feedback",
     "agencyId": 0,
     "agencyName": null,
     "color": colors.requestTypes.feedback,
     "description": "Either follow up on other issues or something that doesn't fit into the other types"
 },
   {
-    "typeId": 12,
+    "orderId": 12,
+    "typeId": 11,
     "typeName": "Other",
     "agencyId": 0,
     "agencyName": null,