Module/map

package.json

@@ -8,6 +8,7 @@
     "@devexpress/dx-react-core": "^1.10.1",
     "@devexpress/dx-react-grid": "^1.10.1",
     "@devexpress/dx-react-grid-material-ui": "^1.10.1",
+    "@khanacademy/react-multi-select": "^0.3.3",
     "@material-ui/core": "3.7.1",
     "@material-ui/icons": "3.0.2",
     "@rebass/grid": "^6.0.0",
@@ -31,6 +32,7 @@
     "client-compress": "^2.1.2",
     "css-loader": "1.0.0",
     "date-fns": "^1.30.1",
+    "debounce": "^1.2.0",
     "dompurify": "^1.0.10",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
@@ -48,6 +50,7 @@
     "firebase": "5.8.1",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
+    "geolocation-utils": "^1.2.1",
     "google-oauth-jwt": "^0.2.0",
     "googleapis": "^37.2.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
@@ -58,6 +61,8 @@
     "jest-resolve": "23.6.0",
     "jest-watch-typeahead": "^0.2.1",
     "leaflet": "^1.3.4",
+    "leaflet.markercluster": "^1.4.1",
+    "lorem-ipsum": "^2.0.3",
     "md5": "^2.2.1",
     "mini-css-extract-plugin": "0.5.0",
     "mobx": "4.9.2",
@@ -84,6 +89,7 @@
     "react-icons": "^3.2.2",
     "react-image-lightbox": "^5.1.0",
     "react-leaflet": "^2.1.4",
+    "react-leaflet-markercluster": "^2.0.0-rc3",
     "react-linkify": "^0.2.2",
     "react-portal": "^4.2.0",
     "react-pose": "^4.0.8",

src/components/Layout/PageContainer.tsx

@@ -12,21 +12,30 @@ import { Flex, FlexProps } from 'rebass'
 import theme from 'src/themes/styled.theme'
 import { VersionNumber } from '../VersionNumber/VersionNumber'
 
-type InnerContainerProps = MaxWidthProps & SpaceProps & WidthProps
+type InnerContainerProps = MaxWidthProps &
+  SpaceProps &
+  WidthProps & {
+    ignoreMaxWidth?: boolean
+  }
 
 const InnerContainer = styled.div<InnerContainerProps>`
   ${space}
   ${width}
-  ${maxWidth}
+  ${p => (p.ignoreMaxWidth ? 'max-width: inherit;' : maxWidth)}
+  margin: ${p => (p.ignoreMaxWidth ? 0 : undefined)};
+  padding: ${p => (p.ignoreMaxWidth ? 0 : undefined)};
   min-height: calc(100vh - 156px);
   margin-bottom:0;
   padding-bottom: 32px;
-  position: relative
+  position: relative;
 `
+interface IProps extends FlexProps {
+  ignoreMaxWidth?: boolean
+}
 
