Merge pull request ONEARMY#3000 from benfurber/2927-2-hide-member-map…

…pins

fix: hide member mappins on precious plastic

packages/cypress/src/integration/settings.spec.ts

@@ -326,10 +326,17 @@ describe('[Settings]', () => {
         },
       }
       cy.login('[email protected]', 'test1234')
-      cy.step('Go to User Settings')
+
+      cy.step('Go to User Settings for Precious Plastic')
+      localStorage.setItem('platformTheme', 'precious-plastic')
       cy.clickMenuItem(UserMenuItem.Settings)
       selectFocus(expected.profileType)
+      cy.get('[data-cy=pin-description]').should('not.exist')
 
+      cy.step('Go to User Settings for Project Kamp')
+      localStorage.setItem('platformTheme', 'project-kamp')
+      cy.clickMenuItem(UserMenuItem.Settings)
+      selectFocus(expected.profileType)
       cy.get('[data-cy=location-dropdown]').should('exist')
 
       cy.get('[data-cy="add-a-map-pin"]').click()

src/config/config.ts

@@ -157,3 +157,14 @@ export const SENTRY_CONFIG: ISentryConfig = {
 export const CDN_URL = _c('REACT_APP_CDN_URL', '')
 export const VERSION = _c('REACT_APP_PROJECT_VERSION', '')
 export const GA_TRACKING_ID = _c('REACT_APP_GA_TRACKING_ID')
+
+const isPreciousPlastic = (): boolean => {
+  return (
+    (_c('REACT_APP_PLATFORM_THEME') ||
+      localStorage.getItem('platformTheme')) === 'precious-plastic'
+  )
+}
+
+export const MAP_PROFILE_TYPE_HIDDEN_BY_DEFAULT = isPreciousPlastic()
+  ? 'member'
+  : undefined

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

@@ -8,7 +8,6 @@ import filterIcon from 'src/assets/icons/icon-filters-mobile.png'
 import { GroupingFilterDesktop } from './GroupingFilterDesktop'
 import { GroupingFilterMobile } from './GroupingFilterMobile'
 
-import type { IMapPinType } from 'src/models/maps.models'
 import { HashLink as Link } from 'react-router-hash-link'
 import type { Map } from 'react-leaflet'
 import { inject } from 'mobx-react'
@@ -21,7 +20,6 @@ import type { FilterGroup } from './transformAvailableFiltersToGroups'
 interface IProps extends RouteComponentProps<any> {
   mapRef: React.RefObject<Map>
   availableFilters: FilterGroup[]
-  onFilterChange: (selected: Array<IMapPinType>) => void
   onLocationChange: (latlng: { lat: number; lng: number }) => void
 }
 interface IState {
@@ -58,10 +56,14 @@ class Controls extends React.Component<IProps, IState> {
     return this.props as IInjectedProps
   }
 
+  onChange(selected) {
+    this.injected.mapsStore.setActivePinFilters(selected)
+    this.setState({ filtersSelected: selected })
+  }
+
   public render() {
     const { availableFilters } = this.props
     const { showFiltersMobile, filtersSelected } = this.state
-    const groupedFilters = availableFilters
 
     return (
       <MapFlexBar
@@ -102,12 +104,8 @@ class Controls extends React.Component<IProps, IState> {
         </Box>
         <Flex>
           <GroupingFilterDesktop
-            items={groupedFilters}
-            selectedItems={filtersSelected}
-            onChange={(selected) => {
-              this.props.onFilterChange(selected as IMapPinType[])
-              this.setState({ filtersSelected: selected })
-            }}
+            availableFilters={availableFilters}
+            onChange={(selected) => this.onChange(selected)}
           />
           <Box
             ml={['0', '50px']}
@@ -154,12 +152,9 @@ class Controls extends React.Component<IProps, IState> {
           isOpen={showFiltersMobile}
         >
           <GroupingFilterMobile
-            items={groupedFilters}
+            availableFilters={availableFilters}
             selectedItems={filtersSelected}
-            onChange={(selected) => {
-              this.props.onFilterChange(selected as IMapPinType[])
-              this.setState({ filtersSelected: selected })
-            }}
+            onChange={(selected) => this.onChange(selected)}
             onClose={this.toggleFilterMobileModal}
           />
         </Modal>

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

@@ -5,9 +5,8 @@ import { Select } from 'oa-components'
 import type { FilterGroup } from './transformAvailableFiltersToGroups'
 
 interface IProps {
-  items: FilterGroup[]
+  availableFilters: FilterGroup[]
   onChange: (selectedItems: string[]) => void
-  selectedItems: Array<string>
 }
 interface IInjectedProps extends IProps {
   mapsStore: MapsStore
@@ -22,9 +21,6 @@ class GroupingFilterDesktop extends Component<IProps> {
   }
 
   render() {
-    const { items } = this.props
-    const groupedOptions = items
-
     const onSelectChange = (selectedOptions) => {
       const arr = selectedOptions.map((option) => option.value)
       this.props.onChange(arr)
@@ -43,7 +39,7 @@ class GroupingFilterDesktop extends Component<IProps> {
           variant="icons"
           isMulti
           isClearable
-          options={groupedOptions}
+          options={this.props.availableFilters}
           onChange={onSelectChange}
           placeholder="Select filters"
         />

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

@@ -9,7 +9,7 @@ import type { MapsStore } from 'src/stores/Maps/maps.store'
 import type { FilterGroup } from './transformAvailableFiltersToGroups'
 
 interface IProps {
-  items: FilterGroup[]
+  availableFilters: FilterGroup[]
   selectedItems: Array<string>
   onChange?: (selectedItems: string[]) => void
   onClose: () => void
@@ -47,7 +47,7 @@ class GroupingFilterMobile extends Component<IProps, IState> {
   }
 
   render() {
-    const { items, selectedItems } = this.props
+    const { availableFilters, selectedItems } = this.props
     return (
       <Flex sx={{ flexDirection: 'column' }}>
         <Flex p={0} mx={-1} sx={{ justifyContent: 'space-between' }}>
@@ -61,7 +61,7 @@ class GroupingFilterMobile extends Component<IProps, IState> {
           />
         </Flex>
 
-        {items.map((item, idx) => {
+        {availableFilters.map((item, idx) => {
           return (
             <div key={idx}>
               <Text

src/pages/Maps/Maps.tsx

@@ -15,6 +15,7 @@ import { GetLocation } from './utils/geolocation'
 import type { Map } from 'react-leaflet'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
 import { transformAvailableFiltersToGroups } from './Content/Controls/transformAvailableFiltersToGroups'
+import { MAP_PROFILE_TYPE_HIDDEN_BY_DEFAULT } from 'src/config/config'
 
 interface IProps extends RouteComponentProps<any> {
   mapsStore: MapsStore
@@ -37,12 +38,11 @@ class MapsPage extends React.Component<IProps, IState> {
       zoom: 3,
       firstLoad: true,
     }
-
     this.mapRef = React.createRef()
   }
 
   public async componentDidMount() {
-    this.props.mapsStore.retrieveMapPins()
+    this.retrieveMapPins()
     this.props.mapsStore.retrievePinFilters()
     await this.showPinFromURL()
     if (!this.props.mapsStore.activePin) {
@@ -61,6 +61,17 @@ class MapsPage extends React.Component<IProps, IState> {
     this.props.mapsStore.setActivePin(undefined)
   }
 
+  availableFilters() {
+    return transformAvailableFiltersToGroups(this.props.mapsStore, [
+      {
+        grouping: 'verified-filter',
+        displayName: 'Verified',
+        type: 'verified',
+      },
+      ...MAP_GROUPINGS,
+    ])
+  }
+
   private async promptUserLocation() {
     try {
       const position = await GetLocation()
@@ -74,6 +85,10 @@ class MapsPage extends React.Component<IProps, IState> {
     }
   }
 
+  async retrieveMapPins() {
+    this.props.mapsStore.retrieveMapPins(MAP_PROFILE_TYPE_HIDDEN_BY_DEFAULT)
+  }
+
   private setCenter(latlng: ILatLng) {
     this.setState({
       center: latlng as ILatLng,
@@ -112,20 +127,7 @@ class MapsPage extends React.Component<IProps, IState> {
               <>
                 <Controls
                   mapRef={this.mapRef}
-                  availableFilters={transformAvailableFiltersToGroups(
-                    this.props.mapsStore,
-                    [
-                      {
-                        grouping: 'verified-filter',
-                        displayName: 'Verified',
-                        type: 'verified',
-                      },
-                      ...MAP_GROUPINGS,
-                    ],
-                  )}
-                  onFilterChange={(selected) => {
-                    this.props.mapsStore.setActivePinFilters(selected)
-                  }}
+                  availableFilters={this.availableFilters()}
                   onLocationChange={(latlng) => this.setCenter(latlng)}
                   {...props}
                 />

src/stores/Maps/maps.store.ts

@@ -5,6 +5,7 @@ import type {
   IMapPinWithDetail,
   IMapPinDetail,
   IBoundingBox,
+  IMapPinType,
 } from 'src/models/maps.models'
 import type { IDBEndpoint, IModerationStatus } from 'src/models/common.models'
 import type { RootStore } from '../index'
@@ -22,6 +23,8 @@ import {
 import { logger } from 'src/logger'
 import { filterMapPinsByType } from './filter'
 
+type IFilterToRemove = IMapPinType | undefined
+
 const COLLECTION_NAME: IDBEndpoint = 'mappins'
 export class MapsStore extends ModuleStore {
   mapPins$: Subscription
@@ -40,7 +43,10 @@ export class MapsStore extends ModuleStore {
   }
 
   @action
-  private processDBMapPins(pins: IMapPin[]) {
+  private processDBMapPins(
+    pins: IMapPin[],
+    filterToRemove: IFilterToRemove = undefined,
+  ) {
     if (pins.length === 0) {
       this.mapPins = []
       return
@@ -50,27 +56,29 @@ export class MapsStore extends ModuleStore {
     // HACK - ARH - 2019/12/09 filter unaccepted pins, should be done serverside
     const activeUser = this.activeUser
     const isAdmin = hasAdminRights(activeUser)
-    const isPP = localStorage.getItem('platformTheme') === 'precious-plastic'
 
     pins = pins
       .filter((p) => {
         const isDeleted = p._deleted || false
         const isPinAccepted = p.moderation === 'accepted'
         const wasCreatedByUser = activeUser && p._id === activeUser.userName
         const isAdminAndAccepted = isAdmin && p.moderation !== 'rejected'
-        const isPPMember = isPP && p.type === 'member'
+
         return (
           p.type &&
           !isDeleted &&
-          !isPPMember &&
           (isPinAccepted || wasCreatedByUser || isAdminAndAccepted)
         )
       })
       .map((p) => {
         return { ...p, verified: this.userStore.verifiedUsers[p._id] === true }
       })
     this.mapPins = pins
-    this.filteredPins = this.mapPins
+
+    const filters = this.activePinFilters
+      .filter(({ type }) => type !== filterToRemove)
+      .map(({ subType, type }) => (subType ? subType : type))
+    this.setActivePinFilters(filters)
   }
 
   /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -80,7 +88,7 @@ export class MapsStore extends ModuleStore {
     // this.recalculatePinCounts(boundingBox)
   }
   @action
-  public async retrieveMapPins() {
+  public async retrieveMapPins(filterToRemove: IFilterToRemove = undefined) {
     // TODO: make the function accept a bounding box to reduce load from DB
     /*
        TODO: unaccepted pins should be filtered in DB, before reaching the client
@@ -94,7 +102,7 @@ export class MapsStore extends ModuleStore {
       .stream((pins) => {
         // TODO - make more efficient by tracking only new pins received and updating
         if (pins.length !== this.mapPins.length) {
-          this.processDBMapPins(pins)
+          this.processDBMapPins(pins, filterToRemove)
         }
       })
   }