Skip to content

Commit

Permalink
feat: allow member pins to still be selected on pp
Browse files Browse the repository at this point in the history
  • Loading branch information
@benfurber
benfurber committed Nov 14, 2023
1 parent f22abd4 commit d5bcfbe
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 46 deletions.
23 changes: 9 additions & 14 deletions src/pages/Maps/Content/Controls/Controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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']}
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 2 additions & 6 deletions src/pages/Maps/Content/Controls/GroupingFilterDesktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -43,7 +39,7 @@ class GroupingFilterDesktop extends Component<IProps> {
variant="icons"
isMulti
isClearable
options={groupedOptions}
options={this.props.availableFilters}
onChange={onSelectChange}
placeholder="Select filters"
/>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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' }}>
Expand All @@ -61,7 +61,7 @@ class GroupingFilterMobile extends Component<IProps, IState> {
/>
</Flex>

{items.map((item, idx) => {
{availableFilters.map((item, idx) => {
return (
<div key={idx}>
<Text
Expand Down
35 changes: 19 additions & 16 deletions src/pages/Maps/Maps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { isPreciousPlastic } from 'src/utils/isPreciousPlastic'

interface IProps extends RouteComponentProps<any> {
mapsStore: MapsStore
Expand All @@ -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) {
Expand All @@ -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()
Expand All @@ -74,6 +85,11 @@ class MapsPage extends React.Component<IProps, IState> {
}
}

async retrieveMapPins() {
const removePins = isPreciousPlastic() ? 'member' : undefined
this.props.mapsStore.retrieveMapPins(removePins)
}

private setCenter(latlng: ILatLng) {
this.setState({
center: latlng as ILatLng,
Expand Down Expand Up @@ -112,20 +128,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}
/>
Expand Down
22 changes: 15 additions & 7 deletions src/stores/Maps/maps.store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -21,7 +22,8 @@ import {
} from 'src/utils/helpers'
import { logger } from 'src/logger'
import { filterMapPinsByType } from './filter'
import { isPreciousPlastic } from 'src/utils/isPreciousPlastic'

type IFilterToRemove = IMapPinType | undefined

const COLLECTION_NAME: IDBEndpoint = 'mappins'
export class MapsStore extends ModuleStore {
Expand All @@ -41,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
Expand All @@ -58,19 +63,22 @@ export class MapsStore extends ModuleStore {
const isPinAccepted = p.moderation === 'accepted'
const wasCreatedByUser = activeUser && p._id === activeUser.userName
const isAdminAndAccepted = isAdmin && p.moderation !== 'rejected'
const isPPMember = isPreciousPlastic() && 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 */
Expand All @@ -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
Expand All @@ -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)
}
})
}
Expand Down

0 comments on commit d5bcfbe

Please sign in to comment.