-const PageContainer = (props: FlexProps) => (
+const PageContainer = (props: IProps) => (
   <Flex {...props} bg={theme.colors.background}>
-    <InnerContainer>
+    <InnerContainer ignoreMaxWidth={props.ignoreMaxWidth}>
       {props.children} <VersionNumber />
     </InnerContainer>
   </Flex>
@@ -35,13 +44,13 @@ const PageContainer = (props: FlexProps) => (
 PageContainer.defaultProps = {
   className: 'page-container',
   justifyContent: 'center',
-  px: '2em',
 }
 InnerContainer.defaultProps = {
   className: 'page-inner-container',
   maxWidth: theme.maxContainerWidth,
   width: 1,
   my: 4,
+  px: '2em',
 }
 
 export default PageContainer

src/mocks/maps.mock.tsx

@@ -0,0 +1,105 @@
+import { loremIpsum } from 'lorem-ipsum'
+import {
+  IMapPin,
+  IMapPinDetail,
+  IPinType,
+  IDatabaseMapPin,
+  EntityType,
+} from 'src/models/maps.models'
+
+export const generatePins = (count: number): Array<IDatabaseMapPin> => {
+  const filters = generatePinFilters()
+  const newPins = [] as Array<IDatabaseMapPin>
+  for (let i = 0; i < count; i++) {
+    const pinType = filters[Math.floor(Math.random() * filters.length)]
+
+    newPins.push({
+      id: '' + Math.random(),
+      location: {
+        address: 'testing',
+        lat: 51 + (Math.random() * 1000 - 500) / 500,
+        lng: 0 + (Math.random() * 1000 - 500) / 250,
+      },
+      pinType: pinType.name,
+    })
+  }
+  return newPins
+}
+
+export const generatePinDetails = (pin: IMapPin): IMapPinDetail => {
+  const lastActive = new Date()
+  lastActive.setSeconds(lastActive.getSeconds() - Math.random() * 10000)
+  return {
+    ...pin,
+    name: loremIpsum({ count: 2, units: 'words' })
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' '),
+    shortDescription: loremIpsum({ count: 2, units: 'sentences' }),
+    lastActive,
+    profilePicUrl: 'https://picsum.photos/50/50',
+    profileUrl: '/testing',
+    heroImageUrl: 'https://picsum.photos/285/175',
+  }
+}
+
+export const generatePinFilters = (): Array<IPinType> => {
+  return [
+    {
+      grouping: 'place' as EntityType,
+      displayName: 'Extruder',
+      name: 'extruder',
+      icon: 'E',
+      count: 0,
+    },
+    {
+      grouping: 'place' as EntityType,
+      displayName: 'Injection',
+      name: 'injecter',
+      icon: 'I',
+      count: 0,
+    },
+    {
+      grouping: 'place' as EntityType,
+      displayName: 'Shredder',
+      name: 'shredder',
+      icon: 'S',
+      count: 0,
+    },
+    {
+      grouping: 'place' as EntityType,
+      displayName: 'Sheet Press',
+      name: 'sheetPresser',
+      icon: 'P',
+      count: 0,
+    },
+    {
+      grouping: 'place' as EntityType,
+      displayName: 'R & D / Lab',
+      name: 'lab',
+      icon: 'R',
+      count: 0,
+    },
+    {
+      grouping: 'individual' as EntityType,
+      displayName: 'Community Builder',
+      name: 'communityBuilder',
+      icon: 'C',
+      count: 0,
+    },
+    {
+      grouping: 'individual' as EntityType,
+      displayName: 'Member',
+      name: 'member',
+      icon: '',
+      count: 0,
+    },
+    {
+      grouping: 'individual' as EntityType,
+      displayName: 'Machine Builder',
+      name: 'machineBuilder',
+      icon: 'M',
+      count: 0,
+    },
+  ]
+}

src/models/maps.models.tsx

@@ -0,0 +1,44 @@
+export interface IDatabaseMapPin {
+  id: string
+  location: ILatLng & {
+    address: string
+  }
+  pinType: string
+}
+
+export interface IMapPin {
+  id: string
+  location: ILatLng & {
+    address: string
+  }
+  pinType: IPinType
+}
+
+export interface IMapPinDetail extends IMapPin {
+  name: string
+  shortDescription: string
+  lastActive: Date
+  profilePicUrl: string
+  profileUrl: string
+  heroImageUrl: string
+}
+
+export interface ILatLng {
+  lat: number
+  lng: number
+}
+
+export interface IBoundingBox {
+  topLeft: ILatLng
+  bottomRight: ILatLng
+}
+
+export interface IPinType {
+  displayName: string
+  name: string
+  grouping: EntityType
+  icon: string
+  count: number
+}
+
+export type EntityType = 'individual' | 'place'

src/pages/Maps/Content/Controls/GroupingFilter.css

@@ -0,0 +1,13 @@
+.multi-select {
+  width: 100%;
+  max-width: 225px;
+  margin-left: 20px;
+}
+
+.multi-select .dropdown-heading {
+  height: 45px !important;
+}
+
+.multi-select .dropdown-heading-value {
+  line-height: 45px !important;
+}

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

@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import MultiSelect from '@khanacademy/react-multi-select'
+import './GroupingFilter.css'
+
+interface IProps {
+  items: Array<any>
+  entityType: string
+  onChange?: (selectedItems) => void
+}
+
+interface IState {
+  selectedItems: Array<string>
+}
+
+const ItemLabel = styled.span`
+  display: inline-block;
+  vertical-align: middle;
+  cursor: default;
+  padding: 2px 8px;
+`
+
+interface ItemCounterProps {
+  grouping: string
+}
+
+const ItemCounter = styled.span<ItemCounterProps>`
+  border-radius: ${p => (p.grouping === 'individual' ? '50%' : '0%')};
+  background-color: ${p =>
+    p.grouping === 'individual' ? '#6666FF' : '#FF6666'};
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 0.65rem;
+  text-align: center;
+  color: white;
+  margin-left: 5px;
+`
+
+const ItemRenderer = ({ checked, option, onClick }) => {
+  return (
+    <span>
+      <input
+        type="checkbox"
+        onChange={onClick}
+        checked={checked}
+        tabIndex={-1}
+      />
+      <ItemCounter grouping={option.value.grouping}>
+        {option.value.count}
+      </ItemCounter>
+      <ItemLabel>{option.label}</ItemLabel>
+    </span>
+  )
+}
+
+class GroupingFilter extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      selectedItems: props.items,
+    }
+  }
+
+  handleChange(selectedItems) {
+    if (this.props.onChange) {
+      this.props.onChange(selectedItems)
+    }
+    this.setState({ selectedItems })
+  }
+
+  render() {
+    const { selectedItems } = this.state
+    const { items, entityType } = this.props
+    const options = items.map(item => ({
+      label: item.displayName,
+      value: item,
+    }))
+    return (
+      <MultiSelect
+        options={options}
+        selected={selectedItems}
+        selectAllLabel="Select All"
+        disableSearch={true}
+        onSelectedChanged={selected => this.handleChange(selected)}
+        valueRenderer={() =>
+          entityType === 'place' ? 'Workplaces' : 'Members'
+        }
+        hasSelectAll={false}
+        ItemRenderer={ItemRenderer}
+        style={{
+          maxWidth: '250px',
+          width: '100%',
+        }}
+      />
+    )
+  }
+}
+
+export { GroupingFilter }