Added subscription support and switched backend to graphcool.
This commit is contained in:
parent
b2c548538a
commit
1932294e23
8 changed files with 110 additions and 66 deletions
52
package-lock.json
generated
52
package-lock.json
generated
|
@ -12,8 +12,7 @@
|
||||||
"@types/graphql": {
|
"@types/graphql": {
|
||||||
"version": "0.9.3",
|
"version": "0.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-0.9.3.tgz",
|
||||||
"integrity": "sha512-+NlcRhAXQUWXnmKomiNR/5ELupOQ3N1Oz7EcUTO8P3nWDo8b2szwvaqelzE97h5N3MU27zrNLGDomJh85OlYnQ==",
|
"integrity": "sha512-+NlcRhAXQUWXnmKomiNR/5ELupOQ3N1Oz7EcUTO8P3nWDo8b2szwvaqelzE97h5N3MU27zrNLGDomJh85OlYnQ=="
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"@types/isomorphic-fetch": {
|
"@types/isomorphic-fetch": {
|
||||||
"version": "0.0.34",
|
"version": "0.0.34",
|
||||||
|
@ -691,6 +690,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/babylon/-/babylon-6.17.4.tgz",
|
"resolved": "https://registry.npmjs.org/babylon/-/babylon-6.17.4.tgz",
|
||||||
"integrity": "sha512-kChlV+0SXkjE0vUn9OZ7pBMWRFd8uq3mZe8x1K6jhuNcAFAtEnjchFAqB+dYEXKyd+JpT6eppRR78QAr5gTsUw=="
|
"integrity": "sha512-kChlV+0SXkjE0vUn9OZ7pBMWRFd8uq3mZe8x1K6jhuNcAFAtEnjchFAqB+dYEXKyd+JpT6eppRR78QAr5gTsUw=="
|
||||||
},
|
},
|
||||||
|
"backo2": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
|
||||||
|
"integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
|
||||||
|
},
|
||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||||
|
@ -2664,6 +2668,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-3.1.0.tgz",
|
||||||
"integrity": "sha1-PqDY6GRrXO5oA1AWqadVfBXCHpY="
|
"integrity": "sha1-PqDY6GRrXO5oA1AWqadVfBXCHpY="
|
||||||
},
|
},
|
||||||
|
"graphql-subscriptions": {
|
||||||
|
"version": "0.4.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/graphql-subscriptions/-/graphql-subscriptions-0.4.4.tgz",
|
||||||
|
"integrity": "sha512-hqfUsZv39qmK4SEoKMnTO05U4EVvIeAD4ai5ztE9gCl4hEdeaF2Q5gvF80ONQQAnkys4odzxWYd2tBLS/cWl8g=="
|
||||||
|
},
|
||||||
"graphql-tag": {
|
"graphql-tag": {
|
||||||
"version": "2.4.2",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.4.2.tgz",
|
||||||
|
@ -3593,6 +3602,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
|
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
|
||||||
},
|
},
|
||||||
|
"lodash.assign": {
|
||||||
|
"version": "4.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
|
||||||
|
"integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
|
||||||
|
},
|
||||||
"lodash.camelcase": {
|
"lodash.camelcase": {
|
||||||
"version": "4.3.0",
|
"version": "4.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
||||||
|
@ -3623,6 +3637,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
|
||||||
"integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
|
"integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
|
||||||
},
|
},
|
||||||
|
"lodash.isstring": {
|
||||||
|
"version": "4.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
|
||||||
|
"integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
|
||||||
|
},
|
||||||
"lodash.memoize": {
|
"lodash.memoize": {
|
||||||
"version": "4.1.2",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
|
||||||
|
@ -5718,6 +5737,18 @@
|
||||||
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.18.2.tgz",
|
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.18.2.tgz",
|
||||||
"integrity": "sha512-WPpJPZGUxWYHWIUMNNOYqql7zh85zGmr84FdTVWq52WTIkqlW9xSxD3QYWi/T31cqn9UNSsietVEgGn2aaSCzw=="
|
"integrity": "sha512-WPpJPZGUxWYHWIUMNNOYqql7zh85zGmr84FdTVWq52WTIkqlW9xSxD3QYWi/T31cqn9UNSsietVEgGn2aaSCzw=="
|
||||||
},
|
},
|
||||||
|
"subscriptions-transport-ws": {
|
||||||
|
"version": "0.8.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.8.1.tgz",
|
||||||
|
"integrity": "sha512-RRRrxZCn0Gxj8etaeliqZtjKRpE3J6PY+/rocUR8RpPe7Y3M+tG2bu1/aNe7p1DsC2fnco9QU9oH49BGrg8i7g==",
|
||||||
|
"dependencies": {
|
||||||
|
"eventemitter3": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||||
|
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"supports-color": {
|
"supports-color": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz",
|
||||||
|
@ -5917,6 +5948,11 @@
|
||||||
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
|
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"ultron": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.0.tgz",
|
||||||
|
"integrity": "sha1-sHoualQagV/Go0zNRTO67DB8qGQ="
|
||||||
|
},
|
||||||
"uniq": {
|
"uniq": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
|
||||||
|
@ -6363,6 +6399,18 @@
|
||||||
"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
|
||||||
"integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8="
|
"integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8="
|
||||||
},
|
},
|
||||||
|
"ws": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ws/-/ws-3.0.0.tgz",
|
||||||
|
"integrity": "sha1-mN2wAFbIOQy3Ued4h4hJf5kQO2w=",
|
||||||
|
"dependencies": {
|
||||||
|
"safe-buffer": {
|
||||||
|
"version": "5.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
|
||||||
|
"integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"xdg-basedir": {
|
"xdg-basedir": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
|
||||||
|
|
|
@ -9,7 +9,8 @@
|
||||||
"react-dom": "^15.6.1",
|
"react-dom": "^15.6.1",
|
||||||
"react-router": "^4.1.1",
|
"react-router": "^4.1.1",
|
||||||
"react-scripts": "1.0.10",
|
"react-scripts": "1.0.10",
|
||||||
"react-tap-event-plugin": "^2.0.1"
|
"react-tap-event-plugin": "^2.0.1",
|
||||||
|
"subscriptions-transport-ws": "^0.8.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
|
|
|
@ -8,7 +8,7 @@ export default ({achievements, id, completed}) => {
|
||||||
return <div>Loading...</div>
|
return <div>Loading...</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
const list = achievements.sort((a, b) => {
|
const list = [...achievements].sort((a, b) => {
|
||||||
if (a.number === b.number)
|
if (a.number === b.number)
|
||||||
return a.letter > b.letter;
|
return a.letter > b.letter;
|
||||||
return a.number > b.number;
|
return a.number > b.number;
|
||||||
|
|
|
@ -10,7 +10,7 @@ export default ({
|
||||||
return <div> Loading... </div>
|
return <div> Loading... </div>
|
||||||
}
|
}
|
||||||
|
|
||||||
const sortedAdventures = allAdventures.sort((a,b) => (a.number > b.number));
|
const sortedAdventures = [...allAdventures].sort((a,b) => (a.number > b.number));
|
||||||
|
|
||||||
const [
|
const [
|
||||||
requiredAdventures,
|
requiredAdventures,
|
||||||
|
|
|
@ -1,20 +1,17 @@
|
||||||
import { gql, graphql } from 'react-apollo';
|
import { gql, graphql } from 'react-apollo';
|
||||||
import { stripEdges } from '../utils.js';
|
|
||||||
|
|
||||||
export default graphql(gql`
|
export default graphql(gql`
|
||||||
query GetAchievementsForAdventure($adventureID:ID!){
|
query GetAchievementsForAdventure($adventureID:ID!){
|
||||||
getAdventure(id:$adventureID) {
|
allAchievements(filter: {
|
||||||
achievements {
|
adventure: {
|
||||||
edges {
|
id: $adventureID
|
||||||
node {
|
|
||||||
id,
|
|
||||||
number,
|
|
||||||
letter,
|
|
||||||
description,
|
|
||||||
additionalText
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}) {
|
||||||
|
id,
|
||||||
|
number,
|
||||||
|
letter,
|
||||||
|
description,
|
||||||
|
additionalText
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,{
|
`,{
|
||||||
|
@ -26,8 +23,8 @@ export default graphql(gql`
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: ({ownProps, data}) => {
|
props: ({ownProps, data}) => {
|
||||||
return data.getAdventure ? {
|
return data.allAchievements ? {
|
||||||
achievements: stripEdges(data.getAdventure.achievements),
|
achievements: data.allAchievements,
|
||||||
...ownProps
|
...ownProps
|
||||||
} : {...ownProps}
|
} : {...ownProps}
|
||||||
|
|
||||||
|
|
|
@ -1,26 +1,18 @@
|
||||||
import { gql, graphql } from 'react-apollo';
|
import { gql, graphql } from 'react-apollo';
|
||||||
|
|
||||||
import { stripEdges } from '../utils.js';
|
|
||||||
|
|
||||||
export default graphql(gql`
|
export default graphql(gql`
|
||||||
query GetAllAdventuresForRank{
|
query GetAllAdventures{
|
||||||
viewer {
|
allAdventures {
|
||||||
allAdventures {
|
name,
|
||||||
edges {
|
number,
|
||||||
node {
|
required,
|
||||||
name,
|
id
|
||||||
number,
|
|
||||||
required,
|
|
||||||
id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,{
|
`,{
|
||||||
props: ({ownProps, data}) => (
|
props: ({ownProps, data}) => (
|
||||||
data.viewer ? {
|
data.allAdventures ? {
|
||||||
allAdventures: stripEdges(data.viewer.allAdventures),
|
allAdventures: data.allAdventures,
|
||||||
...ownProps
|
...ownProps
|
||||||
} : {...ownProps})
|
} : {...ownProps})
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,36 +1,31 @@
|
||||||
import { gql, graphql } from 'react-apollo';
|
import { gql, graphql } from 'react-apollo';
|
||||||
|
|
||||||
export default graphql(gql`
|
export default graphql(gql`
|
||||||
query GetScoutData($scoutID:ID!){
|
query getScoutData($scoutID:ID!){
|
||||||
getScout(id: $scoutID){
|
Scout(id: $scoutID) {
|
||||||
displayName,
|
displayName
|
||||||
advancementDeadline,
|
advancementDeadline
|
||||||
adventures {
|
completedAdventures {
|
||||||
edges {
|
id
|
||||||
node {
|
name
|
||||||
name
|
}
|
||||||
}
|
completedAchievements {
|
||||||
}
|
id
|
||||||
},
|
number
|
||||||
achievements {
|
letter
|
||||||
edges {
|
|
||||||
node {
|
|
||||||
number,
|
|
||||||
letter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
`,{
|
`,{
|
||||||
options : ({scoutID}) => ({variables: {scoutID}}),
|
options : ({scoutID}) => ({variables: {scoutID}}),
|
||||||
props: ({ ownProps, data }) => (
|
props: ({ ownProps, data }) => (
|
||||||
data.getScout ? {
|
data.Scout ? {
|
||||||
scoutID: ownProps.scoutID,
|
scoutID: ownProps.scoutID,
|
||||||
displayName: data.getScout.displayName,
|
displayName: data.Scout.displayName,
|
||||||
completedAdventures: data.getScout.adventures,
|
advancementDeadline: data.Scout.advancementDeadline,
|
||||||
completedAchievements: data.getScout.achievements,
|
completedAdventures: data.Scout.completedAdventures,
|
||||||
advancementDeadline: data.getScout.advancementDeadline
|
completedAchievements: data.Scout.completedAchievements
|
||||||
} : {
|
} : {
|
||||||
scoutID: ownProps.scoutID
|
scoutID: ownProps.scoutID
|
||||||
}
|
}
|
||||||
|
|
27
src/index.js
27
src/index.js
|
@ -1,12 +1,19 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
ApolloClient,
|
ApolloClient,
|
||||||
createNetworkInterface,
|
createNetworkInterface,
|
||||||
ApolloProvider
|
ApolloProvider
|
||||||
} from 'react-apollo';
|
} from 'react-apollo';
|
||||||
|
import {
|
||||||
|
SubscriptionClient,
|
||||||
|
addGraphQLSubscriptions
|
||||||
|
} from 'subscriptions-transport-ws';
|
||||||
|
|
||||||
import injectTapEventPlugin from 'react-tap-event-plugin';
|
import injectTapEventPlugin from 'react-tap-event-plugin';
|
||||||
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
|
||||||
|
|
||||||
//import registerServiceWorker from './registerServiceWorker';
|
//import registerServiceWorker from './registerServiceWorker';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
@ -15,23 +22,27 @@ import App from './App';
|
||||||
// http://stackoverflow.com/a/34015469/988941
|
// http://stackoverflow.com/a/34015469/988941
|
||||||
injectTapEventPlugin();
|
injectTapEventPlugin();
|
||||||
|
|
||||||
const client = new ApolloClient({
|
const httpInterface = createNetworkInterface({
|
||||||
networkInterface: createNetworkInterface({
|
uri: "https://api.graph.cool/simple/v1/cj53el7vnpphz01759pf8l7ou"
|
||||||
uri: 'https://us-west-2.api.scaphold.io/graphql/scout'
|
|
||||||
})
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const loc = window.location;
|
const wsClient = new SubscriptionClient("wss://subscriptions.us-west-2.graph.cool/v1/cj53el7vnpphz01759pf8l7ou", {
|
||||||
|
reconnect: true
|
||||||
|
});
|
||||||
|
|
||||||
console.log("location: ", loc);
|
const networkInterface = addGraphQLSubscriptions(httpInterface, wsClient);
|
||||||
|
|
||||||
|
const client = new ApolloClient({ networkInterface });
|
||||||
|
|
||||||
|
const location = window.location;
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<MuiThemeProvider>
|
<MuiThemeProvider>
|
||||||
<ApolloProvider client={client}>
|
<ApolloProvider client={client}>
|
||||||
<App slug={loc.pathname} query={loc.search} />
|
<App slug={location.pathname} query={location.search} />
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
</MuiThemeProvider>,
|
</MuiThemeProvider>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
);
|
);
|
||||||
|
|
||||||
//registerServiceWorker();
|
//registerServiceWorker(); //See import above
|
||||||
|
|
Loading…
Reference in a new issue