From bd35164336b60c1e236faa0990db560720e799e0 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Wed, 20 Jun 2018 11:42:10 -0700 Subject: [PATCH 01/19] Added graphql-example --- graphql-example/.gitignore | 16 +++ graphql-example/README.md | 103 ++++++++++++++++++++ graphql-example/package.json | 46 +++++++++ graphql-example/resources/ilibmanifest.json | 3 + graphql-example/src/App/App.js | 98 +++++++++++++++++++ graphql-example/src/App/package.json | 3 + graphql-example/src/components/list.js | 50 ++++++++++ graphql-example/src/config.json | 3 + graphql-example/src/index.js | 13 +++ graphql-example/src/views/Detail.js | 68 +++++++++++++ graphql-example/src/views/Search.js | 52 ++++++++++ graphql-example/webos-meta/appinfo.json | 12 +++ graphql-example/webos-meta/icon-large.png | Bin 0 -> 4151 bytes graphql-example/webos-meta/icon-mini.png | Bin 0 -> 2004 bytes graphql-example/webos-meta/icon.png | Bin 0 -> 2562 bytes 15 files changed, 467 insertions(+) create mode 100644 graphql-example/.gitignore create mode 100644 graphql-example/README.md create mode 100644 graphql-example/package.json create mode 100644 graphql-example/resources/ilibmanifest.json create mode 100644 graphql-example/src/App/App.js create mode 100644 graphql-example/src/App/package.json create mode 100644 graphql-example/src/components/list.js create mode 100644 graphql-example/src/config.json create mode 100644 graphql-example/src/index.js create mode 100644 graphql-example/src/views/Detail.js create mode 100644 graphql-example/src/views/Search.js create mode 100644 graphql-example/webos-meta/appinfo.json create mode 100644 graphql-example/webos-meta/icon-large.png create mode 100644 graphql-example/webos-meta/icon-mini.png create mode 100644 graphql-example/webos-meta/icon.png diff --git a/graphql-example/.gitignore b/graphql-example/.gitignore new file mode 100644 index 00000000..0834513f --- /dev/null +++ b/graphql-example/.gitignore @@ -0,0 +1,16 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules + +# testing +coverage + +# production +build +dist + +# misc +.DS_Store +npm-debug.log +.env diff --git a/graphql-example/README.md b/graphql-example/README.md new file mode 100644 index 00000000..0532c6b7 --- /dev/null +++ b/graphql-example/README.md @@ -0,0 +1,103 @@ +## Use Apollo with Enact and Github GraphqQL API + +A sample application that demonstrates how to use GraphqQL with Enact components. It uses [Apollo Client](https://github.com/apollographql/apollo-client), (GraphqQL client.) + +Run `npm install` then `npm run serve` to have the app running on [http://localhost:8080](http://localhost:8080), where you can view it in your browser. + +#### Enact Components Used +- `moonstone/Panels/ActivityPanels` +- `moonstone/Panels/Panel` +- `moonstone/Panels/Header` +- `moonstone/Button` +- `moonstone/VirtualList` +- `moonstone/Item` +- `moonstone/Divider` +- `moonstone/Image` +- `moonstone/Input` +- `ui/Layout/Column` +- `ui/Layout/Cell` +- `ui/resolution/scale` + +## Setup and use +1. Get Personal access token for github API from https://github.com/settings/tokens/new. + - Select repo for scopes. +2. Replace the dummy token in [src/config.json](src/config.json) with your token. +3. Install node_modules +``` +npm install +``` +4. Serve +``` +npm run serve +``` +5. Open http://localhost:8080/. +6. Search a github id with selections of repositories, followers, and/or organizations. + + +### How Apollo is used. + +You need to make a new ApolloClient with uri and request setup. +[src/App/App.js] +```javascript +import ApolloClient from "apollo-boost"; + +const client = new ApolloClient({ + uri: 'https://api.github.com/graphql', + request: operation => { + operation.setContext({ + headers: { + authorization: `Bearer ${config.token}`, + }, + }); + }, +}); +``` + +Pass the client as a prop to the ApolloProvider component which wraps your components which will need the data from Query. +[src/App/App.js](src/App/App.js) +```javascript +import { ApolloProvider } from "react-apollo"; + + + ... + +``` + +Write a query (GET_USER) using gql and pass it as query prop for the Query component. + +[src/views/Detail.js](src/views/Detail.js) +```javascript +import { Query } from "react-apollo"; +import gql from "graphql-tag"; + +const GET_USER = gql` + query($login: String!) { + user(login: $login) { + name + avatarUrl + organizations(first: 10) { + nodes { + name + } + } + repositories(first: 10) { + nodes { + name + url + } + } + followers(first: 10) { + nodes { + name + } + } + } + } +`; + + + {({loading, data}) => { + ... + }} + +``` diff --git a/graphql-example/package.json b/graphql-example/package.json new file mode 100644 index 00000000..a065c376 --- /dev/null +++ b/graphql-example/package.json @@ -0,0 +1,46 @@ +{ + "name": "newapp", + "version": "1.0.0", + "description": "A general template for an Enact Moonstone application.", + "author": "Hailey HanGyeol Ryu", + "main": "src/index.js", + "scripts": { + "serve": "enact serve", + "pack": "enact pack", + "pack-p": "enact pack -p", + "watch": "enact pack --watch", + "clean": "enact clean", + "lint": "enact lint .", + "license": "enact license", + "test": "enact test start --single-run", + "test-watch": "enact test start" + }, + "license": "UNLICENSED", + "private": true, + "repository": "", + "enact": { + "theme": "moonstone" + }, + "eslintConfig": { + "extends": "enact/strict" + }, + "eslintIgnore": [ + "node_modules/*", + "build/*", + "dist/*" + ], + "dependencies": { + "@enact/core": "^2.0.0-beta.7", + "@enact/i18n": "^2.0.0-beta.7", + "@enact/moonstone": "^2.0.0-beta.7", + "@enact/spotlight": "^2.0.0-beta.7", + "@enact/ui": "^2.0.0-beta.7", + "apollo-boost": "^0.1.8", + "graphql": "^0.13.2", + "graphql-tag": "^2.9.2", + "prop-types": "^15.6.0", + "react": "^16.4.0", + "react-apollo": "^2.1.5", + "react-dom": "^16.4.0" + } +} diff --git a/graphql-example/resources/ilibmanifest.json b/graphql-example/resources/ilibmanifest.json new file mode 100644 index 00000000..5916671d --- /dev/null +++ b/graphql-example/resources/ilibmanifest.json @@ -0,0 +1,3 @@ +{ + "files": [] +} \ No newline at end of file diff --git a/graphql-example/src/App/App.js b/graphql-example/src/App/App.js new file mode 100644 index 00000000..8a46e0b5 --- /dev/null +++ b/graphql-example/src/App/App.js @@ -0,0 +1,98 @@ +import {ApolloProvider} from 'react-apollo'; +import ApolloClient from 'apollo-boost'; + +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {ActivityPanels} from '@enact/moonstone/Panels'; +import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator'; + +import Detail from '../views/Detail'; +import Search from '../views/Search'; +import config from '../config.json'; + +const client = new ApolloClient({ + uri: 'https://api.github.com/graphql', + request: operation => { + operation.setContext({ + headers: { + authorization: `Bearer ${config.token}` + } + }); + } +}); + +class AppBase extends Component { + static propTypes = { + index: PropTypes.number, + onListSelectionChange: PropTypes.func, + onSearch: PropTypes.func, + onUserIdChange: PropTypes.func + }; + + static defaultProps = { + index: 0 + }; + + + constructor (props) { + super(props); + this.userId = 'haileyr'; + this.lists = { + repo: true, + fol: true, + org: true + }; + + this.state = { + userId: '', + lists: {}, + index: this.props.index + }; + } + + handleSelectBreadcrumb = ({index}) => { + this.lists = { + repo: false, + fol: false, + org: false + }; + this.setState({ + index, + userId: '', + lists: this.lists + }); + }; + + onUserIdChange = (userId) => { + this.userId = userId; + }; + + onListSelectionChange = (target, value) => { + this.lists[target] = value; + }; + + onSearch = () => { + this.setState({index: 1, userId: this.userId, lists: this.lists}); + }; + + render () { + const {index, userId, lists} = this.state; + + return ( + + + + + + ); + } +} + +const App = MoonstoneDecorator(AppBase); + +export default App; +export {App, AppBase}; diff --git a/graphql-example/src/App/package.json b/graphql-example/src/App/package.json new file mode 100644 index 00000000..add0ba2a --- /dev/null +++ b/graphql-example/src/App/package.json @@ -0,0 +1,3 @@ +{ + "main": "App.js" +} \ No newline at end of file diff --git a/graphql-example/src/components/list.js b/graphql-example/src/components/list.js new file mode 100644 index 00000000..15b5ff3e --- /dev/null +++ b/graphql-example/src/components/list.js @@ -0,0 +1,50 @@ +import VirtualList from '@enact/moonstone/VirtualList'; +import Item from '@enact/moonstone/Item'; +import Divider from '@enact/moonstone/Divider'; +import {Cell} from '@enact/ui/Layout'; +import {scale} from '@enact/ui/resolution'; +import kind from '@enact/core/kind'; +import React from 'react'; +import PropTypes from 'prop-types'; + +// eslint-disable-next-line enact/display-name, enact/prop-types +const renderItem = ({list}) => ({index, ...rest}) => { + return ( + + {list[index].name} + + ); +}; + +const ListBase = kind({ + name: 'Detail', + + propTypes: { + list: PropTypes.object, + userId: PropTypes.string + }, + + computed: { + itemRenderer: renderItem + }, + + render: ({itemRenderer, list}) => { + return [ + Repositories, + ]; + } +}); + +export default ListBase; +export {ListBase as List, ListBase}; diff --git a/graphql-example/src/config.json b/graphql-example/src/config.json new file mode 100644 index 00000000..6f98ac7d --- /dev/null +++ b/graphql-example/src/config.json @@ -0,0 +1,3 @@ +{ + "token":"a67285b115df55b4bc1b38" +} diff --git a/graphql-example/src/index.js b/graphql-example/src/index.js new file mode 100644 index 00000000..b4e758df --- /dev/null +++ b/graphql-example/src/index.js @@ -0,0 +1,13 @@ +import React from 'react'; +import {render} from 'react-dom'; + +import App from './App'; + +const appElement = (); + +// In a browser environment, render instead of exporting +if (typeof window !== 'undefined') { + render(appElement, document.getElementById('root')); +} + +export default appElement; diff --git a/graphql-example/src/views/Detail.js b/graphql-example/src/views/Detail.js new file mode 100644 index 00000000..a9ba52fe --- /dev/null +++ b/graphql-example/src/views/Detail.js @@ -0,0 +1,68 @@ +import {Header, Panel} from '@enact/moonstone/Panels'; +import Image from '@enact/moonstone/Image'; +import {Column} from '@enact/ui/Layout'; +import kind from '@enact/core/kind'; +import React from 'react'; +import PropTypes from 'prop-types'; +import {Query} from 'react-apollo'; +import gql from 'graphql-tag'; +import List from '../components/list'; + +const GET_USER = gql` + query($login: String!) { + user(login: $login) { + name + avatarUrl + organizations(first: 10) { + nodes { + name + } + } + repositories(first: 10) { + nodes { + name + url + } + } + followers(first: 10) { + nodes { + name + } + } + } + } +`; + +const DetailBase = kind({ + name: 'Detail', + + propTypes: { + lists: PropTypes.object, + userId: PropTypes.string + }, + + render: ({userId, lists, ...rest}) => ( + + {({loading, data}) => { + if (loading) { + return (

