Merge pull request #733 from ONEARMY/map/cc-edits

Map/cc edits
ONEARMY · Nov 1, 2019 · cb7228c · cb7228c
2 parents 1da9e18 + e20f80d
commit cb7228c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/src/mocks/maps.mock.tsx b/src/mocks/maps.mock.tsx
@@ -36,6 +36,6 @@ export const generatePinDetails = (pin: IMapPin): IMapPinDetail => {
     lastActive,
     profilePicUrl: 'https://picsum.photos/50/50',
     profileUrl: '/testing',
-    heroImageUrl: 'https://picsum.photos/285/175',
+    heroImageUrl: `https://picsum.photos/seed/${lastActive}/285/175`,
   }
 }
diff --git a/src/pages/Maps/Content/Controls/index.tsx b/src/pages/Maps/Content/Controls/index.tsx
@@ -12,13 +12,18 @@ import { HashLink } from 'react-router-hash-link'
 import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
 import { Map } from 'react-leaflet'
 import { ILocation } from 'src/models/common.models'
+import { inject } from 'mobx-react'
+import { MapsStore } from 'src/stores/Maps/maps.store'
 
 interface IProps {
   mapRef: React.RefObject<Map>
   availableFilters: Array<IPinType>
   onFilterChange: (grouping: IPinGrouping, filters: Array<IPinType>) => void
   onLocationChange: (selectedLocation: ILocation) => void
 }
+interface IInjectedProps extends IProps {
+  mapsStore: MapsStore
+}
 
 const SearchWrapper = styled.div`
   width: 300px;
@@ -30,19 +35,22 @@ const MapFlexBar = styled(Flex)`
   position: absolute;
   top: 25px;
   width: 100%;
-  z-index: 99999;
+  z-index: 3;
   left: 50%;
   transform: translateX(-50%);
 `
 
 const FlexSpacer = styled.div`
   flex: 1;
 `
-
+@inject('mapsStore')
 class Controls extends React.Component<IProps> {
   constructor(props) {
     super(props)
   }
+  get injected() {
+    return this.props as IInjectedProps
+  }
 
   public render() {
     const { availableFilters } = this.props
@@ -60,10 +68,12 @@ class Controls extends React.Component<IProps> {
 
     return (
       <MapFlexBar
-        px={[2, 3, 4]}
+        data-cy="map-controls"
+        ml="50px"
         py={1}
         onClick={() => {
-          // this.props.map.current.leafletElement.closePopup()
+          // close any active popup on click
+          this.injected.mapsStore.setActivePin(undefined)
         }}
       >
         <SearchWrapper>
@@ -80,7 +90,6 @@ class Controls extends React.Component<IProps> {
             items={groupedFilters[grouping]}
             onChange={options => {
               this.props.onFilterChange(grouping as IPinGrouping, options)
-              this.props.mapRef.current!.leafletElement.closePopup()
             }}
           />
         ))}

diff --git a/src/pages/Maps/Content/View/index.tsx b/src/pages/Maps/Content/View/index.tsx
@@ -72,9 +72,8 @@ class MapView extends React.Component<IProps> {
         center={[center.lat, center.lng]}
         zoom={zoom}
         maxZoom={18}
-        style={{ height: '100%' }}
+        style={{ height: '100%', zIndex: 0 }}
         onmove={this.handleMove}
-        onresize={() => console.log('resize called')}
       >
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

diff --git a/src/stores/Maps/maps.store.ts b/src/stores/Maps/maps.store.ts
@@ -15,10 +15,10 @@ import { Subscription } from 'rxjs'
 import { ModuleStore } from '../common/module.store'
 import { getUserAvatar } from '../User/user.store'
 import { MAP_GROUPINGS } from './maps.groupings'
-import { generatePins } from 'src/mocks/maps.mock'
+import { generatePins, generatePinDetails } from 'src/mocks/maps.mock'
 
 // TODO - remove mock pins from store once integration complete
-const MOCK_PINS = generatePins(250)
+const IS_MOCK = true
 
 export class MapsStore extends ModuleStore {
   mapEndpoint: IDBEndpoint = 'v2_mappins'
@@ -55,7 +55,11 @@ export class MapsStore extends ModuleStore {
     )
 
     // TODO - remove mock pins when integrated
-    pins = [...MOCK_PINS, ...pins]
+    if (IS_MOCK) {
+      {
+        pins = [...generatePins(250), ...pins]
+      }
+    }
 
     this.mapPins = pins.map(
       ({ _id, location, pinType, profileType, workspaceType }) => ({
@@ -66,7 +70,6 @@ export class MapsStore extends ModuleStore {
         workspaceType,
       }),
     )
-
     this.filteredPins = this.mapPins
   }
 
@@ -127,7 +130,9 @@ export class MapsStore extends ModuleStore {
   public async setActivePin(pin?: IMapPin) {
     this.activePin = pin
     if (pin) {
-      const pinDetail = await this.getUserProfilePin(pin._id)
+      const pinDetail = IS_MOCK
+        ? generatePinDetails(pin)
+        : await this.getUserProfilePin(pin._id)
       this.activePin = { ...pin, ...pinDetail }
     }
   }
@@ -144,7 +149,6 @@ export class MapsStore extends ModuleStore {
   // add new pin or update existing
   public async setPin(pin: IMapPin) {
     // generate standard doc meta
-    console.debug('setting pin', pin)
     return this.db
       .collection('v2_mappins')
       .doc(pin._id)