Skip to content

Commit cc5841a

Browse files
author
Roy Sutton
committed
Some stylistic changes
Enact-DCO-1.0-Signed-off-by: Roy Sutton [email protected]
1 parent e559919 commit cc5841a

File tree

7 files changed

+97
-95
lines changed

7 files changed

+97
-95
lines changed

‎graphql-example/README.md‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -19,41 +19,45 @@ Run `npm install` then `npm run serve` to have the app running on [http://localh
1919
- `ui/resolution/scale`
2020

2121
## Setup and use
22-
1. Get Personal access token for github API from https://github.com/settings/tokens/new.
22+
1. Get a personal access token for the GitHub API from https://github.com/settings/tokens/new.
2323
- Select repo for scopes.
2424
2. Replace the dummy token in [src/config.json](src/config.json) with your token.
2525
3. Install node_modules
26-
```
26+
27+
```bash
2728
npm install
2829
```
2930
4. Serve
30-
```
31+
32+
```bash
3133
npm run serve
3234
```
35+
3336
5. Open http://localhost:8080/.
34-
6. Search a github id with selections of repositories, followers, and/or organizations.
37+
6. Search for a github id, selecting which information you wish to retrieve.
3538

3639

3740
### How Apollo is used.
3841

39-
You need to make a new ApolloClient with uri and request setup.
42+
In **App.js**, a new ApolloClient is created with github uri and request setup:
43+
4044
[src/App/App.js]
4145
```javascript
4246
import ApolloClient from "apollo-boost";
4347

4448
const client = new ApolloClient({
45-
uri: 'https://api.github.com/graphql',
49+
uri: 'https://api.github.com/graphql',
4650
request: operation => {
47-
operation.setContext({
48-
headers: {
49-
authorization: `Bearer ${config.token}`,
50-
},
51-
});
52-
},
51+
operation.setContext({
52+
headers: {
53+
authorization: `Bearer ${config.token}`
54+
}
55+
});
56+
}
5357
});
5458
```
5559

56-
Pass the client as a prop to the ApolloProvider component which wraps your components which will need the data from Query.
60+
Next, the `client` prop is passed to the `ApolloProvider` component, which wraps the components that need the queried data:
5761
[src/App/App.js](src/App/App.js)
5862
```javascript
5963
import { ApolloProvider } from "react-apollo";
@@ -63,7 +67,7 @@ import { ApolloProvider } from "react-apollo";
6367
</ApolloProvider>
6468
```
6569

66-
Write a query (GET_USER) using gql and pass it as query prop for the Query component.
70+
Finally, a graphql query (`GET_USER`) is created using `gql` and is passed as the `query` prop to the `Query` component:
6771

6872
[src/views/Detail.js](src/views/Detail.js)
6973
```javascript
@@ -95,7 +99,7 @@ const GET_USER = gql`
9599
}
96100
`;
97101

98-
<Query query={GET_USER} variables={{ login: formData.userId }}>
102+
<Query query={GET_USER} variables={{login: userId}}>
99103
{({loading, data}) => {
100104
...
101105
}}

‎graphql-example/package.json‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
{
2-
"name": "newapp",
3-
"version": "1.0.0",
4-
"description": "A general template for an Enact Moonstone application.",
5-
"author": "Hailey HanGyeol Ryu",
6-
"main": "src/index.js",
7-
"scripts": {
8-
"serve": "enact serve",
9-
"pack": "enact pack",
10-
"pack-p": "enact pack -p",
11-
"watch": "enact pack --watch",
12-
"clean": "enact clean",
13-
"lint": "enact lint --strict .",
14-
"license": "enact license",
15-
"test": "enact test start --single-run",
16-
"test-watch": "enact test start"
17-
},
18-
"license": "UNLICENSED",
19-
"private": true,
20-
"repository": "",
21-
"enact": {
22-
"theme": "moonstone"
23-
},
24-
"eslintConfig": {
25-
"extends": "enact/strict"
26-
},
27-
"eslintIgnore": [
28-
"node_modules/*",
29-
"build/*",
30-
"dist/*"
31-
],
32-
"dependencies": {
33-
"@enact/core": "^2.0.0-beta.7",
34-
"@enact/i18n": "^2.0.0-beta.7",
35-
"@enact/moonstone": "^2.0.0-beta.7",
36-
"@enact/spotlight": "^2.0.0-beta.7",
37-
"@enact/ui": "^2.0.0-beta.7",
38-
"apollo-boost": "^0.1.8",
39-
"graphql": "^0.13.2",
40-
"graphql-tag": "^2.9.2",
41-
"prop-types": "^15.6.0",
42-
"react": "^16.4.0",
43-
"react-apollo": "^2.1.5",
44-
"react-dom": "^16.4.0"
45-
}
2+
"name": "",
3+
"version": "1.0.0",
4+
"description": "An Enact Moonstone GraphQL application.",
5+
"author": "Hailey HanGyeol Ryu",
6+
"main": "src/index.js",
7+
"scripts": {
8+
"serve": "enact serve",
9+
"pack": "enact pack",
10+
"pack-p": "enact pack -p",
11+
"watch": "enact pack --watch",
12+
"clean": "enact clean",
13+
"lint": "enact lint --strict .",
14+
"license": "enact license",
15+
"test": "enact test start --single-run",
16+
"test-watch": "enact test start"
17+
},
18+
"license": "Apache-2.0",
19+
"private": true,
20+
"repository": "https://github.com/enactjs/samples",
21+
"enact": {
22+
"theme": "moonstone"
23+
},
24+
"eslintConfig": {
25+
"extends": "enact/strict"
26+
},
27+
"eslintIgnore": [
28+
"node_modules/*",
29+
"build/*",
30+
"dist/*"
31+
],
32+
"dependencies": {
33+
"@enact/core": "^2.0.0-rc.1",
34+
"@enact/i18n": "^2.0.0-rc.1",
35+
"@enact/moonstone": "^2.0.0-rc.1",
36+
"@enact/spotlight": "^2.0.0-rc.1",
37+
"@enact/ui": "^2.0.0-rc.1",
38+
"apollo-boost": "^0.1.8",
39+
"graphql": "^0.13.2",
40+
"graphql-tag": "^2.9.2",
41+
"prop-types": "^15.6.0",
42+
"react": "^16.4.0",
43+
"react-apollo": "^2.1.5",
44+
"react-dom": "^16.4.0"
45+
}
4646
}

‎graphql-example/src/App/App.js‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import {ApolloProvider} from 'react-apollo';
1+
import {ActivityPanels} from '@enact/moonstone/Panels';
22
import ApolloClient from 'apollo-boost';
3-
3+
import {ApolloProvider} from 'react-apollo';
4+
import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
45
import React, {Component} from 'react';
56
import PropTypes from 'prop-types';
6-
import {ActivityPanels} from '@enact/moonstone/Panels';
7-
import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
87

98
import Detail from '../views/Detail';
109
import Search from '../views/Search';
@@ -34,33 +33,32 @@ class AppBase extends Component {
3433
index: 0
3534
};
3635

37-
3836
constructor (props) {
3937
super(props);
4038
this.userId = '';
4139
this.lists = {
42-
repo: false,
4340
fol: false,
44-
org: false
41+
org: false,
42+
repo: false
4543
};
4644

4745
this.state = {
48-
userId: '',
46+
index: this.props.index,
4947
lists: {},
50-
index: this.props.index
48+
userId: ''
5149
};
5250
}
5351

5452
handleSelectBreadcrumb = ({index}) => {
5553
this.lists = {
56-
repo: false,
5754
fol: false,
58-
org: false
55+
org: false,
56+
repo: false
5957
};
6058
this.setState({
6159
index,
62-
userId: '',
63-
lists: this.lists
60+
lists: this.lists,
61+
userId: ''
6462
});
6563
};
6664

@@ -81,21 +79,21 @@ class AppBase extends Component {
8179

8280
return (
8381
<ApolloProvider client={client}>
84-
<ActivityPanels {...this.props} onSelectBreadcrumb={this.handleSelectBreadcrumb} index={index}>
82+
<ActivityPanels {...this.props} index={index} onSelectBreadcrumb={this.handleSelectBreadcrumb}>
8583
<Search
8684
apiToken={config.token}
87-
onUserIdChange={this.onUserIdChange}
8885
onListSelectionChange={this.onListSelectionChange}
8986
onSearch={this.onSearch}
87+
onUserIdChange={this.onUserIdChange}
9088
/>
91-
<Detail userId={userId} lists={lists} />
89+
<Detail lists={lists} userId={userId} />
9290
</ActivityPanels>
9391
</ApolloProvider>
9492
);
9593
}
9694
}
9795

98-
const App = MoonstoneDecorator(AppBase);
96+
const App = MoonstoneDecorator(AppBase);
9997

10098
export default App;
10199
export {App, AppBase};

‎graphql-example/src/components/list.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import VirtualList from '@enact/moonstone/VirtualList';
2-
import Item from '@enact/moonstone/Item';
3-
import Divider from '@enact/moonstone/Divider';
41
import {Cell} from '@enact/ui/Layout';
5-
import {scale} from '@enact/ui/resolution';
2+
import Divider from '@enact/moonstone/Divider';
63
import kind from '@enact/core/kind';
7-
import React from 'react';
4+
import Item from '@enact/moonstone/Item';
85
import PropTypes from 'prop-types';
6+
import React from 'react';
7+
import {scale} from '@enact/ui/resolution';
8+
import VirtualList from '@enact/moonstone/VirtualList';
99

1010
// eslint-disable-next-line enact/display-name, enact/prop-types
1111
const renderItem = ({list}) => ({index, ...rest}) => {

‎graphql-example/src/views/Detail.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
import {Column} from '@enact/ui/Layout';
2+
import gql from 'graphql-tag';
13
import {Header, Panel} from '@enact/moonstone/Panels';
24
import Image from '@enact/moonstone/Image';
3-
import {Column} from '@enact/ui/Layout';
45
import kind from '@enact/core/kind';
5-
import React from 'react';
6+
import List from '../components/list';
67
import PropTypes from 'prop-types';
78
import {Query} from 'react-apollo';
8-
import gql from 'graphql-tag';
9-
import List from '../components/list';
9+
import React from 'react';
1010

1111
const GET_USER = gql`
1212
query($login: String!) {
@@ -37,8 +37,8 @@ const DetailBase = kind({
3737
name: 'Detail',
3838

3939
propTypes: {
40-
lists: PropTypes.object,
41-
userId: PropTypes.string
40+
lists: PropTypes.object.isRequired,
41+
userId: PropTypes.string.isRequired
4242
},
4343

4444
render: ({userId, lists, ...rest}) => (

‎graphql-example/src/views/Search.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import {Header, Panel} from '@enact/moonstone/Panels';
2-
import Input from '@enact/moonstone/Input';
31
import FormCheckboxItem from '@enact/moonstone/FormCheckboxItem';
2+
import {Header, Panel} from '@enact/moonstone/Panels';
43
import IconButton from '@enact/moonstone/IconButton';
5-
import Notification from '@enact/moonstone/Notification';
4+
import Input from '@enact/moonstone/Input';
65
import kind from '@enact/core/kind';
7-
import React from 'react';
6+
import Notification from '@enact/moonstone/Notification';
87
import PropTypes from 'prop-types';
8+
import React from 'react';
99

1010
const SearchBase = kind({
1111
name: 'Detail',
@@ -36,15 +36,15 @@ const SearchBase = kind({
3636
}
3737
},
3838

39-
render: ({apiToken, onInputChange, onSearch, onRepoSelection, onFolSelection, onOrgSelection, ...rest}) => {
39+
render: ({apiToken, onFolSelection, onInputChange, onRepoSelection, onOrgSelection, onSearch, ...rest}) => {
4040
delete rest.onUserIdChange;
4141
delete rest.onListSelectionChange;
4242
return (
4343
<Panel {...rest}>
4444
{!apiToken && <Notification open><p>Please set your github token in src/config.json.</p></Notification>}
4545
<Header title="Dev checks" type="compact" />
4646
<Input placeholder="Github id" onChange={onInputChange} dismissOnEnter />
47-
<IconButton onClick={onSearch} small={false} backgroundOpacity="transparent">search</IconButton>
47+
<IconButton onClick={onSearch} backgroundOpacity="transparent">search</IconButton>
4848
<FormCheckboxItem onToggle={onRepoSelection}>Repositories</FormCheckboxItem>
4949
<FormCheckboxItem onToggle={onFolSelection}>Followers</FormCheckboxItem>
5050
<FormCheckboxItem onToggle={onOrgSelection}>Organizations</FormCheckboxItem>

‎graphql-example/webos-meta/appinfo.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"id": "newapp",
2+
"id": "com.enactjs.graphql",
33
"version": "1.0.0",
44
"vendor": "LGE-SVL",
55
"type": "web",
66
"main": "index.html",
7-
"title": "Enact App Template",
7+
"title": "Enact GraphQL Sample",
88
"icon": "icon.png",
99
"miniicon": "icon-mini.png",
1010
"largeIcon": "icon-large.png",

0 commit comments

Comments
 (0)