Loading...

); + } else if (!data && !data.user) { + return

User not found...

; + } else { + return ( +
+ +
+ + {lists.repo && } + {lists.org && } + {lists.fol && } + + ); + } + }} + + ) +}); +export default DetailBase; +export {DetailBase as Detail, DetailBase}; diff --git a/graphql-example/src/views/Search.js b/graphql-example/src/views/Search.js new file mode 100644 index 00000000..49528e16 --- /dev/null +++ b/graphql-example/src/views/Search.js @@ -0,0 +1,52 @@ +import {Header, Panel} from '@enact/moonstone/Panels'; +import Input from '@enact/moonstone/Input'; +import FormCheckboxItem from '@enact/moonstone/FormCheckboxItem'; +import IconButton from '@enact/moonstone/IconButton'; +import kind from '@enact/core/kind'; +import React from 'react'; +import PropTypes from 'prop-types'; + +const SearchBase = kind({ + name: 'Detail', + + propTypes: { + onListSelectionChange: PropTypes.func, + onSearch: PropTypes.func, + onUserIdChange: PropTypes.func, + userId: PropTypes.string + }, + + handlers: { + onSearch: (ev, props) => { + props.onSearch(); + }, + onInputChange: (ev, props) => { + props.onUserIdChange(ev.value); + }, + onRepoSelection: (value, props) => { + props.onListSelectionChange('repo', value.selected); + }, + onFolSelection: (value, props) => { + props.onListSelectionChange('fol', value.selected); + }, + onOrgSelection: (value, props) => { + props.onListSelectionChange('org', value.selected); + } + }, + + render: ({onInputChange, onSearch, onRepoSelection, onFolSelection, onOrgSelection, ...rest}) => { + delete rest.onUserIdChange; + delete rest.onListSelectionChange; + return ( +
+ + search + Repositories + Followers + Organizations + ); + } +}); + +export default SearchBase; +export {SearchBase as Search, SearchBase}; diff --git a/graphql-example/webos-meta/appinfo.json b/graphql-example/webos-meta/appinfo.json new file mode 100644 index 00000000..561a35f8 --- /dev/null +++ b/graphql-example/webos-meta/appinfo.json @@ -0,0 +1,12 @@ +{ + "id": "newapp", + "version": "1.0.0", + "vendor": "LGE-SVL", + "type": "web", + "main": "index.html", + "title": "Enact App Template", + "icon": "icon.png", + "miniicon": "icon-mini.png", + "largeIcon": "icon-large.png", + "uiRevision": 2 +} diff --git a/graphql-example/webos-meta/icon-large.png b/graphql-example/webos-meta/icon-large.png new file mode 100644 index 0000000000000000000000000000000000000000..d237e9fb1ec8d3d721bdc64ddc52ed7419ae43c3 GIT binary patch literal 4151 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 K+D)3y3I73^C56KP literal 0 HcmV?d00001 diff --git a/graphql-example/webos-meta/icon-mini.png b/graphql-example/webos-meta/icon-mini.png new file mode 100644 index 0000000000000000000000000000000000000000..9771fac4c525609c12f7ecea8f7c429724ae69ec GIT binary patch literal 2004 zcmV;_2P^oAP)004R>004l5008;`004mK004C`008P>0026e000+ooVrmw00006 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 Lv^1#EbBp~q)m*Mh literal 0 HcmV?d00001 From 077eebee75c4e3df48a710fbe7d8e17ef44aea75 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Wed, 20 Jun 2018 17:04:07 -0700 Subject: [PATCH 02/19] fixes --- graphql-example/src/App/App.js | 29 +++++++++++++------------- graphql-example/src/components/list.js | 2 +- graphql-example/src/views/Detail.js | 6 +++--- graphql-example/src/views/Search.js | 2 +- 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/graphql-example/src/App/App.js b/graphql-example/src/App/App.js index 8a46e0b5..ee7f22ba 100644 --- a/graphql-example/src/App/App.js +++ b/graphql-example/src/App/App.js @@ -36,11 +36,11 @@ class AppBase extends Component { constructor (props) { super(props); - this.userId = 'haileyr'; + this.userId = ''; this.lists = { - repo: true, - fol: true, - org: true + repo: false, + fol: false, + org: false }; this.state = { @@ -78,17 +78,16 @@ class AppBase extends Component { render () { const {index, userId, lists} = this.state; - return ( - - - - - - ); + return + + + + + ; } } diff --git a/graphql-example/src/components/list.js b/graphql-example/src/components/list.js index 15b5ff3e..c36808c6 100644 --- a/graphql-example/src/components/list.js +++ b/graphql-example/src/components/list.js @@ -23,7 +23,7 @@ const ListBase = kind({ name: 'Detail', propTypes: { - list: PropTypes.object, + list: PropTypes.arrayOf(PropTypes.object), userId: PropTypes.string }, diff --git a/graphql-example/src/views/Detail.js b/graphql-example/src/views/Detail.js index a9ba52fe..b32d7d9c 100644 --- a/graphql-example/src/views/Detail.js +++ b/graphql-example/src/views/Detail.js @@ -45,11 +45,11 @@ const DetailBase = kind({ {({loading, data}) => { if (loading) { - return (

Loading...

); + return

