From a2c4adbaa71237ade2210d203a3bcdba894c00e4 Mon Sep 17 00:00:00 2001
From: Benjamin Gammaire <benjamin.gammaire@gmail.com>
Date: Fri, 27 Mar 2020 11:50:56 +0000
Subject: [PATCH 1/2] add method getPinsNumberByFilterType & separate
 filterMapPinsByType as private method

---
 src/stores/Maps/maps.store.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/stores/Maps/maps.store.ts b/src/stores/Maps/maps.store.ts
index ad7788f7fb..60baeda98c 100644
--- a/src/stores/Maps/maps.store.ts
+++ b/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
   }
 
   /**
@@ -224,6 +229,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
+  }
 }
 
 /**********************************************************************************

From a0b811e18bab79106c36f1306787f143c7e6d206 Mon Sep 17 00:00:00 2001
From: Benjamin Gammaire <benjamin.gammaire@gmail.com>
Date: Fri, 27 Mar 2020 11:52:16 +0000
Subject: [PATCH 2/2] add map store to desktop & mobile filter view and display
 number of pins per filter type

---
 .../Content/Controls/GroupingFilterDesktop.tsx   | 16 ++++++++++++++--
 .../Content/Controls/GroupingFilterMobile.tsx    | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx b/src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx
index b0380c43a0..bda0802a95 100644
--- a/src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx
+++ b/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(' '),
+        ),
       }))
   }
 
diff --git a/src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx b/src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx
index 51c29e1344..d450615fe7 100644
--- a/src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx
+++ b/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) && (