Weekend six

package.json

@@ -15,16 +15,20 @@
     "node-sass": "^4.13.1",
     "react": "^16.13.0",
     "react-animated-slider": "^2.0.0",
+    "react-animations": "^1.0.0",
     "react-dom": "^16.13.0",
+    "react-emoji": "^0.5.0",
     "react-ga": "^2.7.0",
     "react-map-gl": "^5.2.3",
     "react-player": "^1.15.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.0",
+    "react-scroll-to-bottom": "^1.3.2",
     "react-stepper-horizontal": "^1.0.11",
     "react-table": "^7.0.0-rc.16",
     "sass": "^1.26.2",
+    "socket.io-client": "^2.3.0",
     "styled-components": "^5.0.1",
     "styled-normalize": "^8.0.7",
     "video-react": "^0.14.1",

src/App.js

@@ -10,14 +10,16 @@ import { initGA, PageView } from './utils/analytics'
 import FamilyProfile from './components/UserDash/FamilyProfile'
 import NeighborProfile from './components/UserDash/NeighborProfile'
 import { PrivateRoute } from './utils/customRoutes'
-import Map from './components/AdminDash/Map/Map'
+import Map from './components/AdminDash/Map/MapOverlay'
 // temporary sign up confirmation, will be replaced with user dashboard
 import ConfirmationPage from './components/signUpForm/ConfirmationPage/ConfirmationPage'
 import SegmentOne from './components/UserDash/Training/SegmentOne'
 import Letter from './components/UserDash/Training/Letter'
 import SegmentTwo from './components/UserDash/Training/TrainingTwo'
 import SegmentThree from './components/UserDash/Training/TrainPart3'
 import SegmentFour from './components/UserDash/Training/TrainingPartFour'
