Module/map/backend

package.json

@@ -33,6 +33,7 @@
     "css-loader": "1.0.0",
     "date-fns": "^1.30.1",
     "debounce": "^1.2.0",
+    "dexie": "^2.0.4",
     "dompurify": "^1.0.10",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",

src/components/Avatar/index.tsx

@@ -28,8 +28,9 @@ interface IState {
 export class Avatar extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props)
-    this.state = {}
-    this.getUserAvatar(this.props.userName)
+    this.state = {
+      avatarUrl: this.getUserAvatar(this.props.userName),
+    }
   }
   get injected() {
     return this.props as IInjected
@@ -48,9 +49,8 @@ export class Avatar extends React.Component<IProps, IState> {
     notificationUnsubscribeAll()
   }
 
-  async getUserAvatar(userName: string) {
-    const url = await this.injected.userStore.getUserAvatar(userName)
-    this.setState({ avatarUrl: url })
+  getUserAvatar(userName: string) {
+    return this.injected.userStore.getUserAvatar(userName)
   }
 
   render() {

src/mocks/database.mock.tsx

@@ -0,0 +1,6 @@
+import { IDbDoc } from 'src/models/common.models'
+import { Database } from 'src/stores/database'
+
+// by default all documents saved in the database should contain
+// a small subset of meta, including _id, _created, and _modified fields
+export const DB_META_MOCK = (): IDbDoc => Database.generateDocMeta('_mocks')

src/mocks/maps.mock.tsx

@@ -6,6 +6,7 @@ import {
   IDatabaseMapPin,
   EntityType,
 } from 'src/models/maps.models'
+import { DB_META_MOCK } from './database.mock'
 
 export const generatePins = (count: number): Array<IDatabaseMapPin> => {
   const filters = generatePinFilters()
@@ -14,7 +15,7 @@ export const generatePins = (count: number): Array<IDatabaseMapPin> => {
     const pinType = filters[Math.floor(Math.random() * filters.length)]
 
     newPins.push({
-      id: '' + Math.random(),
+      ...DB_META_MOCK(),
       location: {
         address: 'testing',
         lat: 51 + (Math.random() * 1000 - 500) / 500,

src/mocks/user.mock.tsx

@@ -8,9 +8,10 @@ export const MOCK_USER: IUser = {
   _authID: '123',
   _deleted: false,
   _createdBy: '123',
-  _created: toTimestamp('Friday, January 2, 2015 12:59 AM'),
-  _modified: toTimestamp('Friday, January 2, 2015 12:59 AM'),
+  _created: toTimestamp(new Date()),
+  _modified: toTimestamp(new Date()),
+  _lastActive: toTimestamp(new Date()),
+  country: '',
   DHSite_id: 70134,
   DHSite_mention_name: 'chris-m-clarke',
-  country: '',
 }

src/models/common.models.tsx

@@ -4,6 +4,7 @@ import { firestore } from 'firebase/app'
 export interface ITimestamp extends firestore.Timestamp {}
 
 // by default all documents should be populated with the following fields
+// this can be generated by the database using `database.generateDocMeta()`
 export interface IDbDoc {
   _id: string
   _created: firestore.Timestamp

src/models/maps.models.tsx

@@ -1,13 +1,14 @@
-export interface IDatabaseMapPin {
-  id: string
+import { IDbDoc } from './common.models'
+
+export interface IDatabaseMapPin extends IDbDoc {
   location: ILatLng & {
     address: string
   }
   pinType: string
 }
 
 export interface IMapPin {
-  id: string
+  _id: string
   location: ILatLng & {
     address: string
   }

src/models/user.models.tsx

@@ -1,5 +1,4 @@
 import { IDbDoc, ITimestamp } from './common.models'
-import { ILocation } from 'src/components/LocationSearch/LocationSearch'
 
 export interface IUserState {
   user?: IUser
@@ -13,14 +12,18 @@ export interface ILink {
 // IUser retains most of the fields from legacy users (omitting passwords),
 // and has a few additional fields. Note 'email' is excluded
 // _uid is unique/fixed identifier
-// ALL USER INFO BELOW IS PUBLIC
+/***************************************************************************
+ *  NOTE - ALL USER INFO BELOW IS PUBLIC
+ ****************************************************************************/
 export interface IUser extends IDbDoc {
   // authID is additional id populated by firebase auth, required for some auth operations
   _authID: string
+  // want to track active status, however requires upgrade of users in db if want non-optional here
+  _lastActive?: ITimestamp
   // userName is same as legacy 'mention_name', e.g. @my-name. It will also be the doc _id and
   // firebase auth displayName property
   userName: string
-  // note, user avatar url is taken direct from userName so no longer populated here
+  // NOTE, user avatar url is taken direct from userName so no longer populated here
   // avatar:string
   verified: boolean
   userRoles?: UserRole[]
@@ -29,7 +32,8 @@ export interface IUser extends IDbDoc {
   DHSite_mention_name?: string
   country?: string
   links?: ILink[]
-  location?: ILocation
+  // NOTE, user location is stored in the users map pin, and kept out of profile to avoid duplication
+  // location?: ILocation
   year?: ITimestamp
 }
 

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

@@ -51,7 +51,7 @@ class Controls extends React.Component<IProps> {
           position: 'absolute',
           left: '10%',
           borderRadius: '5px',
-          zIndex: 99999,
+          zIndex: 2,
           marginTop: '30px',
         }}
       >

src/pages/Maps/Content/View/Cluster.tsx

@@ -37,7 +37,7 @@ export const Clusters: React.SFC<IProps> = ({ pins, onPinClick }) => {
           >
             {entities[key].map(pin => (
               <Marker
-                key={pin.id}
+                key={pin._id}
                 position={[pin.location.lat, pin.location.lng]}
                 icon={createMarkerIcon(pin)}
                 onClick={() => {

src/pages/Maps/Content/View/Popup.tsx

@@ -89,7 +89,7 @@ export class Popup extends React.Component<IProps> {
 
     if (
       prevProps.pinDetail === undefined ||
-      prevProps.pinDetail.id !== this.props.pinDetail!.id
+      prevProps.pinDetail.id !== this.props.pinDetail!._id
     ) {
       this.setPinLocation(this.props.pinDetail)
     }

src/pages/Maps/Content/View/index.tsx

@@ -67,7 +67,7 @@ class MapView extends React.Component<IProps, IState> {
         center={[center.lat, center.lng]}
         zoom={zoom}
         maxZoom={18}
-        style={{ height: '100%' }}
+        style={{ height: '100%', zIndex: 1 }}
         onMove={this.updateBoundingBox}
       >
         <TileLayer
@@ -79,6 +79,15 @@ class MapView extends React.Component<IProps, IState> {
       </Map>
     )
   }
+
+  static defaultProps: Partial<IProps> = {
+    onBoundingBoxChange: () => null,
+    onPinClicked: () => null,
+    pins: [],
+    filters: [],
+    center: { lat: 51.0, lng: 19.0 },
+    zoom: 3,
+  }
 }
 
 export { MapView }

src/pages/Settings/SettingsPage.tsx

@@ -13,6 +13,7 @@ import { TextNotification } from 'src/components/Notification/TextNotification'
 import { Flex } from 'rebass'
 import { Avatar } from 'src/components/Avatar'
 import Text from 'src/components/Text'
+import { UserMapPinEdit } from './content/UserMapPinEdit'
 
 interface IProps {
   user: IUser
@@ -59,6 +60,7 @@ export class UserSettings extends React.Component<IProps, IState> {
           </BoxContainer>
 
           <SettingsEditForm onProfileSave={() => this.showSaveNotification()} />
+          <UserMapPinEdit />
         </BoxContainer>
         {/* post guidelines container */}
         <BoxContainer

src/pages/Settings/content/SettingsEdit.form.tsx

@@ -21,16 +21,12 @@ import { getCountryCode } from 'src/utils/helpers'
 import 'react-flags-select/scss/react-flags-select.scss'
 import styled from 'styled-components'
 import theme from 'src/themes/styled.theme'
-
-import { Map, TileLayer, Marker, Popup, ZoomControl } from 'react-leaflet'
-import L from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import { LocationSearchField } from 'src/components/Form/LocationSearch.field'
 import { FieldArray } from 'react-final-form-arrays'
 import { Link } from './Link.field'
 import { timestampToYear } from 'src/utils/helpers'
 import { Icon } from 'src/components/Icons'
 import { toJS } from 'mobx'
+import { ILocation } from 'src/components/LocationSearch/LocationSearch'
 
 interface IFormValues extends Partial<IUser> {
   // form values are simply subset of user profile fields
@@ -48,10 +44,6 @@ interface IState {
   showYearSelector?: boolean
   showNotification?: boolean
   showComLinks?: boolean
-  showMap?: boolean
-  lat: number
-  lng: number
-  zoom: number
 }
 
 // validation - return undefined if no error (i.e. valid)
@@ -63,12 +55,6 @@ const FlagSelectContainer = styled(Flex)`
   height: 40px;
 `
 
-const customMarker = L.icon({
-  iconUrl: require('src/assets/icons/map-marker.png'),
-  iconSize: [20, 28],
-  iconAnchor: [20, 56],
-})
-
 const YearBox = styled(Box)`
   ${inputStyles}
   cursor: pointer;
@@ -92,32 +78,15 @@ export class SettingsEditForm extends React.Component<IProps, IState> {
       formValues: user ? user : {},
       readOnly: true,
       showYearSelector: false,
-      showComLinks: true,
-      showMap: true,
-      lat: 51.4416,
-      lng: 5.4697,
-      zoom: 8,
-    }
-    if (user) {
-      if (user.links) {
-        this.setState({ showComLinks: false })
-      }
-      if (user.location) {
-        this.setState({ showMap: false })
-      }
+      showComLinks: user && user.links ? true : false,
     }
     this.changeComLinkSwitch = this.changeComLinkSwitch.bind(this)
-    this.changeMapSwitch = this.changeMapSwitch.bind(this)
   }
 
   public changeComLinkSwitch() {
     this.setState({ showComLinks: !this.state.showComLinks })
   }
 
-  public changeMapSwitch() {
-    this.setState({ showMap: !this.state.showMap })
-  }
-
   get injected() {
     return this.props as IInjectedProps
   }
@@ -140,16 +109,11 @@ export class SettingsEditForm extends React.Component<IProps, IState> {
     }
   }
 
-  public onLocationChange(v) {
-    this.setState({ lat: v.latlng.lat, lng: v.latlng.lng, zoom: 15 })
-  }
-
   render() {
     const user = this.injected.userStore.user
     // Need to convert mobx observable user object into a Javasrcipt structure using toJS fn
     // to allow final-form-array to display the initial values
     const initialFormValues = toJS(user)
-    const { lat, lng, zoom } = this.state
 
     return user ? (
       <Form
@@ -253,70 +217,17 @@ export class SettingsEditForm extends React.Component<IProps, IState> {
                       )}
                     </FieldArray>
                   </HideShowBox>
-                </BoxContainer>
-                <BoxContainer id="your-map-pin" mt={4}>
-                  <Heading small bold>
-                    Your map pin
-                  </Heading>
-                  <Flex wrap={'nowrap'} alignItems={'center'}>
-                    <Text inline>Add me to the map</Text>
-                    <Switch
-                      checked={this.state.showMap}
-                      onChange={this.changeMapSwitch}
-                    />
-                  </Flex>
-                  <HideShowBox disabled={this.state.showMap}>
-                    <Field
-                      name="about"
-                      component={TextAreaField}
-                      placeholder="About"
-                    />
-                    <Field
-                      name={
-                        user && user.location
-                          ? `${user.location.value}`
-                          : 'location'
-                      }
-                      customChange={v => this.onLocationChange(v)}
-                      component={LocationSearchField}
-                    />
-                    <Map
-                      center={
-                        user.location
-                          ? [user.location.latlng.lat, user.location.latlng.lng]
-                          : [lat, lng]
-                      }
-                      zoom={zoom}
-                      zoomControl={false}
-                      style={{
-                        height: '300px',
-                        zIndex: 1,
-                      }}
-                    >
-                      <ZoomControl position="topright" />
-                      <TileLayer
-                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                      />
-                      <Marker
-                        position={
-                          user.location && user.location.latlng
-                            ? [
-                                user.location.latlng.lat,
-                                user.location.latlng.lng,
-                              ]
-                            : [lat, lng]
-                        }
-                        icon={customMarker}
-                      >
-                        <Popup maxWidth={225} minWidth={225}>
-                          Add more content here later
-                        </Popup>
-                      </Marker>
-                    </Map>
-                  </HideShowBox>
+                  <Text width={1} mt={2} medium>
+                    About Me
+                  </Text>
+                  <Field
+                    name="about"
+                    component={TextAreaField}
+                    placeholder="About"
+                  />
                 </BoxContainer>
               </form>
+              {/* Map update separate to rest of form */}
             </>
           )
         }}