901 show pins amount map filter

src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx

@@ -4,6 +4,8 @@ import MultiSelect from '@khanacademy/react-multi-select'
 import './GroupingFilter.css'
 import ElWithBeforeIcon from 'src/components/ElWithBeforeIcon'
 import { IMapGrouping } from 'src/models/maps.models'
+import { inject } from 'mobx-react'
+import { MapsStore } from 'src/stores/Maps/maps.store'
 import { Box } from 'rebass'
 
 interface IProps {
@@ -16,6 +18,9 @@ interface IState {
   initialItems: Array<any>
   selectedItems: Array<string>
 }
+interface IInjectedProps extends IProps {
+  mapsStore: MapsStore
+}
 
 const ItemRenderer = ({ checked, option, onClick }) => {
   return (
@@ -42,13 +47,13 @@ const ItemRenderer = ({ checked, option, onClick }) => {
             paddingBottom: '2px',
           }}
         >
-          {option.label}
+          {option.label} ({option.number})
         </h4>
       </ElWithBeforeIcon>
     </div>
   )
 }
-
+@inject('mapsStore')
 class GroupingFilterDesktop extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
@@ -57,6 +62,9 @@ class GroupingFilterDesktop extends React.Component<IProps, IState> {
       selectedItems: [],
     }
   }
+  get injected() {
+    return this.props as IInjectedProps
+  }
 
   handleChange(selectedItems: Array<string>) {
     this.setState({ selectedItems })
@@ -74,6 +82,10 @@ class GroupingFilterDesktop extends React.Component<IProps, IState> {
         label: item.displayName,
         value: item.subType ? item.subType : item.type,
         icon: item.icon,
+        // add split(' ') method to convert to array
+        number: this.injected.mapsStore.getPinsNumberByFilterType(
+          item.subType ? item.subType.split(' ') : item.type.split(' '),
+        ),
       }))
   }
 

src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx

@@ -3,6 +3,8 @@ import Text from 'src/components/Text'
 import { IMapGrouping } from 'src/models/maps.models'
 import checkmarkIcon from 'src/assets/icons/icon-checkmark.svg'
 import { Flex, Image } from 'rebass'
+import { inject } from 'mobx-react'
+import { MapsStore } from 'src/stores/Maps/maps.store'
 
 interface IProps {
   items: Array<IMapGrouping>
@@ -14,7 +16,11 @@ interface IProps {
 interface IState {
   initialItems: Array<any>
 }
+interface IInjectedProps extends IProps {
+  mapsStore: MapsStore
+}
 
+@inject('mapsStore')
 class GroupingFilterMobile extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
@@ -23,6 +29,10 @@ class GroupingFilterMobile extends React.Component<IProps, IState> {
     }
   }
 
+  get injected() {
+    return this.props as IInjectedProps
+  }
+
   addOrRemove = (array, item) => {
     // from https://stackoverflow.com/a/52531625
     const exists = array.includes(item)
@@ -52,6 +62,9 @@ class GroupingFilterMobile extends React.Component<IProps, IState> {
         label: item.displayName,
         value: item.subType ? item.subType : item.type,
         icon: item.icon,
+        number: this.injected.mapsStore.getPinsNumberByFilterType(
+          item.subType ? item.subType.split(' ') : item.type.split(' '),
+        ),
       }))
   }
 
@@ -80,7 +93,7 @@ class GroupingFilterMobile extends React.Component<IProps, IState> {
             <Flex alignItems="center">
               <Image width="30px" src={filter.icon} />
               <Text medium ml="10px">
-                {filter.label}
+                {filter.label} ({filter.number})
               </Text>
             </Flex>
             {selectedItems.includes(filter.value) && (

src/stores/Maps/maps.store.ts

@@ -105,13 +105,18 @@ export class MapsStore extends ModuleStore {
       return
     }
 
+    const mapPins = this.filterMapPinsByType(filters)
+    this.filteredPins = mapPins
+  }
+
+  private filterMapPinsByType(filters: Array<string>) {
     // filter pins to include matched pin type or subtype
-    const mapPins = this.mapPins.filter(pin => {
+    const filteredMapPins = this.mapPins.filter(pin => {
       return pin.subType
         ? filters.includes(pin.subType)
         : filters.includes(pin.type)
     })
-    this.filteredPins = mapPins
+    return filteredMapPins
   }
 
   /**
@@ -223,6 +228,11 @@ export class MapsStore extends ModuleStore {
       profileUrl: `${location.origin}/u/${u.userName}`,
     }
   }
+  @action
+  public getPinsNumberByFilterType(filter: Array<string>) {
+    const pinsNumber = this.filterMapPinsByType(filter)
+    return pinsNumber.length
+  }
 }
 
 /**********************************************************************************