From 09208f742c117bcf588e284006bad7ff0709f76d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 17:06:04 +0100 Subject: [PATCH 01/10] Lint --- packages/client/src/pages/DemoPage/index.js | 34 +++++++++---------- packages/client/src/pages/StartPage/index.js | 2 +- .../patterns/molecules/navigation/SideBar.js | 4 --- packages/server/src/resolvers.js | 6 ++-- packages/server/src/schema.js | 2 +- packages/server/src/utils.js | 4 ++- 6 files changed, 24 insertions(+), 28 deletions(-) diff --git a/packages/client/src/pages/DemoPage/index.js b/packages/client/src/pages/DemoPage/index.js index ad5c7d9..1e2db34 100644 --- a/packages/client/src/pages/DemoPage/index.js +++ b/packages/client/src/pages/DemoPage/index.js @@ -4,24 +4,22 @@ import Map from '../../patterns/molecules/map/Map' import { startPageRoute } from '../../routes' import Header from '../../patterns/molecules/navigation/Header' -const DemoReactPage = () => { - return ( -
-
Codestar Streams
-
-
-
- - - -
-
- -
+const DemoReactPage = () => ( +
+
Codestar Streams
+
+
+
+ + +
-
-
- ) -} +
+ +
+
+
+
+) export default DemoReactPage diff --git a/packages/client/src/pages/StartPage/index.js b/packages/client/src/pages/StartPage/index.js index 83eba4c..1738061 100644 --- a/packages/client/src/pages/StartPage/index.js +++ b/packages/client/src/pages/StartPage/index.js @@ -7,7 +7,7 @@ const StartPage = () => { window.scrollTo({ top: 0, left: 0, - behavior: 'smooth' + behavior: 'smooth', }) return ( diff --git a/packages/client/src/patterns/molecules/navigation/SideBar.js b/packages/client/src/patterns/molecules/navigation/SideBar.js index 9f31abb..e292bb3 100644 --- a/packages/client/src/patterns/molecules/navigation/SideBar.js +++ b/packages/client/src/patterns/molecules/navigation/SideBar.js @@ -32,8 +32,4 @@ const SideBar = () => ( ) -SideBar.defaultProps = {} - -SideBar.propTypes = {} - export default SideBar diff --git a/packages/server/src/resolvers.js b/packages/server/src/resolvers.js index 29fa78c..415996b 100644 --- a/packages/server/src/resolvers.js +++ b/packages/server/src/resolvers.js @@ -1,4 +1,4 @@ -const { paginateResults } = require('./utils'); +const { paginateResults } = require('./utils') module.exports = { Query: { @@ -20,6 +20,6 @@ module.exports = { allStations[allStations.length - 1].cursor : false, } - } - } + }, + }, } diff --git a/packages/server/src/schema.js b/packages/server/src/schema.js index 6bc74a4..d8f17a3 100644 --- a/packages/server/src/schema.js +++ b/packages/server/src/schema.js @@ -1,4 +1,4 @@ -const { gql } = require('apollo-server'); +const { gql } = require('apollo-server') const typeDefs = gql` type Query { diff --git a/packages/server/src/utils.js b/packages/server/src/utils.js index a2832d8..67c088f 100644 --- a/packages/server/src/utils.js +++ b/packages/server/src/utils.js @@ -1,3 +1,4 @@ +/* eslint-disable */ module.exports.paginateResults = ({ after: cursor, pageSize = 20, @@ -8,7 +9,7 @@ module.exports.paginateResults = ({ if (!cursor) return results.slice(0, pageSize) const cursorIndex = results.findIndex(item => { - let itemCursor = item.cursor ? item.cursor : getCursor(item) + const itemCursor = item.cursor ? item.cursor : getCursor(item) return itemCursor ? cursor === itemCursor : false }) @@ -24,3 +25,4 @@ module.exports.paginateResults = ({ results.slice(cursorIndex >= 0 ? cursorIndex + 1 : 0, cursorIndex >= 0) } +/* eslint-enable */ From 0cd3927b0c42c168c2dd827ad068e37e6fe16683 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 17:06:25 +0100 Subject: [PATCH 02/10] Extend dependencies with apollo and graphql --- packages/client/package-lock.json | 138 +++++++++++++++++++++++++++++- packages/client/package.json | 5 ++ 2 files changed, 141 insertions(+), 2 deletions(-) diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json index 71d58d7..5737067 100644 --- a/packages/client/package-lock.json +++ b/packages/client/package-lock.json @@ -821,6 +821,17 @@ "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=" }, + "@types/async": { + "version": "2.0.50", + "resolved": "https://registry.npmjs.org/@types/async/-/async-2.0.50.tgz", + "integrity": "sha512-VMhZMMQgV1zsR+lX/0IBfAk+8Eb7dPVMWiQGFAt3qjo5x7Ml6b77jUo0e1C3ToD+XRDXqtrfw+6AB0uUsPEr3Q==", + "optional": true + }, + "@types/zen-observable": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz", + "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg==" + }, "@webassemblyjs/ast": { "version": "1.7.11", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz", @@ -1145,6 +1156,81 @@ "normalize-path": "^2.1.1" } }, + "apollo-cache": { + "version": "1.1.21", + "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.1.21.tgz", + "integrity": "sha512-5ErNb78KHtrJNimkDBTEigcvHkIqUmS7QJIk4lpZZ+XLVVgvk2fD+GhD1PLP+s8vHfAKVbO6vdbRxCCjGGrh5w==", + "requires": { + "apollo-utilities": "^1.0.26" + } + }, + "apollo-cache-inmemory": { + "version": "1.3.11", + "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.3.11.tgz", + "integrity": "sha512-fSoyjBV5RV57J3i/VHDDB74ZgXc0PFiogheNFHEhC0mL6rg5e/DjTx0Vg+csIBk23gvlzTvV+eypx7Q2NJ+dYg==", + "requires": { + "apollo-cache": "^1.1.21", + "apollo-utilities": "^1.0.26", + "optimism": "^0.6.6" + } + }, + "apollo-client": { + "version": "2.4.7", + "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.4.7.tgz", + "integrity": "sha512-6aAm+16AFBYZhJF8eKxrup6AbYni01InDiwTfZhMMTP2xaXQWjsQnfaHbI2oE+hd3+AZFy1drkse8RZKghR/WQ==", + "requires": { + "@types/async": "2.0.50", + "@types/zen-observable": "^0.8.0", + "apollo-cache": "1.1.21", + "apollo-link": "^1.0.0", + "apollo-link-dedup": "^1.0.0", + "apollo-utilities": "1.0.26", + "symbol-observable": "^1.0.2", + "zen-observable": "^0.8.0" + } + }, + "apollo-link": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.4.tgz", + "integrity": "sha512-B1z+9H2nTyWEhMXRFSnoZ1vSuAYP+V/EdUJvRx9uZ8yuIBZMm6reyVtr1n0BWlKeSFyPieKJy2RLzmITAAQAMQ==", + "requires": { + "apollo-utilities": "^1.0.0", + "zen-observable-ts": "^0.8.11" + } + }, + "apollo-link-dedup": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/apollo-link-dedup/-/apollo-link-dedup-1.0.11.tgz", + "integrity": "sha512-RcvkXR0CNbQcsw6LdrPksGa+9YjZ1ghk0k2PKal6rSBCyyqzokcBawXOtoMN8q+0FLR1dGs5GnAQVeucQuY28g==", + "requires": { + "apollo-link": "^1.2.4" + } + }, + "apollo-link-http": { + "version": "1.5.7", + "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.7.tgz", + "integrity": "sha512-EZ9nynHjwYCpGYP5IsRrZGTWidUVpshk7MuSG4joqGtJMwpFCgMQz+y3BHdUhowHtfAd9z60XmeOTG9FJolb8A==", + "requires": { + "apollo-link": "^1.2.4", + "apollo-link-http-common": "^0.2.6" + } + }, + "apollo-link-http-common": { + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.6.tgz", + "integrity": "sha512-LUOMWvrZuBP1hyWLBXyaW0KyFeKo79j+k3N+Q4HSkXKbLibnllXQ+JxxoSKGhm0bhREygiLtJAG9JnGlhxGO/Q==", + "requires": { + "apollo-link": "^1.2.4" + } + }, + "apollo-utilities": { + "version": "1.0.26", + "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.26.tgz", + "integrity": "sha512-URw7o3phymliqYCYatcird2YRPUU2eWCNvip64U9gQrX56mEfK4m99yBIDCMTpmcvOFsKLii1sIEZsHIs/bvnw==", + "requires": { + "fast-json-stable-stringify": "^2.0.0" + } + }, "aproba": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", @@ -3469,8 +3555,7 @@ "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", - "dev": true + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, "fast-levenshtein": { "version": "2.0.6", @@ -4505,6 +4590,19 @@ "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==", "dev": true }, + "graphql": { + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.0.2.tgz", + "integrity": "sha512-gUC4YYsaiSJT1h40krG3J+USGlwhzNTXSb4IOZljn9ag5Tj+RkoXrWp+Kh7WyE3t1NCfab5kzCuxBIvOMERMXw==", + "requires": { + "iterall": "^1.2.2" + } + }, + "graphql-tag": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.0.tgz", + "integrity": "sha512-9FD6cw976TLLf9WYIUPCaaTpniawIjHWZSwIRZSjrfufJamcXbVVYfN2TWvJYbw0Xf2JjYbl1/f2+wDnBVw3/w==" + }, "handle-thing": { "version": "1.2.5", "resolved": "http://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz", @@ -4896,6 +4994,11 @@ "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=", "dev": true }, + "immutable-tuple": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/immutable-tuple/-/immutable-tuple-0.4.9.tgz", + "integrity": "sha512-LWbJPZnidF8eczu7XmcnLBsumuyRBkpwIRPCZxlojouhBo5jEBO4toj6n7hMy6IxHU/c+MqDSWkvaTpPlMQcyA==" + }, "import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -5406,6 +5509,11 @@ "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "dev": true }, + "iterall": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.2.2.tgz", + "integrity": "sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==" + }, "js-base64": { "version": "2.4.9", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz", @@ -6614,6 +6722,14 @@ "is-wsl": "^1.1.0" } }, + "optimism": { + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.6.8.tgz", + "integrity": "sha512-bN5n1KCxSqwBDnmgDnzMtQTHdL+uea2HYFx1smvtE+w2AMl0Uy31g0aXnP/Nt85OINnMJPRpJyfRQLTCqn5Weg==", + "requires": { + "immutable-tuple": "^0.4.9" + } + }, "original": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz", @@ -10099,6 +10215,11 @@ "has-flag": "^3.0.0" } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + }, "tapable": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz", @@ -11716,6 +11837,19 @@ "requires": { "stylus": "^0.54.5" } + }, + "zen-observable": { + "version": "0.8.11", + "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.11.tgz", + "integrity": "sha512-N3xXQVr4L61rZvGMpWe8XoCGX8vhU35dPyQ4fm5CY/KDlG0F75un14hjbckPXTDuKUY6V0dqR2giT6xN8Y4GEQ==" + }, + "zen-observable-ts": { + "version": "0.8.11", + "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.11.tgz", + "integrity": "sha512-8bs7rgGV4kz5iTb9isudkuQjtWwPnQ8lXq6/T76vrepYZVMsDEv6BXaEA+DHdJSK3KVLduagi9jSpSAJ5NgKHw==", + "requires": { + "zen-observable": "^0.8.0" + } } } } diff --git a/packages/client/package.json b/packages/client/package.json index c5f874d..3d49ff1 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -56,8 +56,13 @@ "yeticss": "^7.4.1" }, "dependencies": { + "apollo-cache-inmemory": "1.3.11", + "apollo-client": "2.4.7", + "apollo-link-http": "1.5.7", "classnames": "^2.2.6", "google-map-react": "^1.1.1", + "graphql": "14.0.2", + "graphql-tag": "2.10.0", "leaflet": "^1.3.4", "primer": "^10.10.2", "react": "^16.6.3", From 2395919c4c09d004224398dcb2446c91bfa60a79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 17:06:43 +0100 Subject: [PATCH 03/10] Collect statios --- packages/client/src/index.js | 67 +++++++++++++++++++++++++----------- 1 file changed, 47 insertions(+), 20 deletions(-) diff --git a/packages/client/src/index.js b/packages/client/src/index.js index a8a1c93..9230487 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -1,30 +1,57 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; -import StartPage from './pages/StartPage'; -import DemoPage from './pages/DemoPage'; +/* 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 StartPage from './pages/StartPage' +import DemoPage from './pages/DemoPage' import { startPageRoute, demoPageRoute } from './routes' import './index.scss' function addDivWithIdToBody() { - const appElement = document.createElement("div"); - appElement.id = 'app'; - document.body.appendChild(appElement); + const appElement = document.createElement("div") + appElement.id = 'app' + document.body.appendChild(appElement) } addDivWithIdToBody() -const App = () => { - return ( - - - - - - - ); -} +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 = () => ( + + + + + + +) -ReactDOM.render(, document.getElementById('app')); +ReactDOM.render(, document.getElementById('app')) -module.hot.accept(); +module.hot.accept() From 05c24748ec9336f2259e49bf801273f6b5be9e59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 18:44:44 +0100 Subject: [PATCH 04/10] Rename data --- packages/server/src/datasources/{stations.json => data.json} | 0 packages/server/src/datasources/station.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/server/src/datasources/{stations.json => data.json} (100%) diff --git a/packages/server/src/datasources/stations.json b/packages/server/src/datasources/data.json similarity index 100% rename from packages/server/src/datasources/stations.json rename to packages/server/src/datasources/data.json diff --git a/packages/server/src/datasources/station.js b/packages/server/src/datasources/station.js index 9e93f2b..dee177d 100644 --- a/packages/server/src/datasources/station.js +++ b/packages/server/src/datasources/station.js @@ -1,6 +1,6 @@ /* eslint class-methods-use-this: 0 */ const { RESTDataSource } = require('apollo-datasource-rest') -const { stations } = require('./stations.json') +const { stations } = require('./data.json') class StationAPI extends RESTDataSource { async getAllStations() { From d4a877bff343c41adcc7cf87d05ba68d387ea9d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 18:44:55 +0100 Subject: [PATCH 05/10] Add react-apollo --- packages/client/package-lock.json | 114 ++++++++++++++++++++++++++++-- packages/client/package.json | 1 + 2 files changed, 109 insertions(+), 6 deletions(-) diff --git a/packages/client/package-lock.json b/packages/client/package-lock.json index 5737067..6d2b009 100644 --- a/packages/client/package-lock.json +++ b/packages/client/package-lock.json @@ -1357,6 +1357,11 @@ "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "dev": true }, + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" + }, "asn1": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", @@ -2481,6 +2486,11 @@ "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", "dev": true }, + "core-js": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.0.tgz", + "integrity": "sha512-kLRC6ncVpuEW/1kwrOXYX6KQASCVtrh1gQr/UiaVgFlf9WE5Vp+lNe5+h3LuMr5PAucWnnEXwH0nQHRH/gpGtw==" + }, "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", @@ -3150,6 +3160,14 @@ "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", "dev": true }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" + } + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -3578,6 +3596,26 @@ "websocket-driver": ">=0.5.1" } }, + "fbjs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-1.0.0.tgz", + "integrity": "sha512-MUgcMEJaFhCaF1QtWGnmq9ZDRAzECTCRAF7O6UZIlAlkTs1SasiX9aP0Iw7wfD2mJ7wDTNfg2w7u5fSCwJk1OA==", + "requires": { + "core-js": "^2.4.1", + "fbjs-css-vars": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, + "fbjs-css-vars": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.1.tgz", + "integrity": "sha512-IM+v/C40MNZWqsLErc32e0TyIk/NhkkQZL0QmjBh6zi1eXv0/GeVKmKmueQX7nn9SXQBQbTUcB8zuexIF3/88w==" + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -4961,6 +4999,14 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3" + } + }, "icss-replace-symbols": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz", @@ -5444,8 +5490,7 @@ "is-stream": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", - "dev": true + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" }, "is-symbol": { "version": "1.0.2", @@ -5503,6 +5548,15 @@ "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", "dev": true }, + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", + "requires": { + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -5735,6 +5789,16 @@ "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "dev": true }, + "lodash.flowright": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/lodash.flowright/-/lodash.flowright-3.5.0.tgz", + "integrity": "sha1-K1//OZcW1+fcVyT+k0n2cGUYTWc=" + }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -6231,6 +6295,15 @@ "lower-case": "^1.1.1" } }, + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", + "requires": { + "encoding": "^0.1.11", + "is-stream": "^1.0.1" + } + }, "node-forge": { "version": "0.7.5", "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz", @@ -8491,6 +8564,14 @@ "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + }, "promise-inflight": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", @@ -8688,6 +8769,19 @@ "scheduler": "^0.11.2" } }, + "react-apollo": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/react-apollo/-/react-apollo-2.3.2.tgz", + "integrity": "sha512-3lU9iqmj4KMIZvlWWSuLihxMGLEAL6oNmnSTWrb3/mRP36Zy0zJD4rdaonDx4WzqFYQAnUPaOiFnHGp0UQUTwA==", + "requires": { + "fbjs": "^1.0.0", + "hoist-non-react-statics": "^3.0.0", + "invariant": "^2.2.2", + "lodash.flowright": "^3.5.0", + "lodash.isequal": "^4.5.0", + "prop-types": "^15.6.0" + } + }, "react-dom": { "version": "16.6.3", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz", @@ -9213,8 +9307,7 @@ "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "sass-graph": { "version": "2.2.4", @@ -9444,8 +9537,7 @@ "setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=", - "dev": true + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" }, "setprototypeof": { "version": "1.1.0", @@ -10577,6 +10669,11 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "ua-parser-js": { + "version": "0.7.19", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", + "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" + }, "uglify-js": { "version": "3.4.9", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz", @@ -11651,6 +11748,11 @@ "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==", "dev": true }, + "whatwg-fetch": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", + "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==" + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", diff --git a/packages/client/package.json b/packages/client/package.json index 3d49ff1..ff7f527 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -66,6 +66,7 @@ "leaflet": "^1.3.4", "primer": "^10.10.2", "react": "^16.6.3", + "react-apollo": "2.3.2", "react-dom": "^16.6.3", "react-leaflet": "^2.1.2", "react-router-dom": "^4.3.1" From ddc64ce69b3ba18f30ebd8533806a2b0c6399c7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 18:45:18 +0100 Subject: [PATCH 06/10] Remove stations static data from client --- packages/client/src/data/stations.js | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 packages/client/src/data/stations.js diff --git a/packages/client/src/data/stations.js b/packages/client/src/data/stations.js deleted file mode 100644 index 316f9ea..0000000 --- a/packages/client/src/data/stations.js +++ /dev/null @@ -1,10 +0,0 @@ -const list = [ - { id: '1', lat: 52.380528, lng: 4.900263, text: 'station 1', isFocussed: true, isSelected: true }, - { id: '2', lat: 52.378851, lng: 4.901465, text: 'station 2', isFocussed: false, isSelected: false }, - { id: '3', lat: 52.374502, lng: 4.889878, text: 'station 3', isFocussed: false, isSelected: false }, - { id: '4', lat: 52.373244, lng: 4.890908, text: 'station 4', isFocussed: false, isSelected: false }, - { id: '5', lat: 52.368109, lng: 4.889105, text: 'station 5', isFocussed: false, isSelected: false }, - { id: '6', lat: 52.369000, lng: 4.905671, text: 'station 6', isFocussed: false, isSelected: false }, -] - -export default list From 6bdb0a499c63a46d56000eca3f3684c2bff6d673 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 18:45:43 +0100 Subject: [PATCH 07/10] Implement graphql --- packages/client/src/graphql/client.js | 18 ++++++++++++++++ packages/client/src/graphql/query.js | 17 ++++++++++++++++ packages/client/src/graphql/resolvers.js | 26 ++++++++++++++++++++++++ 3 files changed, 61 insertions(+) create mode 100644 packages/client/src/graphql/client.js create mode 100644 packages/client/src/graphql/query.js create mode 100644 packages/client/src/graphql/resolvers.js diff --git a/packages/client/src/graphql/client.js b/packages/client/src/graphql/client.js new file mode 100644 index 0000000..eab20aa --- /dev/null +++ b/packages/client/src/graphql/client.js @@ -0,0 +1,18 @@ +import { ApolloClient } from 'apollo-client' +import { InMemoryCache } from 'apollo-cache-inmemory' +import { HttpLink } from 'apollo-link-http' +import { typeDefs } from './resolvers' + +const cache = new InMemoryCache() + +const client = new ApolloClient({ + cache, + link: new HttpLink({ + // uri: 'https://streams-server.herokuapp.com/graphql', + uri: 'http://localhost:4000/graphql', + }), + typeDefs, +}) + + +export default client diff --git a/packages/client/src/graphql/query.js b/packages/client/src/graphql/query.js new file mode 100644 index 0000000..3d8e611 --- /dev/null +++ b/packages/client/src/graphql/query.js @@ -0,0 +1,17 @@ +/* eslint import/prefer-default-export: 0 */ +import gql from 'graphql-tag' + +export const STATIONS = gql` + query GetStations { + stations(pageSize: 10) { + stations { + id + lat + lng + text + isFocussed + isSelected + } + } + } +` diff --git a/packages/client/src/graphql/resolvers.js b/packages/client/src/graphql/resolvers.js new file mode 100644 index 0000000..4b6f063 --- /dev/null +++ b/packages/client/src/graphql/resolvers.js @@ -0,0 +1,26 @@ +/* eslint import/prefer-default-export: 0 */ +import gql from 'graphql-tag' + +export const typeDefs = gql` + extend type Query { + stations( + pageSize: Int + after: String + ): StationConnection! + station(id: String!): Station + } + + extend type StationConnection { + cursor: String! + hasMore: Boolean! + stations: [Station]! + } + + extend type Station { + id: String! + lat: Float! + lng: Float! + text: String! + isFocussed: Boolean! + isSelected: Boolean! + }` From 2028ebb7199a0b15074afc7f22c16b6ff2bc789c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 18:46:01 +0100 Subject: [PATCH 08/10] Show map data from apollo --- packages/client/src/index.js | 47 +++++-------------- packages/client/src/pages/DemoPage/index.js | 6 ++- .../client/src/patterns/molecules/map/Map.js | 21 +++------ 3 files changed, 23 insertions(+), 51 deletions(-) diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 9230487..87d061a 100644 --- a/packages/client/src/index.js +++ b/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 = () => ( - - - - - - + + + + + + + + ) ReactDOM.render(, document.getElementById('app')) diff --git a/packages/client/src/pages/DemoPage/index.js b/packages/client/src/pages/DemoPage/index.js index 1e2db34..71c2424 100644 --- a/packages/client/src/pages/DemoPage/index.js +++ b/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 = () => (
@@ -15,7 +17,9 @@ const DemoReactPage = () => (
- + + {({ data }) => data.stations && data.stations.stations ? : null} +
diff --git a/packages/client/src/patterns/molecules/map/Map.js b/packages/client/src/patterns/molecules/map/Map.js index 4a7c71d..99634c7 100644 --- a/packages/client/src/patterns/molecules/map/Map.js +++ b/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 From 95a378aaa8e5df1aca6542692471ca1a323ddf63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 18:50:11 +0100 Subject: [PATCH 09/10] Move SERVER_URL to .env --- packages/client/src/graphql/client.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/client/src/graphql/client.js b/packages/client/src/graphql/client.js index eab20aa..3bdd0d2 100644 --- a/packages/client/src/graphql/client.js +++ b/packages/client/src/graphql/client.js @@ -8,8 +8,7 @@ const cache = new InMemoryCache() const client = new ApolloClient({ cache, link: new HttpLink({ - // uri: 'https://streams-server.herokuapp.com/graphql', - uri: 'http://localhost:4000/graphql', + uri: process.env.SERVER_URL, }), typeDefs, }) From c0744cb545f47dea4ac49bee43c994e0801786cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20Tu=C4=9Frul=20=C5=9Eahin?= Date: Thu, 13 Dec 2018 18:53:05 +0100 Subject: [PATCH 10/10] Document --- packages/client/README.md | 2 +- packages/server/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/README.md b/packages/client/README.md index 99af730..d3478f9 100644 --- a/packages/client/README.md +++ b/packages/client/README.md @@ -4,7 +4,7 @@ [![downloads](https://img.shields.io/npm/dm/streams-client.svg?style=flat-square)](http://npm-stat.com/charts.html?package=streams-client&from=2018-10-13) [![MIT License](https://img.shields.io/npm/l/streams-client.svg?style=flat-square)](http://opensource.org/licenses/MIT) -> Streams Client implements a React Client +> Streams Client implements an Apollo GraphQL Client ## Scripts diff --git a/packages/server/README.md b/packages/server/README.md index 08b27af..cb88d9c 100644 --- a/packages/server/README.md +++ b/packages/server/README.md @@ -4,7 +4,7 @@ [![downloads](https://img.shields.io/npm/dm/streams-server.svg?style=flat-square)](http://npm-stat.com/charts.html?package=streams-server&from=2018-10-13) [![MIT License](https://img.shields.io/npm/l/streams-server.svg?style=flat-square)](http://opensource.org/licenses/MIT) -> Streams Server implements an Express Server +> Streams Server implements an Apollo GraphQL Server ## Scripts