Show map data from apollo

Author: mts

packages/client/src/index.js

@@ -1,15 +1,12 @@
-/* eslint no-console: 0 */
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { ApolloClient } from 'apollo-client'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-import { HttpLink } from 'apollo-link-http'
-import gql from "graphql-tag"
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { ApolloProvider } from 'react-apollo'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import StartPage from './pages/StartPage'
 import DemoPage from './pages/DemoPage'
 import { startPageRoute, demoPageRoute } from './routes'
 import './index.scss'
+import client from './graphql/client'
 
 function addDivWithIdToBody() {
   const appElement = document.createElement("div")
@@ -19,37 +16,15 @@ function addDivWithIdToBody() {
 
 addDivWithIdToBody()
 
-const cache = new InMemoryCache()
-
-const client = new ApolloClient({
-  cache,
-  link: new HttpLink({
-    uri: 'https://streams-server.herokuapp.com/graphql',
-  }),
-})
-
-client
-  .query({
-    query: gql`
-      query GetStations {
-        stations(pageSize: 3) {
-          stations {
-            id
-            text
-          }
-        }
-      }
-    `,
-  })
-  .then(result => console.log('~result~', result))
-
 const App = () => (
-  <Router>
-    <Switch>
-      <Route exact path={startPageRoute} component={StartPage} />
-      <Route exact path={demoPageRoute} component={DemoPage} />
-    </Switch>
-  </Router>
+  <BrowserRouter>
+    <ApolloProvider client={client}>
+      <Switch>
+        <Route exact path={startPageRoute} component={StartPage} />
+        <Route exact path={demoPageRoute} component={DemoPage} />
+      </Switch>
+    </ApolloProvider>
+  </BrowserRouter>
 )
 
 ReactDOM.render(<App />, document.getElementById('app'))

packages/client/src/pages/DemoPage/index.js

@@ -1,8 +1,10 @@
 import React from 'react'
+import { Query } from 'react-apollo'
 import { Link } from 'react-router-dom'
 import Map from '../../patterns/molecules/map/Map'
 import { startPageRoute } from '../../routes'
 import Header from '../../patterns/molecules/navigation/Header'
+import { STATIONS } from '../../graphql/query'
 
 const DemoReactPage = () => (
   <div>
@@ -15,7 +17,9 @@ const DemoReactPage = () => (
               </Link>
           </div>
           <div className="border p-3">
-              <Map />
+            <Query query={STATIONS}>
+              {({ data }) => data.stations && data.stations.stations ? <Map items={data.stations.stations}/> : null}
+            </Query>
           </div>
         </div>
      </div>

packages/client/src/patterns/molecules/map/Map.js

@@ -1,10 +1,10 @@
 /* eslint-disable */
 import React from 'react'
-import { arrayOf, shape, number, string } from 'prop-types'
+import { arrayOf, shape, number, string, bool } from 'prop-types'
 import GoogleMapReact from 'google-map-react'
 import { fitBounds } from 'google-map-react/utils'
 import Marker from '../../atoms/map/Marker'
-import list from '../../../data/stations'
+import client from '../../../graphql/client'
 
 const K_MARGIN_TOP = 60
 const K_MARGIN_RIGHT = 30
@@ -18,8 +18,6 @@ class Map extends React.Component {
   constructor(props) {
     super(props)
 
-    const {lat, lng} = list[0]
-
     this.state = {
       center: undefined,
       zoom: undefined,
@@ -168,8 +166,9 @@ class Map extends React.Component {
   }
 
   render() {
-    const { initialCenter, initialZoom, apiKey, showLimit, items } = this.props;
+    const { initialZoom, apiKey, showLimit, items } = this.props;
     const { center, zoom } = this.state;
+    const initialCenter = {lat: items[0].lat, lng: items[0].lng}
 
     const markers = items.slice(0, showLimit).map((item, index) => {
         return (
@@ -208,10 +207,6 @@ class Map extends React.Component {
 }
 
 Map.propTypes = {
-  initialCenter: shape({
-    lat: number,
-    lng: number
-  }),
   initialZoom: number,
   apiKey: string,
   showLimit: number,
@@ -220,19 +215,17 @@ Map.propTypes = {
       id: string,
       lat: number,
       lng: number,
+      text: string,
+      isFocussed: bool,
+      isSelected: bool,
     })
   ),
 }
 
 Map.defaultProps = {
-  initialCenter: {
-    lat: list[0].lat,
-    lng: list[0].lng
-  },
   initialZoom: 11,
   apiKey: process.env.API_KEY,
   showLimit: 10,
-  items: list,
 }
 
 export default Map