Loading...

; } else if (!data && !data.user) { return

User not found...

; } else { - return ( + return
@@ -58,7 +58,7 @@ const DetailBase = kind({ {lists.org && } {lists.fol && } - ); + ; } }} diff --git a/graphql-example/src/views/Search.js b/graphql-example/src/views/Search.js index 49528e16..92cad3c0 100644 --- a/graphql-example/src/views/Search.js +++ b/graphql-example/src/views/Search.js @@ -39,7 +39,7 @@ const SearchBase = kind({ delete rest.onListSelectionChange; return (
- + search Repositories Followers From ff7e3d7b49ac1d59b3529cc3f7ad7a9aa193ae4b Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Thu, 21 Jun 2018 11:22:34 -0700 Subject: [PATCH 03/19] Added notification when token isn't set. Enact-DCO-1.0-Signed-off-by: HanGyeol Ryu --- graphql-example/src/App/App.js | 2 ++ graphql-example/src/config.json | 2 +- graphql-example/src/views/Search.js | 5 ++++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/graphql-example/src/App/App.js b/graphql-example/src/App/App.js index ee7f22ba..c5da65e0 100644 --- a/graphql-example/src/App/App.js +++ b/graphql-example/src/App/App.js @@ -10,6 +10,7 @@ import Detail from '../views/Detail'; import Search from '../views/Search'; import config from '../config.json'; + const client = new ApolloClient({ uri: 'https://api.github.com/graphql', request: operation => { @@ -81,6 +82,7 @@ class AppBase extends Component { return { + render: ({apiToken, onInputChange, onSearch, onRepoSelection, onFolSelection, onOrgSelection, ...rest}) => { delete rest.onUserIdChange; delete rest.onListSelectionChange; return ( + {!apiToken &&

Please set your github token in src/config.json.

}
search From e28f6e1edcfa1ace6c3838d3aa5cc7cd36025ff5 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Thu, 21 Jun 2018 11:25:53 -0700 Subject: [PATCH 04/19] use lint --strict --- graphql-example/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/graphql-example/package.json b/graphql-example/package.json index a065c376..4d4758da 100644 --- a/graphql-example/package.json +++ b/graphql-example/package.json @@ -10,7 +10,7 @@ "pack-p": "enact pack -p", "watch": "enact pack --watch", "clean": "enact clean", - "lint": "enact lint .", + "lint": "enact lint --strict .", "license": "enact license", "test": "enact test start --single-run", "test-watch": "enact test start" From 07c90a2a5f4459bf83855c129560a03c241f31de Mon Sep 17 00:00:00 2001 From: Derek Tor Date: Thu, 21 Jun 2018 12:02:54 -0700 Subject: [PATCH 05/19] Changed paren styles to be more uniform Enact-DCO-1.0-Signed-off-by: Derek Tor derek.tor@lge.com --- graphql-example/src/App/App.js | 24 +++++++++++++----------- graphql-example/src/views/Search.js | 20 +++++++++++--------- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/graphql-example/src/App/App.js b/graphql-example/src/App/App.js index c5da65e0..e8145ef1 100644 --- a/graphql-example/src/App/App.js +++ b/graphql-example/src/App/App.js @@ -79,17 +79,19 @@ class AppBase extends Component { render () { const {index, userId, lists} = this.state; - return - - - - - ; + return ( + + + + + + + ); } } diff --git a/graphql-example/src/views/Search.js b/graphql-example/src/views/Search.js index 19aafc9c..fc5443f8 100644 --- a/graphql-example/src/views/Search.js +++ b/graphql-example/src/views/Search.js @@ -39,15 +39,17 @@ const SearchBase = kind({ render: ({apiToken, onInputChange, onSearch, onRepoSelection, onFolSelection, onOrgSelection, ...rest}) => { delete rest.onUserIdChange; delete rest.onListSelectionChange; - return ( - {!apiToken &&

Please set your github token in src/config.json.

} -
- - search - Repositories - Followers - Organizations - ); + return ( + + {!apiToken &&

Please set your github token in src/config.json.

} +
+ + search + Repositories + Followers + Organizations + + ); } }); From 01e439ca96d370a3aab75750abc2eea8722ce535 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 16 Jul 2018 15:33:50 -0400 Subject: [PATCH 06/19] Some stylistic changes Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- graphql-example/README.md | 34 +++++----- graphql-example/package.json | 88 ++++++++++++------------- graphql-example/src/App/App.js | 32 +++++---- graphql-example/src/components/list.js | 10 +-- graphql-example/src/views/Detail.js | 12 ++-- graphql-example/src/views/Search.js | 12 ++-- graphql-example/webos-meta/appinfo.json | 4 +- 7 files changed, 97 insertions(+), 95 deletions(-) diff --git a/graphql-example/README.md b/graphql-example/README.md index 0532c6b7..b09eccd3 100644 --- a/graphql-example/README.md +++ b/graphql-example/README.md @@ -19,41 +19,45 @@ Run `npm install` then `npm run serve` to have the app running on [http://localh - `ui/resolution/scale` ## Setup and use -1. Get Personal access token for github API from https://github.com/settings/tokens/new. +1. Get a personal access token for the GitHub API from https://github.com/settings/tokens/new. - Select repo for scopes. 2. Replace the dummy token in [src/config.json](src/config.json) with your token. 3. Install node_modules -``` + +```bash npm install ``` 4. Serve -``` + +```bash npm run serve ``` + 5. Open http://localhost:8080/. -6. Search a github id with selections of repositories, followers, and/or organizations. +6. Search for a github id, selecting which information you wish to retrieve. ### How Apollo is used. -You need to make a new ApolloClient with uri and request setup. +In **App.js**, a new ApolloClient is created with github uri and request setup: + [src/App/App.js] ```javascript import ApolloClient from "apollo-boost"; const client = new ApolloClient({ - uri: 'https://api.github.com/graphql', + uri: 'https://api.github.com/graphql', request: operation => { - operation.setContext({ - headers: { - authorization: `Bearer ${config.token}`, - }, - }); - }, + operation.setContext({ + headers: { + authorization: `Bearer ${config.token}` + } + }); + } }); ``` -Pass the client as a prop to the ApolloProvider component which wraps your components which will need the data from Query. +Next, the `client` prop is passed to the `ApolloProvider` component, which wraps the components that need the queried data: [src/App/App.js](src/App/App.js) ```javascript import { ApolloProvider } from "react-apollo"; @@ -63,7 +67,7 @@ import { ApolloProvider } from "react-apollo"; ``` -Write a query (GET_USER) using gql and pass it as query prop for the Query component. +Finally, a graphql query (`GET_USER`) is created using `gql` and is passed as the `query` prop to the `Query` component: [src/views/Detail.js](src/views/Detail.js) ```javascript @@ -95,7 +99,7 @@ const GET_USER = gql` } `; - + {({loading, data}) => { ... }} diff --git a/graphql-example/package.json b/graphql-example/package.json index 4d4758da..3f0fb992 100644 --- a/graphql-example/package.json +++ b/graphql-example/package.json @@ -1,46 +1,46 @@ { - "name": "newapp", - "version": "1.0.0", - "description": "A general template for an Enact Moonstone application.", - "author": "Hailey HanGyeol Ryu", - "main": "src/index.js", - "scripts": { - "serve": "enact serve", - "pack": "enact pack", - "pack-p": "enact pack -p", - "watch": "enact pack --watch", - "clean": "enact clean", - "lint": "enact lint --strict .", - "license": "enact license", - "test": "enact test start --single-run", - "test-watch": "enact test start" - }, - "license": "UNLICENSED", - "private": true, - "repository": "", - "enact": { - "theme": "moonstone" - }, - "eslintConfig": { - "extends": "enact/strict" - }, - "eslintIgnore": [ - "node_modules/*", - "build/*", - "dist/*" - ], - "dependencies": { - "@enact/core": "^2.0.0-beta.7", - "@enact/i18n": "^2.0.0-beta.7", - "@enact/moonstone": "^2.0.0-beta.7", - "@enact/spotlight": "^2.0.0-beta.7", - "@enact/ui": "^2.0.0-beta.7", - "apollo-boost": "^0.1.8", - "graphql": "^0.13.2", - "graphql-tag": "^2.9.2", - "prop-types": "^15.6.0", - "react": "^16.4.0", - "react-apollo": "^2.1.5", - "react-dom": "^16.4.0" - } + "name": "", + "version": "1.0.0", + "description": "An Enact Moonstone GraphQL application.", + "author": "Hailey HanGyeol Ryu", + "main": "src/index.js", + "scripts": { + "serve": "enact serve", + "pack": "enact pack", + "pack-p": "enact pack -p", + "watch": "enact pack --watch", + "clean": "enact clean", + "lint": "enact lint --strict .", + "license": "enact license", + "test": "enact test start --single-run", + "test-watch": "enact test start" + }, + "license": "Apache-2.0", + "private": true, + "repository": "https://github.com/enactjs/samples", + "enact": { + "theme": "moonstone" + }, + "eslintConfig": { + "extends": "enact/strict" + }, + "eslintIgnore": [ + "node_modules/*", + "build/*", + "dist/*" + ], + "dependencies": { + "@enact/core": "^2.0.0-rc.1", + "@enact/i18n": "^2.0.0-rc.1", + "@enact/moonstone": "^2.0.0-rc.1", + "@enact/spotlight": "^2.0.0-rc.1", + "@enact/ui": "^2.0.0-rc.1", + "apollo-boost": "^0.1.8", + "graphql": "^0.13.2", + "graphql-tag": "^2.9.2", + "prop-types": "^15.6.0", + "react": "^16.4.0", + "react-apollo": "^2.1.5", + "react-dom": "^16.4.0" + } } diff --git a/graphql-example/src/App/App.js b/graphql-example/src/App/App.js index e8145ef1..366727dc 100644 --- a/graphql-example/src/App/App.js +++ b/graphql-example/src/App/App.js @@ -1,10 +1,9 @@ -import {ApolloProvider} from 'react-apollo'; +import {ActivityPanels} from '@enact/moonstone/Panels'; import ApolloClient from 'apollo-boost'; - +import {ApolloProvider} from 'react-apollo'; +import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; -import {ActivityPanels} from '@enact/moonstone/Panels'; -import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator'; import Detail from '../views/Detail'; import Search from '../views/Search'; @@ -34,33 +33,32 @@ class AppBase extends Component { index: 0 }; - constructor (props) { super(props); this.userId = ''; this.lists = { - repo: false, fol: false, - org: false + org: false, + repo: false }; this.state = { - userId: '', + index: this.props.index, lists: {}, - index: this.props.index + userId: '' }; } handleSelectBreadcrumb = ({index}) => { this.lists = { - repo: false, fol: false, - org: false + org: false, + repo: false }; this.setState({ index, - userId: '', - lists: this.lists + lists: this.lists, + userId: '' }); }; @@ -81,21 +79,21 @@ class AppBase extends Component { return ( - + - + ); } } -const App = MoonstoneDecorator(AppBase); +const App = MoonstoneDecorator(AppBase); export default App; export {App, AppBase}; diff --git a/graphql-example/src/components/list.js b/graphql-example/src/components/list.js index c36808c6..f6b5e803 100644 --- a/graphql-example/src/components/list.js +++ b/graphql-example/src/components/list.js @@ -1,11 +1,11 @@ -import VirtualList from '@enact/moonstone/VirtualList'; -import Item from '@enact/moonstone/Item'; -import Divider from '@enact/moonstone/Divider'; import {Cell} from '@enact/ui/Layout'; -import {scale} from '@enact/ui/resolution'; +import Divider from '@enact/moonstone/Divider'; import kind from '@enact/core/kind'; -import React from 'react'; +import Item from '@enact/moonstone/Item'; import PropTypes from 'prop-types'; +import React from 'react'; +import {scale} from '@enact/ui/resolution'; +import VirtualList from '@enact/moonstone/VirtualList'; // eslint-disable-next-line enact/display-name, enact/prop-types const renderItem = ({list}) => ({index, ...rest}) => { diff --git a/graphql-example/src/views/Detail.js b/graphql-example/src/views/Detail.js index b32d7d9c..4a04274a 100644 --- a/graphql-example/src/views/Detail.js +++ b/graphql-example/src/views/Detail.js @@ -1,12 +1,12 @@ +import {Column} from '@enact/ui/Layout'; +import gql from 'graphql-tag'; import {Header, Panel} from '@enact/moonstone/Panels'; import Image from '@enact/moonstone/Image'; -import {Column} from '@enact/ui/Layout'; import kind from '@enact/core/kind'; -import React from 'react'; +import List from '../components/list'; import PropTypes from 'prop-types'; import {Query} from 'react-apollo'; -import gql from 'graphql-tag'; -import List from '../components/list'; +import React from 'react'; const GET_USER = gql` query($login: String!) { @@ -37,8 +37,8 @@ const DetailBase = kind({ name: 'Detail', propTypes: { - lists: PropTypes.object, - userId: PropTypes.string + lists: PropTypes.object.isRequired, + userId: PropTypes.string.isRequired }, render: ({userId, lists, ...rest}) => ( diff --git a/graphql-example/src/views/Search.js b/graphql-example/src/views/Search.js index fc5443f8..b2685e60 100644 --- a/graphql-example/src/views/Search.js +++ b/graphql-example/src/views/Search.js @@ -1,11 +1,11 @@ -import {Header, Panel} from '@enact/moonstone/Panels'; -import Input from '@enact/moonstone/Input'; import FormCheckboxItem from '@enact/moonstone/FormCheckboxItem'; +import {Header, Panel} from '@enact/moonstone/Panels'; import IconButton from '@enact/moonstone/IconButton'; -import Notification from '@enact/moonstone/Notification'; +import Input from '@enact/moonstone/Input'; import kind from '@enact/core/kind'; -import React from 'react'; +import Notification from '@enact/moonstone/Notification'; import PropTypes from 'prop-types'; +import React from 'react'; const SearchBase = kind({ name: 'Detail', @@ -36,7 +36,7 @@ const SearchBase = kind({ } }, - render: ({apiToken, onInputChange, onSearch, onRepoSelection, onFolSelection, onOrgSelection, ...rest}) => { + render: ({apiToken, onFolSelection, onInputChange, onRepoSelection, onOrgSelection, onSearch, ...rest}) => { delete rest.onUserIdChange; delete rest.onListSelectionChange; return ( @@ -44,7 +44,7 @@ const SearchBase = kind({ {!apiToken &&

Please set your github token in src/config.json.

}
- search + search Repositories Followers Organizations diff --git a/graphql-example/webos-meta/appinfo.json b/graphql-example/webos-meta/appinfo.json index 561a35f8..0be50d78 100644 --- a/graphql-example/webos-meta/appinfo.json +++ b/graphql-example/webos-meta/appinfo.json @@ -1,10 +1,10 @@ { - "id": "newapp", + "id": "com.enactjs.graphql", "version": "1.0.0", "vendor": "LGE-SVL", "type": "web", "main": "index.html", - "title": "Enact App Template", + "title": "Enact GraphQL Sample", "icon": "icon.png", "miniicon": "icon-mini.png", "largeIcon": "icon-large.png", From 180145b3f12d6250fc024c59c125f508e43de9ef Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Mon, 16 Jul 2018 13:15:44 -0700 Subject: [PATCH 07/19] updated as per changes requested. --- graphql-example/src/App/App.js | 1 - graphql-example/src/components/list.js | 5 ++--- graphql-example/src/views/Detail.js | 7 +++---- graphql-example/src/views/Search.js | 17 ++++++++--------- 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/graphql-example/src/App/App.js b/graphql-example/src/App/App.js index 366727dc..71fb48b7 100644 --- a/graphql-example/src/App/App.js +++ b/graphql-example/src/App/App.js @@ -96,4 +96,3 @@ class AppBase extends Component { const App = MoonstoneDecorator(AppBase); export default App; -export {App, AppBase}; diff --git a/graphql-example/src/components/list.js b/graphql-example/src/components/list.js index f6b5e803..7e7fa1da 100644 --- a/graphql-example/src/components/list.js +++ b/graphql-example/src/components/list.js @@ -19,7 +19,7 @@ const renderItem = ({list}) => ({index, ...rest}) => { ); }; -const ListBase = kind({ +const List = kind({ name: 'Detail', propTypes: { @@ -46,5 +46,4 @@ const ListBase = kind({ } }); -export default ListBase; -export {ListBase as List, ListBase}; +export default List; diff --git a/graphql-example/src/views/Detail.js b/graphql-example/src/views/Detail.js index 4a04274a..f10b8980 100644 --- a/graphql-example/src/views/Detail.js +++ b/graphql-example/src/views/Detail.js @@ -33,7 +33,7 @@ const GET_USER = gql` } `; -const DetailBase = kind({ +const Detail = kind({ name: 'Detail', propTypes: { @@ -46,7 +46,7 @@ const DetailBase = kind({ {({loading, data}) => { if (loading) { return

Loading...

; - } else if (!data && !data.user) { + } else if (!data || !data.user) { return

User not found...

; } else { return @@ -64,5 +64,4 @@ const DetailBase = kind({ ) }); -export default DetailBase; -export {DetailBase as Detail, DetailBase}; +export default Detail; diff --git a/graphql-example/src/views/Search.js b/graphql-example/src/views/Search.js index b2685e60..871b0edd 100644 --- a/graphql-example/src/views/Search.js +++ b/graphql-example/src/views/Search.js @@ -7,7 +7,7 @@ import Notification from '@enact/moonstone/Notification'; import PropTypes from 'prop-types'; import React from 'react'; -const SearchBase = kind({ +const Search = kind({ name: 'Detail', propTypes: { @@ -25,14 +25,14 @@ const SearchBase = kind({ onInputChange: (ev, props) => { props.onUserIdChange(ev.value); }, - onRepoSelection: (value, props) => { - props.onListSelectionChange('repo', value.selected); + onRepoSelection: (ev, props) => { + props.onListSelectionChange('repo', ev.selected); }, - onFolSelection: (value, props) => { - props.onListSelectionChange('fol', value.selected); + onFolSelection: (ev, props) => { + props.onListSelectionChange('fol', ev.selected); }, - onOrgSelection: (value, props) => { - props.onListSelectionChange('org', value.selected); + onOrgSelection: (ev, props) => { + props.onListSelectionChange('org', ev.selected); } }, @@ -53,5 +53,4 @@ const SearchBase = kind({ } }); -export default SearchBase; -export {SearchBase as Search, SearchBase}; +export default Search; From b2803f13bea6bc5f5610b5bc08bf2ebd440f8d44 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 16 Jul 2018 16:39:21 -0400 Subject: [PATCH 08/19] Fix file case and remove indirection Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- graphql-example/src/components/{list.js => List.js} | 10 +++------- graphql-example/src/views/Detail.js | 2 +- 2 files changed, 4 insertions(+), 8 deletions(-) rename graphql-example/src/components/{list.js => List.js} (85%) diff --git a/graphql-example/src/components/list.js b/graphql-example/src/components/List.js similarity index 85% rename from graphql-example/src/components/list.js rename to graphql-example/src/components/List.js index 7e7fa1da..32af3911 100644 --- a/graphql-example/src/components/list.js +++ b/graphql-example/src/components/List.js @@ -23,15 +23,11 @@ const List = kind({ name: 'Detail', propTypes: { - list: PropTypes.arrayOf(PropTypes.object), + list: PropTypes.arrayOf(PropTypes.object).isRequired, userId: PropTypes.string }, - computed: { - itemRenderer: renderItem - }, - - render: ({itemRenderer, list}) => { + render: ({list}) => { return [ Repositories, ]; diff --git a/graphql-example/src/views/Detail.js b/graphql-example/src/views/Detail.js index f10b8980..fe16655d 100644 --- a/graphql-example/src/views/Detail.js +++ b/graphql-example/src/views/Detail.js @@ -3,7 +3,7 @@ import gql from 'graphql-tag'; import {Header, Panel} from '@enact/moonstone/Panels'; import Image from '@enact/moonstone/Image'; import kind from '@enact/core/kind'; -import List from '../components/list'; +import List from '../components/List'; import PropTypes from 'prop-types'; import {Query} from 'react-apollo'; import React from 'react'; From 280516cf28588248325cf4706f8d575e4881a926 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 16 Jul 2018 17:15:08 -0400 Subject: [PATCH 09/19] Add to enact-all-samples Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- enact-all-samples/package.json | 7 +++++++ enact-all-samples/src/index.js | 2 ++ {graphql-example => pattern-graphql}/.gitignore | 0 {graphql-example => pattern-graphql}/README.md | 0 {graphql-example => pattern-graphql}/package.json | 0 .../resources/ilibmanifest.json | 0 {graphql-example => pattern-graphql}/src/App/App.js | 0 .../src/App/package.json | 0 .../src/components/List.js | 0 .../src/config.json | 0 {graphql-example => pattern-graphql}/src/index.js | 0 .../src/views/Detail.js | 0 .../src/views/Search.js | 0 .../webos-meta/appinfo.json | 0 .../webos-meta/icon-large.png | Bin .../webos-meta/icon-mini.png | Bin .../webos-meta/icon.png | Bin 17 files changed, 9 insertions(+) rename {graphql-example => pattern-graphql}/.gitignore (100%) rename {graphql-example => pattern-graphql}/README.md (100%) rename {graphql-example => pattern-graphql}/package.json (100%) rename {graphql-example => pattern-graphql}/resources/ilibmanifest.json (100%) rename {graphql-example => pattern-graphql}/src/App/App.js (100%) rename {graphql-example => pattern-graphql}/src/App/package.json (100%) rename {graphql-example => pattern-graphql}/src/components/List.js (100%) rename {graphql-example => pattern-graphql}/src/config.json (100%) rename {graphql-example => pattern-graphql}/src/index.js (100%) rename {graphql-example => pattern-graphql}/src/views/Detail.js (100%) rename {graphql-example => pattern-graphql}/src/views/Search.js (100%) rename {graphql-example => pattern-graphql}/webos-meta/appinfo.json (100%) rename {graphql-example => pattern-graphql}/webos-meta/icon-large.png (100%) rename {graphql-example => pattern-graphql}/webos-meta/icon-mini.png (100%) rename {graphql-example => pattern-graphql}/webos-meta/icon.png (100%) diff --git a/enact-all-samples/package.json b/enact-all-samples/package.json index f0ea8015..9c2e2280 100644 --- a/enact-all-samples/package.json +++ b/enact-all-samples/package.json @@ -36,9 +36,16 @@ "@enact/spotlight": "next", "@enact/ui": "next", "@enact/webos": "next", + "apollo-boost": "^0.1.8", + "graphql": "^0.13.2", + "graphql-tag": "^2.9.2", "prop-types": "^15.6.0", "react": "^16.3.2", "react-dom": "^16.3.2", + "prop-types": "^15.5.8", + "react": "^15.5.4", + "react-apollo": "^2.1.5", + "react-dom": "^15.5.4", "react-redux": "^5.0.3", "react-router-dom": "^4.1.1", "redux": "^3.6.0", diff --git a/enact-all-samples/src/index.js b/enact-all-samples/src/index.js index 3ebe8879..d5001b3d 100644 --- a/enact-all-samples/src/index.js +++ b/enact-all-samples/src/index.js @@ -7,6 +7,7 @@ import PatternActivityPanelsDeepLinking from '../../pattern-activity-panels-deep import PatternActivityPanelsRedux from '../../pattern-activity-panels-redux/src/main'; import PatternDynamicPanel from '../../pattern-dynamic-panel/src/App'; import PatternExpandableList from '../../pattern-expandablelist-object/src/App'; +import PatternGraphQL from '../../pattern-graphql/src/App'; import PatternListDetails from '../../pattern-list-details/src/App'; import PatternListDetailsRedux from '../../pattern-list-details-redux/src/main'; import PatternLocaleSwitching from '../../pattern-locale-switching/src/main'; @@ -28,6 +29,7 @@ export const routes = [ {path: '/PatternActivityPanelsRedux', component: PatternActivityPanelsRedux}, {path: '/PatternDynamicPanel', component: PatternDynamicPanel}, {path: '/PatternExpandableList', component: PatternExpandableList}, + {path: '/PatternGraphQL', component: PatternGraphQL}, {path: '/PatternListDetails', component: PatternListDetails}, {path: '/PatternListDetailsRedux', component: PatternListDetailsRedux}, {path: '/PatternLocaleSwitching', component: PatternLocaleSwitching}, diff --git a/graphql-example/.gitignore b/pattern-graphql/.gitignore similarity index 100% rename from graphql-example/.gitignore rename to pattern-graphql/.gitignore diff --git a/graphql-example/README.md b/pattern-graphql/README.md similarity index 100% rename from graphql-example/README.md rename to pattern-graphql/README.md diff --git a/graphql-example/package.json b/pattern-graphql/package.json similarity index 100% rename from graphql-example/package.json rename to pattern-graphql/package.json diff --git a/graphql-example/resources/ilibmanifest.json b/pattern-graphql/resources/ilibmanifest.json similarity index 100% rename from graphql-example/resources/ilibmanifest.json rename to pattern-graphql/resources/ilibmanifest.json diff --git a/graphql-example/src/App/App.js b/pattern-graphql/src/App/App.js similarity index 100% rename from graphql-example/src/App/App.js rename to pattern-graphql/src/App/App.js diff --git a/graphql-example/src/App/package.json b/pattern-graphql/src/App/package.json similarity index 100% rename from graphql-example/src/App/package.json rename to pattern-graphql/src/App/package.json diff --git a/graphql-example/src/components/List.js b/pattern-graphql/src/components/List.js similarity index 100% rename from graphql-example/src/components/List.js rename to pattern-graphql/src/components/List.js diff --git a/graphql-example/src/config.json b/pattern-graphql/src/config.json similarity index 100% rename from graphql-example/src/config.json rename to pattern-graphql/src/config.json diff --git a/graphql-example/src/index.js b/pattern-graphql/src/index.js similarity index 100% rename from graphql-example/src/index.js rename to pattern-graphql/src/index.js diff --git a/graphql-example/src/views/Detail.js b/pattern-graphql/src/views/Detail.js similarity index 100% rename from graphql-example/src/views/Detail.js rename to pattern-graphql/src/views/Detail.js diff --git a/graphql-example/src/views/Search.js b/pattern-graphql/src/views/Search.js similarity index 100% rename from graphql-example/src/views/Search.js rename to pattern-graphql/src/views/Search.js diff --git a/graphql-example/webos-meta/appinfo.json b/pattern-graphql/webos-meta/appinfo.json similarity index 100% rename from graphql-example/webos-meta/appinfo.json rename to pattern-graphql/webos-meta/appinfo.json diff --git a/graphql-example/webos-meta/icon-large.png b/pattern-graphql/webos-meta/icon-large.png similarity index 100% rename from graphql-example/webos-meta/icon-large.png rename to pattern-graphql/webos-meta/icon-large.png diff --git a/graphql-example/webos-meta/icon-mini.png b/pattern-graphql/webos-meta/icon-mini.png similarity index 100% rename from graphql-example/webos-meta/icon-mini.png rename to pattern-graphql/webos-meta/icon-mini.png diff --git a/graphql-example/webos-meta/icon.png b/pattern-graphql/webos-meta/icon.png similarity index 100% rename from graphql-example/webos-meta/icon.png rename to pattern-graphql/webos-meta/icon.png From e2f670de9dbc8497d015f1f14b5c2c8d2a014928 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 16 Jul 2018 17:28:06 -0400 Subject: [PATCH 10/19] Update Enact version to next Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- pattern-graphql/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pattern-graphql/package.json b/pattern-graphql/package.json index 3f0fb992..5bd0ca0a 100644 --- a/pattern-graphql/package.json +++ b/pattern-graphql/package.json @@ -30,11 +30,11 @@ "dist/*" ], "dependencies": { - "@enact/core": "^2.0.0-rc.1", - "@enact/i18n": "^2.0.0-rc.1", - "@enact/moonstone": "^2.0.0-rc.1", - "@enact/spotlight": "^2.0.0-rc.1", - "@enact/ui": "^2.0.0-rc.1", + "@enact/core": "next", + "@enact/i18n": "next", + "@enact/moonstone": "next", + "@enact/spotlight": "next", + "@enact/ui": "next", "apollo-boost": "^0.1.8", "graphql": "^0.13.2", "graphql-tag": "^2.9.2", From c1abd18ab401ea699fe228f753e3d7cc920150aa Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 16 Jul 2018 18:04:15 -0400 Subject: [PATCH 11/19] Fix sample Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- pattern-graphql/README.md | 20 ++++++++--------- pattern-graphql/package.json | 2 +- pattern-graphql/src/components/List.js | 30 +++++++++++--------------- pattern-graphql/src/config.json | 2 +- 4 files changed, 25 insertions(+), 29 deletions(-) diff --git a/pattern-graphql/README.md b/pattern-graphql/README.md index b09eccd3..b161b9ab 100644 --- a/pattern-graphql/README.md +++ b/pattern-graphql/README.md @@ -1,4 +1,4 @@ -## Use Apollo with Enact and Github GraphqQL API +## Use Apollo with Enact and GitHub GraphqQL API A sample application that demonstrates how to use GraphqQL with Enact components. It uses [Apollo Client](https://github.com/apollographql/apollo-client), (GraphqQL client.) @@ -19,27 +19,27 @@ Run `npm install` then `npm run serve` to have the app running on [http://localh - `ui/resolution/scale` ## Setup and use -1. Get a personal access token for the GitHub API from https://github.com/settings/tokens/new. - - Select repo for scopes. -2. Replace the dummy token in [src/config.json](src/config.json) with your token. -3. Install node_modules +1. Get a personal access token for the [GitHub API](https://github.com/settings/tokens/new). + - Assign a name to the token and select the "read:org" scope. +2. Replace the dummy token in [src/config.json](src/config.json) with the token generated above. +3. Install npm modules. ```bash npm install ``` -4. Serve +4. Serve. ```bash npm run serve ``` -5. Open http://localhost:8080/. -6. Search for a github id, selecting which information you wish to retrieve. +5. Open [localhost](http://localhost:8080/). +6. Search for a GitHub id, selecting which information you wish to retrieve. ### How Apollo is used. -In **App.js**, a new ApolloClient is created with github uri and request setup: +In **App.js**, a new `ApolloClient` is created with GitHub URI and request setup: [src/App/App.js] ```javascript @@ -67,7 +67,7 @@ import { ApolloProvider } from "react-apollo"; ``` -Finally, a graphql query (`GET_USER`) is created using `gql` and is passed as the `query` prop to the `Query` component: +Finally, a GraphQL query (`GET_USER`) is created using `gql` and is passed as the `query` prop to the `Query` component: [src/views/Detail.js](src/views/Detail.js) ```javascript diff --git a/pattern-graphql/package.json b/pattern-graphql/package.json index 5bd0ca0a..5c125e5e 100644 --- a/pattern-graphql/package.json +++ b/pattern-graphql/package.json @@ -1,5 +1,5 @@ { - "name": "", + "name": "pattern-graphql", "version": "1.0.0", "description": "An Enact Moonstone GraphQL application.", "author": "Hailey HanGyeol Ryu", diff --git a/pattern-graphql/src/components/List.js b/pattern-graphql/src/components/List.js index 32af3911..984ef9f6 100644 --- a/pattern-graphql/src/components/List.js +++ b/pattern-graphql/src/components/List.js @@ -1,33 +1,29 @@ import {Cell} from '@enact/ui/Layout'; import Divider from '@enact/moonstone/Divider'; -import kind from '@enact/core/kind'; import Item from '@enact/moonstone/Item'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, {Component} from 'react'; import {scale} from '@enact/ui/resolution'; import VirtualList from '@enact/moonstone/VirtualList'; -// eslint-disable-next-line enact/display-name, enact/prop-types -const renderItem = ({list}) => ({index, ...rest}) => { - return ( +class List extends Component { + static propTypes = { + list: PropTypes.arrayOf(PropTypes.object).isRequired, + userId: PropTypes.string + } + + renderItem = ({index, ...rest}) => ( - {list[index].name} + {this.props.list[index].name} ); -}; -const List = kind({ - name: 'Detail', - - propTypes: { - list: PropTypes.arrayOf(PropTypes.object).isRequired, - userId: PropTypes.string - }, + render = () => { + const list = this.props.list; - render: ({list}) => { return [ Repositories, ]; } -}); +} export default List; diff --git a/pattern-graphql/src/config.json b/pattern-graphql/src/config.json index d81c8a42..3aded565 100644 --- a/pattern-graphql/src/config.json +++ b/pattern-graphql/src/config.json @@ -1,3 +1,3 @@ { - "token":"" + "token":"19813c93ca87e38f38cb0c05e6df04ccdb3de577" } From 5c622ec92efe5c1ea6dd54c5852b0859fd1ac7ff Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 16 Jul 2018 18:11:10 -0400 Subject: [PATCH 12/19] Move prop to own line Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- pattern-graphql/src/components/List.js | 3 ++- pattern-graphql/src/config.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/pattern-graphql/src/components/List.js b/pattern-graphql/src/components/List.js index 984ef9f6..2e0f45a9 100644 --- a/pattern-graphql/src/components/List.js +++ b/pattern-graphql/src/components/List.js @@ -27,12 +27,13 @@ class List extends Component { return [ Repositories, ]; } diff --git a/pattern-graphql/src/config.json b/pattern-graphql/src/config.json index 3aded565..d81c8a42 100644 --- a/pattern-graphql/src/config.json +++ b/pattern-graphql/src/config.json @@ -1,3 +1,3 @@ { - "token":"19813c93ca87e38f38cb0c05e6df04ccdb3de577" + "token":"" } From c8c2882d34497551f6918577ff75f8721f27b661 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 16 Jul 2018 19:22:35 -0400 Subject: [PATCH 13/19] Fix bad merge in package.json Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- enact-all-samples/package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/enact-all-samples/package.json b/enact-all-samples/package.json index 9c2e2280..c4e43024 100644 --- a/enact-all-samples/package.json +++ b/enact-all-samples/package.json @@ -41,11 +41,8 @@ "graphql-tag": "^2.9.2", "prop-types": "^15.6.0", "react": "^16.3.2", - "react-dom": "^16.3.2", - "prop-types": "^15.5.8", - "react": "^15.5.4", "react-apollo": "^2.1.5", - "react-dom": "^15.5.4", + "react-dom": "^16.3.2", "react-redux": "^5.0.3", "react-router-dom": "^4.1.1", "redux": "^3.6.0", From c7044ef1322f6b6d25c59a250d8a11ad29609963 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Tue, 17 Jul 2018 11:25:01 -0700 Subject: [PATCH 14/19] Set repo selected by default. --- pattern-graphql/src/App/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pattern-graphql/src/App/App.js b/pattern-graphql/src/App/App.js index 71fb48b7..eed3e5ba 100644 --- a/pattern-graphql/src/App/App.js +++ b/pattern-graphql/src/App/App.js @@ -39,7 +39,7 @@ class AppBase extends Component { this.lists = { fol: false, org: false, - repo: false + repo: true }; this.state = { @@ -53,7 +53,7 @@ class AppBase extends Component { this.lists = { fol: false, org: false, - repo: false + repo: true }; this.setState({ index, From c512ed8ddba841f8e94c046cb1e1418c89acc369 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Tue, 17 Jul 2018 11:25:11 -0700 Subject: [PATCH 15/19] Allow enter to search. --- pattern-graphql/src/views/Search.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/pattern-graphql/src/views/Search.js b/pattern-graphql/src/views/Search.js index 871b0edd..3fce7215 100644 --- a/pattern-graphql/src/views/Search.js +++ b/pattern-graphql/src/views/Search.js @@ -33,19 +33,24 @@ const Search = kind({ }, onOrgSelection: (ev, props) => { props.onListSelectionChange('org', ev.selected); + }, + onKeyUp: (ev, props) => { + if (ev.keyCode === 13) { + props.onSearch(); + } } }, - render: ({apiToken, onFolSelection, onInputChange, onRepoSelection, onOrgSelection, onSearch, ...rest}) => { + render: ({apiToken, onFolSelection, onInputChange, onRepoSelection, onOrgSelection, onSearch, onKeyUp, ...rest}) => { delete rest.onUserIdChange; delete rest.onListSelectionChange; return ( {!apiToken &&

Please set your github token in src/config.json.

}
- + search - Repositories + Repositories Followers Organizations From ce4c74db797306595949e27ff3ac5484c15fce68 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Tue, 17 Jul 2018 11:25:41 -0700 Subject: [PATCH 16/19] Show right title of lists . --- pattern-graphql/src/components/List.js | 5 +++-- pattern-graphql/src/views/Detail.js | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/pattern-graphql/src/components/List.js b/pattern-graphql/src/components/List.js index 2e0f45a9..8bf5a471 100644 --- a/pattern-graphql/src/components/List.js +++ b/pattern-graphql/src/components/List.js @@ -9,6 +9,7 @@ import VirtualList from '@enact/moonstone/VirtualList'; class List extends Component { static propTypes = { list: PropTypes.arrayOf(PropTypes.object).isRequired, + title: PropTypes.string, userId: PropTypes.string } @@ -22,10 +23,10 @@ class List extends Component { ); render = () => { - const list = this.props.list; + const {list, title} = this.props; return [ - Repositories, + {title},
- {lists.repo && } - {lists.org && } - {lists.fol && } + {lists.repo && } + {lists.org && } + {lists.fol && } ; } From 9eb2d7c68b50ebda47ea11eec983c7b1c186a3a1 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Tue, 17 Jul 2018 11:49:36 -0700 Subject: [PATCH 17/19] Removed list dup. --- pattern-graphql/src/App/App.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/pattern-graphql/src/App/App.js b/pattern-graphql/src/App/App.js index eed3e5ba..6a1d4b49 100644 --- a/pattern-graphql/src/App/App.js +++ b/pattern-graphql/src/App/App.js @@ -44,7 +44,6 @@ class AppBase extends Component { this.state = { index: this.props.index, - lists: {}, userId: '' }; } @@ -57,7 +56,6 @@ class AppBase extends Component { }; this.setState({ index, - lists: this.lists, userId: '' }); }; @@ -71,11 +69,11 @@ class AppBase extends Component { }; onSearch = () => { - this.setState({index: 1, userId: this.userId, lists: this.lists}); + this.setState({index: 1, userId: this.userId}); }; render () { - const {index, userId, lists} = this.state; + const {index, userId} = this.state; return ( @@ -86,7 +84,7 @@ class AppBase extends Component { onSearch={this.onSearch} onUserIdChange={this.onUserIdChange} /> - + ); From f69220a0ba83952d90585e443f7a0e89695f7433 Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Tue, 17 Jul 2018 14:20:14 -0700 Subject: [PATCH 18/19] modified --- pattern-graphql/src/App/App.js | 47 +++++----------- pattern-graphql/src/views/Detail.js | 14 +++-- pattern-graphql/src/views/Search.js | 87 +++++++++++++++++------------ 3 files changed, 73 insertions(+), 75 deletions(-) diff --git a/pattern-graphql/src/App/App.js b/pattern-graphql/src/App/App.js index 6a1d4b49..dff1c1cb 100644 --- a/pattern-graphql/src/App/App.js +++ b/pattern-graphql/src/App/App.js @@ -24,9 +24,7 @@ const client = new ApolloClient({ class AppBase extends Component { static propTypes = { index: PropTypes.number, - onListSelectionChange: PropTypes.func, - onSearch: PropTypes.func, - onUserIdChange: PropTypes.func + onSearch: PropTypes.func }; static defaultProps = { @@ -35,56 +33,41 @@ class AppBase extends Component { constructor (props) { super(props); - this.userId = ''; - this.lists = { - fol: false, - org: false, - repo: true - }; this.state = { index: this.props.index, + fol: false, + org: false, + repo: true, userId: '' }; } handleSelectBreadcrumb = ({index}) => { - this.lists = { - fol: false, - org: false, - repo: true - }; - this.setState({ - index, - userId: '' - }); - }; - - onUserIdChange = (userId) => { - this.userId = userId; + this.setState({index}); }; - onListSelectionChange = (target, value) => { - this.lists[target] = value; - }; - - onSearch = () => { - this.setState({index: 1, userId: this.userId}); + onSearch = (formItems) => { + this.setState({ + index: 1, + userId: formItems.userId, + repo: formItems.repo, + fol: formItems.fol, + org: formItems.org + }); }; render () { - const {index, userId} = this.state; + const {index, userId, repo, org, fol} = this.state; return ( - + ); diff --git a/pattern-graphql/src/views/Detail.js b/pattern-graphql/src/views/Detail.js index 975f6734..a18fc69b 100644 --- a/pattern-graphql/src/views/Detail.js +++ b/pattern-graphql/src/views/Detail.js @@ -37,11 +37,13 @@ const Detail = kind({ name: 'Detail', propTypes: { - lists: PropTypes.object.isRequired, - userId: PropTypes.string.isRequired + userId: PropTypes.string.isRequired, + fol: PropTypes.bool, + org: PropTypes.bool, + repo: PropTypes.bool }, - render: ({userId, lists, ...rest}) => ( + render: ({userId, repo, org, fol, ...rest}) => ( {({loading, data}) => { if (loading) { @@ -54,9 +56,9 @@ const Detail = kind({
- {lists.repo && } - {lists.org && } - {lists.fol && } + {repo && } + {org && } + {fol && } ; } diff --git a/pattern-graphql/src/views/Search.js b/pattern-graphql/src/views/Search.js index 3fce7215..8d92368e 100644 --- a/pattern-graphql/src/views/Search.js +++ b/pattern-graphql/src/views/Search.js @@ -2,60 +2,73 @@ import FormCheckboxItem from '@enact/moonstone/FormCheckboxItem'; import {Header, Panel} from '@enact/moonstone/Panels'; import IconButton from '@enact/moonstone/IconButton'; import Input from '@enact/moonstone/Input'; -import kind from '@enact/core/kind'; import Notification from '@enact/moonstone/Notification'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, {Component} from 'react'; -const Search = kind({ - name: 'Detail', - - propTypes: { +class Search extends Component { + static propTypes = { apiToken: PropTypes.string, - onListSelectionChange: PropTypes.func, onSearch: PropTypes.func, onUserIdChange: PropTypes.func, userId: PropTypes.string - }, - - handlers: { - onSearch: (ev, props) => { - props.onSearch(); - }, - onInputChange: (ev, props) => { - props.onUserIdChange(ev.value); - }, - onRepoSelection: (ev, props) => { - props.onListSelectionChange('repo', ev.selected); - }, - onFolSelection: (ev, props) => { - props.onListSelectionChange('fol', ev.selected); - }, - onOrgSelection: (ev, props) => { - props.onListSelectionChange('org', ev.selected); - }, - onKeyUp: (ev, props) => { - if (ev.keyCode === 13) { - props.onSearch(); - } + }; + + constructor (props) { + super(props); + this.userId = React.createRef(); + this.state = { + fol: false, + org: false, + repo: true, + userId: '' + }; + } + + onUserIdChange = (ev) => { + this.setState({userId: ev.value}); + }; + + onSearch = () => { + this.props.onSearch(this.state); + } + + onRepoToggle = () => { + this.setState(prevState => ({repo: !prevState.repo})); + } + + onFolToggle = () => { + this.setState(prevState => ({fol: !prevState.fol})); + } + + onOrgToggle = () => { + this.setState(prevState => ({org: !prevState.org})); + } + + onKeyUp = (ev) => { + if (ev.keyCode === 13) { + this.props.onSearch(this.state); } - }, + } - render: ({apiToken, onFolSelection, onInputChange, onRepoSelection, onOrgSelection, onSearch, onKeyUp, ...rest}) => { + render = () => { + const {apiToken, ...rest} = this.props; + const {repo, org, fol} = this.state; + delete rest.onSearch; delete rest.onUserIdChange; delete rest.onListSelectionChange; return ( {!apiToken &&

Please set your github token in src/config.json.

}
- - search - Repositories - Followers - Organizations + + search + Repositories + Organizations + Followers ); } -}); +} export default Search; From 67796b1952f5aaf43d7b7b5f5703d85d4725193a Mon Sep 17 00:00:00 2001 From: Hailey Ryu Date: Thu, 9 Aug 2018 13:42:29 -0700 Subject: [PATCH 19/19] improvements :D --- pattern-graphql/README.md | 2 +- pattern-graphql/src/App/App.js | 13 ++++---- pattern-graphql/src/components/List.js | 2 +- pattern-graphql/src/views/Detail.js | 44 ++++++++++++-------------- pattern-graphql/src/views/Search.js | 22 ++++++------- 5 files changed, 41 insertions(+), 42 deletions(-) diff --git a/pattern-graphql/README.md b/pattern-graphql/README.md index b161b9ab..1e7e3bb3 100644 --- a/pattern-graphql/README.md +++ b/pattern-graphql/README.md @@ -20,7 +20,7 @@ Run `npm install` then `npm run serve` to have the app running on [http://localh ## Setup and use 1. Get a personal access token for the [GitHub API](https://github.com/settings/tokens/new). - - Assign a name to the token and select the "read:org" scope. + - Assign a name to the token and select the "read:org" under "admin:org" scope. 2. Replace the dummy token in [src/config.json](src/config.json) with the token generated above. 3. Install npm modules. diff --git a/pattern-graphql/src/App/App.js b/pattern-graphql/src/App/App.js index dff1c1cb..11747b23 100644 --- a/pattern-graphql/src/App/App.js +++ b/pattern-graphql/src/App/App.js @@ -2,6 +2,7 @@ import {ActivityPanels} from '@enact/moonstone/Panels'; import ApolloClient from 'apollo-boost'; import {ApolloProvider} from 'react-apollo'; import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator'; +import Notification from '@enact/moonstone/Notification'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; @@ -47,13 +48,13 @@ class AppBase extends Component { this.setState({index}); }; - onSearch = (formItems) => { + onSearch = ({userId, repo, fol, org}) => { this.setState({ index: 1, - userId: formItems.userId, - repo: formItems.repo, - fol: formItems.fol, - org: formItems.org + userId, + repo, + fol, + org }); }; @@ -62,9 +63,9 @@ class AppBase extends Component { return ( + {!config.token &&

Please set your github token in src/config.json.

} diff --git a/pattern-graphql/src/components/List.js b/pattern-graphql/src/components/List.js index 8bf5a471..7919943c 100644 --- a/pattern-graphql/src/components/List.js +++ b/pattern-graphql/src/components/List.js @@ -22,7 +22,7 @@ class List extends Component { ); - render = () => { + render () { const {list, title} = this.props; return [ diff --git a/pattern-graphql/src/views/Detail.js b/pattern-graphql/src/views/Detail.js index a18fc69b..08825100 100644 --- a/pattern-graphql/src/views/Detail.js +++ b/pattern-graphql/src/views/Detail.js @@ -2,6 +2,7 @@ import {Column} from '@enact/ui/Layout'; import gql from 'graphql-tag'; import {Header, Panel} from '@enact/moonstone/Panels'; import Image from '@enact/moonstone/Image'; +import Spinner from '@enact/moonstone/Spinner'; import kind from '@enact/core/kind'; import List from '../components/List'; import PropTypes from 'prop-types'; @@ -9,22 +10,22 @@ import {Query} from 'react-apollo'; import React from 'react'; const GET_USER = gql` - query($login: String!) { - user(login: $login) { + query ($login: String!) { + user (login: $login) { name + login avatarUrl - organizations(first: 10) { + organizations (first: 100) { nodes { name } } - repositories(first: 10) { + repositories (first: 100) { nodes { name - url } } - followers(first: 10) { + followers (first: 100) { nodes { name } @@ -45,23 +46,20 @@ const Detail = kind({ render: ({userId, repo, org, fol, ...rest}) => ( - {({loading, data}) => { - if (loading) { - return

Loading...

; - } else if (!data || !data.user) { - return

User not found...

; - } else { - return -
- -
- - {repo && } - {org && } - {fol && } - - ; - } + {({loading, error, data}) => { + if (loading) return Loading...; + if (error) return

{error.message}

; + + return +
+ +
+ + {repo && } + {org && } + {fol && } + + ; }} ) diff --git a/pattern-graphql/src/views/Search.js b/pattern-graphql/src/views/Search.js index 8d92368e..bb972d34 100644 --- a/pattern-graphql/src/views/Search.js +++ b/pattern-graphql/src/views/Search.js @@ -2,21 +2,19 @@ import FormCheckboxItem from '@enact/moonstone/FormCheckboxItem'; import {Header, Panel} from '@enact/moonstone/Panels'; import IconButton from '@enact/moonstone/IconButton'; import Input from '@enact/moonstone/Input'; -import Notification from '@enact/moonstone/Notification'; import PropTypes from 'prop-types'; import React, {Component} from 'react'; class Search extends Component { static propTypes = { apiToken: PropTypes.string, + handleIdChange: PropTypes.func, onSearch: PropTypes.func, - onUserIdChange: PropTypes.func, userId: PropTypes.string }; constructor (props) { super(props); - this.userId = React.createRef(); this.state = { fol: false, org: false, @@ -25,7 +23,7 @@ class Search extends Component { }; } - onUserIdChange = (ev) => { + handleIdChange = (ev) => { this.setState({userId: ev.value}); }; @@ -51,17 +49,19 @@ class Search extends Component { } } - render = () => { - const {apiToken, ...rest} = this.props; + render () { + const {...rest} = this.props; const {repo, org, fol} = this.state; delete rest.onSearch; - delete rest.onUserIdChange; - delete rest.onListSelectionChange; + delete rest.handleIdChange; + return ( - {!apiToken &&

Please set your github token in src/config.json.

} -
- +
+ search Repositories Organizations