+import Chat from './components/Chat/Chat/Chat'
+import ThankYou from './components/AdminDash/ThankYou/Thankyou'
 function App() {
   useEffect(() => {
     initGA('UA-159166357-1')
@@ -27,6 +29,8 @@ function App() {
     <>
       <Normalize />
       <ThemeProvider theme={theme}>
+        <Route path = '/chat' component={Chat} />
+        <Route path = '/lambda' component={ThankYou} />
         <Route path='/training/0' component={Letter} />
         <Route path='/training/1' component={SegmentOne} />
         <Route path='/training/2' component={SegmentTwo} />

src/components/AdminDash/AdminDashboard.js

@@ -25,8 +25,8 @@ export default function Distance(props) {
         <TableContain>
           <NeighborTable
             userType='Neighbors'
-            Data={neighborsArray}
-            Data2={familiesArray}
+            Neighbors={neighborsArray}
+            Families={familiesArray}
             props={props}
           />
         </TableContain>

src/components/AdminDash/Map/EggLocations.js

@@ -0,0 +1,50 @@
+export const EggLocations = [
+  {
+    id: 1,
+    latitude: -80,
+    longitude: 3,
+    name: 'Riddle 1',
+    address: "What rock group has four men that don't sing?",
+    email: '???',
+    phone: '???',
+    match: false,
+  },
+  {
+    id: 2,
+    latitude: 43.8791,
+    longitude: -103.4591,
+    name: 'Riddle 2',
+    address: 'NICE JOB KEEP GOING!',
+    email: 'In what city was the first skyscraper built?',
+    phone: '???',
+    match: false,
+  },
+  {
+    id: 3,
+    latitude: 41.8781,
+    longitude: -87.6298,
+    name: 'Riddle 3',
+    address: 'NICE JOB ALMOST THERE!',
+    email: 'In what city were the 2002 Olymipcs held?',
+    phone: '???',
+    match: false,
+  },
+  {
+    id: 4,
+    latitude: 33.749,
+    longitude: -84.388,
+    name: 'Riddle 4',
+    address: 'LAST ONE!!!',
+    email: 'In what city was the oldest College in the USA founded?',
+    phone: '???',
+    match: false,
+  },
+  {
+    id: 5,
+    latitude: 42.377,
+    longitude: -71.1167,
+    name: 'You did it!!!',
+    address: ' CLICK ME!!!',
+    match: false,
+  },
+]

src/components/AdminDash/Map/EggMarker.js

@@ -0,0 +1,20 @@
+import React, { useState, useEffect } from 'react'
+import {Egg} from './EggStyle'
+import { useHistory } from "react-router-dom";
+
+
+export default function FamMark(props) {
+    const history = useHistory();
+
+function handleClick(){
+    if(props.eggStep === 4){
+        history.push('/lambda')
+    }
+    props.setSelected(props.location)
+    props.setEgg(props.eggStep + 1)
+}
+
+  return (
+      <Egg onClick={() => handleClick()}/>
+  )
+}

src/components/AdminDash/Map/EggStyle.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+export const Egg = styled.div`
+position: relative;
+top: -22px;
+left: -20px;
+width: 45px;
+height: 45px;
+borderRadius: 50px;
+&:hover{
+    width: 25px;
+    height: 25px;
+    background: green;
+}
+}
+`

src/components/AdminDash/Map/FamilyMarker.js

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react'
+import { set } from 'react-ga'
+
+export default function FamMark(props) {
+  const [open, setOpen] = useState(false)
+  function clicked() {
+    setOpen(true)
+    if (open === false) {
+      props.setSelected(props.location)
+    }
+  }
+
+  useEffect(() => {
+    if (props.location.id === props.selected.id) {
+      setOpen(true)
+    } else {
+      setOpen(false)
+    }
+  }, [props.selected])
+
+  return (
+    <>
+      {!open ? (
+        <div
+          onClick={() => {
+            clicked()
+          }}
+          style={{
+            width: `${props.zoom * 2}px`,
+            height: `${props.zoom * 2}px`,
+            borderRadius: '50%',
+            backgroundColor: 'blue',
+          }}
+        />
+      ) : (
+        <div
+          onClick={() => {
+            clicked()
+          }}
+          style={{
+            position: 'relative',
+            top: '-22px',
+            left: '-20px',
+            width: `${props.zoom * 6}px`,
+            height: `${props.zoom * 6}px`,
+            borderRadius: '50%',
+            backgroundColor: 'blue',
+          }}
+        ></div>
+      )}
+    </>
+  )
+}

src/components/AdminDash/Map/Locations.js

@@ -1,8 +1,68 @@
 export const locations = [
-  { coords: { lat: 39.99855629395869, lng: -104.74184416996333 }, title:'One'},
-  { coords:{ lat: 39.759423, lng: -104.821071 }, title: 'two'},
-  { coords:{ lat: 39.7052192687988, lng: -103.988426208496 }, title: 'three'},
-  { coords:{ lat: 39.9307081, lng: -104.1434325 }, title: 'four'},
-  { coords:{ lat: 39.8084488, lng: -104.2140121 }, title: 'five'},
-  { coords:{ lat: 39.8524695, lng: -104.5425407 }, title: 'six'},
+  {
+    id: 1,
+    latitude: 39.99855629395869,
+    longitude: -104.74184416996333,
+    name: 'BOB',
+    type: 'neighbor',
+    address: "11111 Street",
+    email: "one11@email.com",
+    phone: "377854234",
+    match: false,
+  },
+  {
+    id: 2,
+    latitude: 39.759423,
+    longitude: -104.821071,
+    name: 'Fred',
+    type: 'neighbor',
+    address: "12222 Street",
+    email: "one22@email.com",
+    phone: "134234",
+    match: true,
+  },
+  {
+    id: 3,
+    latitude: 39.7052192687988,
+    longitude: -103.988426208496,
+    name: 'Joe',
+    type: 'neighbor',
+    address: "13333 Street",
+    email: "one33@email.com",
+    phone: "3555534",
+    match: true,
+  },
+  {
+    id: 4,
+    latitude: 39.9307081,
+    longitude: -104.1434325,
+    name: 'Mary',
+    type: 'family',
+    address: "144444 Street",
+    email: "one44@email.com",
+    phone: "37411114234",
+    match: true,
+  },
+  {
+    id: 5,
+    latitude: 39.8084488,
+    longitude: -104.2140121,
+    name: 'Sara',
+    type: 'family',
+    address: "125555 Street",
+    email: "one55@email.com",
+    phone: "374233333734234",
+    match: false,
+  },
+  {
+    id: 6,
+    latitude: 39.8524695,
+    longitude: -104.5425407,
+    name: 'Anna',
+    type: 'family',
+    address: "1234 Street",
+    email: "one66@email.com",
+    phone: "3742313231734234",
+    match: true
+  },
 ]

src/components/AdminDash/Map/Map.js

@@ -1,53 +1,73 @@
-import React, { useState } from 'react'
-import GoogleMapReact from 'google-map-react'
-import Marker from './Marker'
-import { locations } from './Locations'
-import { Map } from 'google-maps-react'
+import React, { useState, useEffect } from 'react'
+import ReactMapGL, { Marker, Popup } from 'react-map-gl'
+import { MapContain } from './MapStyles'
+import FamMarker from './FamilyMarker'
+import NeighborMarker from './NeighborMarker'
+import { EggLocations } from './EggLocations'
+import EggMarker from './EggMarker'
 
-const SimpleMap = props => {
-  const [center, setCenter] = useState({ lat: 39.99, lng: -104.707 })
-  const [zoom, setZoom] = useState(11)
+function Map(props, { latitude, longitude, refresh }) {
+  const [zoom, setZoom] = useState()
+  const [eggStep, setEggStep] = useState(0)
+  const [viewport, setViewport] = useState({
+    latitude: 40,
+    longitude: -104.7,
+    zoom: 11,
+    width: '60vw',
+    height: '100%',
+  })
+  const [locations, setLocations] = useState(props.locations)
 
+  useEffect(() => {
+    console.log('hi')
+    setLocations(props.locations)
+  }, [props])
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        height: '90vh',
-        width: '100%',
-      }}
-    >
-      <div       style={{
-        display: 'flex',
-        justifyContent: 'center',
-        height: '100%',
-        width: '90%',
-      }}>
-      <GoogleMapReact
-        bootstrapURLKeys={
-          {
-            //key: process.env.GOOGLE_MAPS_API_KEY
-          }
-        }
-        defaultCenter={center}
-        defaultZoom={zoom}
-        {...console.log(Map)}
+    <MapContain>
+      <ReactMapGL
+        width='100%'
+        height='100%'
+        {...viewport}
+        mapboxApiAccessToken='pk.eyJ1IjoiYnNjaGF0emoiLCJhIjoiY2s3MHlnMGRiMDFndjNmbGN5NGN6aDllcSJ9.6U2mM86ENxVdKiXRRt6bYw'
+        mapStyle='mapbox://styles/bschatzj/ck7w41e6e00bs1jqtqe2rkal9'
+        onViewportChange={viewport => {
+          setZoom(viewport.zoom)
+          setViewport(viewport)
+        }}
       >
-        {locations.map(location => {
-          return (
-            <Marker
-              lat={location.coords.lat}
-              lng={location.coords.lng}
-              name={location.title}
-              zoom={''}
-              color='blue'
-            />
-          )
-        })}
-      </GoogleMapReact>
-      </div>
-    </div>
+        {locations.map(location => (
+          <Marker
+            key={location.id}
+            latitude={location.latitude}
+            longitude={location.longitude}
+          >
+            {location.type === 'neighbor' ? (
+              <NeighborMarker
+                setSelected={props.setSelected}
+                selected={props.selected}
+                location={location}
+                zoom={zoom}
+              />
+            ) : (
+              <FamMarker
+                setSelected={props.setSelected}
+                selected={props.selected}
+                location={location}
+                zoom={zoom}
+              />
+            )}
+          </Marker>
+        ))}
+        <Marker
+          key={EggLocations[eggStep].id}
+          longitude={EggLocations[eggStep].longitude}
+          latitude={EggLocations[eggStep].latitude}
+        >
+          <EggMarker setEgg={setEggStep} eggStep={eggStep} location={EggLocations[eggStep]} setSelected={props.setSelected} />
+        </Marker>
+      </ReactMapGL>
+    </MapContain>
   )
 }
 
-export default SimpleMap
+export default Map