├── .gitignore
├── .travis.yml
├── process
    ├── mockup.jpg
    └── devlog.md
├── .babelrc
├── screenshots
    ├── avatars.png
    ├── first-ui.png
    ├── GitHunt-add.png
    ├── GitHunt-app.png
    ├── GitHunt-new.png
    ├── error-stack.png
    ├── github-api.png
    ├── default-mock.png
    ├── useful-error.png
    ├── GitHunt-GraphQL.png
    ├── first-mutation.png
    ├── github-oath-setup.png
    └── github-oauth-keys.png
├── .eslintrc
├── ui
    ├── subscriptions.js
    ├── routes.js
    ├── style.css
    ├── Html.js
    ├── RepoInfo.js
    ├── client.js
    ├── NewEntry.js
    ├── server.js
    ├── Layout.js
    ├── Feed.js
    └── CommentsPage.js
├── webpack.config.js
├── webpack.production.config.js
├── LICENSE
├── README.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dev.sqlite3
4 | .env
5 | .idea/
6 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "6"
4 |   - "5"
5 |   - "4"
6 | 


--------------------------------------------------------------------------------
/process/mockup.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/process/mockup.jpg


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "stage-2",
5 |     "react"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/screenshots/avatars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/avatars.png


--------------------------------------------------------------------------------
/screenshots/first-ui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/first-ui.png


--------------------------------------------------------------------------------
/screenshots/GitHunt-add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/GitHunt-add.png


--------------------------------------------------------------------------------
/screenshots/GitHunt-app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/GitHunt-app.png


--------------------------------------------------------------------------------
/screenshots/GitHunt-new.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/GitHunt-new.png


--------------------------------------------------------------------------------
/screenshots/error-stack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/error-stack.png


--------------------------------------------------------------------------------
/screenshots/github-api.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/github-api.png


--------------------------------------------------------------------------------
/screenshots/default-mock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/default-mock.png


--------------------------------------------------------------------------------
/screenshots/useful-error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/useful-error.png


--------------------------------------------------------------------------------
/screenshots/GitHunt-GraphQL.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/GitHunt-GraphQL.png


--------------------------------------------------------------------------------
/screenshots/first-mutation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/first-mutation.png


--------------------------------------------------------------------------------
/screenshots/github-oath-setup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/github-oath-setup.png


--------------------------------------------------------------------------------
/screenshots/github-oauth-keys.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/drFabio/GitHunt-React/master/screenshots/github-oauth-keys.png


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "node": true,
 4 |     "mocha": true,
 5 |   },
 6 |   "extends": "airbnb",
 7 |   "parser": "babel-eslint",
 8 |   "globals": {
 9 |     "ga": true
10 |   },
11 |   "rules": {
12 |     "camelcase": 0
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/ui/subscriptions.js:
--------------------------------------------------------------------------------
 1 | import { print } from 'graphql-tag/printer';
 2 | 
 3 | // quick way to add the subscribe and unsubscribe functions to the network interface
 4 | export default function addGraphQLSubscriptions(networkInterface, wsClient) {
 5 |   return Object.assign(networkInterface, {
 6 |     subscribe(request, handler) {
 7 |       return wsClient.subscribe({
 8 |         query: print(request.query),
 9 |         variables: request.variables,
10 |       }, handler);
11 |     },
12 |     unsubscribe(id: number) {
13 |       wsClient.unsubscribe(id);
14 |     },
15 |   });
16 | }
17 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   entry: './ui/client.js',
 3 |   output: {
 4 |     filename: "bundle.js",
 5 |     publicPath: '/'
 6 |   },
 7 |   module: {
 8 |     loaders: [{
 9 |       test: /\.css/,
10 |       loader: 'style!css'
11 |     }, {
12 |       test: /\.js$/,
13 |       loader: 'babel',
14 |       // Exclude apollo client from the webpack config in case
15 |       // we want to use npm link.
16 |       exclude: /(node_modules)|(apollo-client)/
17 |     }, {
18 |       test: /\.json$/,
19 |       loader: 'json'
20 |     }]
21 |   },
22 |   devServer: {
23 |   },
24 | }
25 | 


--------------------------------------------------------------------------------
/ui/routes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Route, IndexRoute } from 'react-router';
 3 | 
 4 | import Feed from './Feed';
 5 | import Layout from './Layout';
 6 | import NewEntry from './NewEntry';
 7 | import CommentsPage from './CommentsPage';
 8 | 
 9 | export default (
10 |   <Route
11 |     path="/"
12 |     component={Layout}
13 |   >
14 |     <IndexRoute
15 |       component={Feed}
16 |     />
17 |     <Route
18 |       path="feed/:type"
19 |       component={Feed}
20 |     />
21 |     <Route
22 |       path="submit"
23 |       component={NewEntry}
24 |     />
25 |     <Route
26 |       path="/:org/:repoName"
27 |       component={CommentsPage}
28 |     />
29 |   </Route>
30 | );
31 | 


--------------------------------------------------------------------------------
/webpack.production.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 2 | const webpack = require('webpack');
 3 | 
 4 | module.exports = {
 5 |   devtool: 'cheap-module-source-map',
 6 |   entry: './ui/client.js',
 7 |   output: {
 8 |     path: 'api/dist/',
 9 |     publicPath: '/',
10 |     filename: 'bundle.js'
11 |   },
12 |   module: {
13 |     loaders: [{
14 |       test: /\.css/,
15 |       loader: 'style!css'
16 |     }, {
17 |       test: /\.js$/,
18 |       loader: 'babel',
19 |       exclude: /node_modules/
20 |     }, {
21 |       test: /\.json$/,
22 |       loader: 'json'
23 |     }]
24 |   },
25 |   plugins: [
26 |     new webpack.DefinePlugin({
27 |     'process.env': {
28 |       'NODE_ENV': JSON.stringify('production')
29 |     }
30 |     }),
31 |     new HtmlWebpackPlugin({
32 |       template: 'ui/index.html'
33 |     }),
34 |     new webpack.optimize.CommonsChunkPlugin('common.js'),
35 |     new webpack.optimize.DedupePlugin(),
36 |     new webpack.optimize.UglifyJsPlugin(),
37 |     new webpack.optimize.AggressiveMergingPlugin()
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Meteor Development Group
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/ui/style.css:
--------------------------------------------------------------------------------
 1 | .media-vote {
 2 |   display: table-cell;
 3 |   vertical-align: top;
 4 |   padding-right: 10px;
 5 | }
 6 | .media-vote .btn-score {
 7 |   border: none;
 8 |   background-color: transparent;
 9 |   font-size: 1.3em;
10 |   padding: 3px 12px;
11 |   line-height: 0;
12 |   color: rgba(91, 192, 222, 0.52);
13 | }
14 | .media-vote .btn-score:hover, .media-vote .btn-score.active {
15 |   color: #5bc0de;
16 |   box-shadow: none;
17 | }
18 | .media-vote .btn-score:active {
19 |   color: #5BA2DE;
20 |   box-shadow: none;
21 | }
22 | .media-vote .btn-score:focus {
23 |   outline: none;
24 | }
25 | .media-vote .vote-score {
26 |   text-align: center;
27 |   font-size: 1.2em;
28 | }
29 | 
30 | .invisible {
31 |   visibility: hidden;
32 | }
33 | 
34 | body {
35 |   padding-bottom: 60px;
36 | }
37 | 
38 | .comment-box { 
39 |   border-top:1px solid black;
40 |   padding: 5px;
41 | }
42 | 
43 | #footer {
44 |   position: fixed;
45 |   bottom: 0px;
46 |   text-align: center;
47 |   width: 100%;
48 |   background-color: #f0f0f0;
49 |   border-top: 1px solid #c4c4c4;
50 |   padding-top: 10px;
51 | }
52 | 
53 | #footer li {
54 |   display: inline;
55 |   margin: 40px 10px;
56 |   color: #999;
57 |   font-size: 13px;
58 | }
59 | 


--------------------------------------------------------------------------------
/ui/Html.js:
--------------------------------------------------------------------------------
 1 | import React, { PropTypes } from 'react';
 2 | 
 3 | // XXX: production setup?
 4 | const basePort = process.env.PORT || 3000;
 5 | const scriptUrl = `http://localhost:${basePort + 20}/bundle.js`;
 6 | 
 7 | function Html({ content, state }) {
 8 |   return (
 9 |     <html>
10 |       <head>
11 |         <meta charSet="utf-8" />
12 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
13 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossOrigin="anonymous" />
14 |         <title>GitHunt</title>
15 |       </head>
16 |       <body>
17 |         <div id="content" dangerouslySetInnerHTML={{ __html: content }} />
18 |         <div id="footer">
19 |           <ul>
20 |             <li>Fork on <a href="https://github.com/apollostack/GitHunt">Github</a></li>
21 |             <li>This is an <a href="http://www.apollostack.com/">Apollo</a> example app</li>
22 |           </ul>
23 |         </div>
24 |         <script
25 |           dangerouslySetInnerHTML={{ __html: `window.__APOLLO_STATE__=${JSON.stringify(state)};` }}
26 |           charSet="UTF-8"
27 |         />
28 |         <script src={scriptUrl} charSet="UTF-8" />
29 |       </body>
30 |     </html>
31 |   );
32 | }
33 | 
34 | Html.propTypes = {
35 |   content: PropTypes.string.isRequired,
36 |   state: PropTypes.object.isRequired,
37 | };
38 | 
39 | 
40 | export default Html;
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # GitHunt React
 2 | 
 3 | An example of a client-side app built with React and Apollo Client.
 4 | 
 5 | [![Get on Slack](https://img.shields.io/badge/slack-join-orange.svg)](http://www.apollostack.com/#slack)
 6 | [![Build Status](https://travis-ci.org/apollostack/GitHunt-React.svg?branch=master)](https://travis-ci.org/apollostack/GitHunt-React)
 7 | 
 8 | Please submit a pull request if you see anything that can be improved!
 9 | 
10 | ## Running the app
11 | 
12 | ### 0. This repository is only the React frontend. Run the [GitHunt API](https://github.com/apollostack/GitHunt-API) first. (This is temporary, until we have a permanently hosted demo server.)
13 | 
14 | ### 1. Install Node/npm
15 | 
16 | Make sure you have Node.js installed (the app has been tested with Node `4.4.5` and `5.3.0`)
17 | 
18 | ### 2. Clone and install dependencies
19 | 
20 | ```
21 | git clone https://github.com/apollostack/GitHunt-React.git
22 | cd GitHunt
23 | npm install
24 | ```
25 | 
26 | ### 3. Run the app
27 | 
28 | ```
29 | npm start
30 | ```
31 | 
32 | - Open the client at http://localhost:3000
33 | - Click "Log in with GitHub" in the upper right corner
34 | - You'll be presented with the seed items in the app
35 | 
36 | ![GitHunt App](screenshots/GitHunt-app.png)
37 | 
38 | #### Submit a Repo
39 | Click the green Submit button and add repo with the username/repo-name pattern.
40 | 
41 | ![GitHunt App](screenshots/GitHunt-add.png)
42 | 
43 | #### New Item
44 | Review the new item, up vote it and visit the repo via the link.   
45 | ![GitHunt App](screenshots/GitHunt-new.png)
46 | 


--------------------------------------------------------------------------------
/ui/RepoInfo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import TimeAgo from 'react-timeago';
 3 | import { emojify } from 'node-emoji';
 4 | 
 5 | function RepoInfo({
 6 |   description,
 7 |   stargazers_count,
 8 |   open_issues_count,
 9 |   created_at,
10 |   user_url,
11 |   username,
12 |   children,
13 | }) {
14 |   return (
15 |     <div>
16 |       <p>
17 |         {description && emojify(description)}
18 |       </p>
19 |       <p>
20 |         <InfoLabel
21 |           label="Stars"
22 |           value={stargazers_count}
23 |         />
24 |         &nbsp;
25 |         <InfoLabel
26 |           label="Issues"
27 |           value={open_issues_count}
28 |         />
29 |         &nbsp;
30 |         {children}
31 |         &nbsp;&nbsp;&nbsp;
32 |         Submitted&nbsp;
33 |         <TimeAgo
34 |           date={created_at}
35 |         />
36 |         &nbsp;by&nbsp;
37 |         <a href={user_url}>{username}</a>
38 |       </p>
39 |     </div>
40 |   );
41 | }
42 | 
43 | RepoInfo.propTypes = {
44 |   description: React.PropTypes.string.isRequired,
45 |   stargazers_count: React.PropTypes.number.isRequired,
46 |   open_issues_count: React.PropTypes.number.isRequired,
47 |   created_at: React.PropTypes.number.isRequired,
48 |   user_url: React.PropTypes.string.isRequired,
49 |   username: React.PropTypes.string.isRequired,
50 |   children: React.PropTypes.node,
51 | };
52 | 
53 | function InfoLabel({ label, value }) {
54 |   return (
55 |     <span className="label label-info">{label}: {value}</span>
56 |   );
57 | }
58 | 
59 | InfoLabel.propTypes = {
60 |   label: React.PropTypes.string,
61 |   value: React.PropTypes.number,
62 | };
63 | 
64 | export default RepoInfo;
65 | 


--------------------------------------------------------------------------------
/ui/client.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from 'react-dom';
 3 | import { Router, browserHistory } from 'react-router';
 4 | import ApolloClient, { createNetworkInterface, addTypename } from 'apollo-client';
 5 | import { ApolloProvider } from 'react-apollo';
 6 | const ReactGA = require('react-ga');
 7 | // Polyfill fetch
 8 | import 'isomorphic-fetch';
 9 | 
10 | import routes from './routes.js';
11 | 
12 | import './style.css';
13 | 
14 | import { Client } from 'subscriptions-transport-ws';
15 | import addGraphQLSubscriptions from './subscriptions';
16 | 
17 | const wsClient = new Client('ws://localhost:8080');
18 | 
19 | const networkInterface = createNetworkInterface({
20 |   uri: '/graphql',
21 |   opts: {
22 |     credentials: 'same-origin',
23 |   },
24 |   transportBatching: true,
25 | });
26 | 
27 | const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
28 |   networkInterface,
29 |   wsClient,
30 | );
31 | 
32 | // Initialize Analytics
33 | ReactGA.initialize('UA-74643563-4');
34 | 
35 | function logPageView() {
36 |   ReactGA.set({ page: window.location.pathname });
37 |   ReactGA.pageview(window.location.pathname);
38 | }
39 | 
40 | const client = new ApolloClient({
41 |   networkInterface: networkInterfaceWithSubscriptions,
42 |   queryTransformer: addTypename,
43 |   dataIdFromObject: (result) => {
44 |     if (result.id && result.__typename) { // eslint-disable-line no-underscore-dangle
45 |       return result.__typename + result.id; // eslint-disable-line no-underscore-dangle
46 |     }
47 |     return null;
48 |   },
49 |   shouldBatch: true,
50 |   initialState: window.__APOLLO_STATE__, // eslint-disable-line no-underscore-dangle
51 |   ssrForceFetchDelay: 100,
52 | });
53 | 
54 | render((
55 |   <ApolloProvider client={client}>
56 |     <Router history={browserHistory} onUpdate={logPageView}>
57 |       {routes}
58 |     </Router>
59 |   </ApolloProvider>
60 | ), document.getElementById('content'));
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "githunt",
 3 |   "version": "1.0.0",
 4 |   "description": "Example app for Apollo",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start-app-client": "webpack-dev-server -d --hot --inline --no-info --port 3020",
 8 |     "start-app-server": "nodemon ui/server.js --watch ui --exec babel-node",
 9 |     "start": "concurrently \"npm run start-app-client\" \"npm run start-app-server\"",
10 |     "lint": "eslint ui",
11 |     "build": "webpack -p --progress --config ./webpack.production.config.js"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/apollostack/GitHunt.git"
16 |   },
17 |   "author": "",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/apollostack/GitHunt/issues"
21 |   },
22 |   "homepage": "https://github.com/apollostack/GitHunt#readme",
23 |   "devDependencies": {
24 |     "babel-cli": "^6.8.0",
25 |     "babel-core": "^6.8.0",
26 |     "babel-eslint": "^6.1.0",
27 |     "babel-loader": "^6.2.4",
28 |     "babel-preset-es2015": "^6.6.0",
29 |     "babel-preset-react": "^6.5.0",
30 |     "babel-preset-stage-2": "^6.5.0",
31 |     "babel-register": "^6.9.0",
32 |     "concurrently": "^2.1.0",
33 |     "css-loader": "^0.25.0",
34 |     "eslint": "^3.4.0",
35 |     "eslint-config-airbnb": "^11.0.0",
36 |     "eslint-plugin-babel": "^3.3.0",
37 |     "eslint-plugin-import": "^1.8.1",
38 |     "eslint-plugin-jsx-a11y": "^2.2.1",
39 |     "eslint-plugin-react": "^6.2.0",
40 |     "html-webpack-plugin": "^2.22.0",
41 |     "nodemon": "^1.9.2",
42 |     "style-loader": "^0.13.1",
43 |     "webpack": "^1.13.0",
44 |     "webpack-dev-server": "^1.14.1"
45 |   },
46 |   "dependencies": {
47 |     "apollo-client": "^0.4.14",
48 |     "classnames": "^2.2.5",
49 |     "express": "^4.14.0",
50 |     "graphql-tag": "^0.1.7",
51 |     "http-proxy-middleware": "^0.17.1",
52 |     "isomorphic-fetch": "^2.2.1",
53 |     "json-loader": "^0.5.4",
54 |     "node-emoji": "^1.3.0",
55 |     "react": "^15.1.0",
56 |     "react-addons-update": "^15.2.1",
57 |     "react-apollo": "^0.5.2",
58 |     "react-dom": "^15.1.0",
59 |     "react-ga": "^2.1.0",
60 |     "react-router": "^2.4.1",
61 |     "react-timeago": "^3.0.0",
62 |     "redux": "^3.5.2",
63 |     "subscriptions-transport-ws": "^0.1.2"
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/ui/NewEntry.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { graphql } from 'react-apollo';
 3 | import { browserHistory } from 'react-router';
 4 | import gql from 'graphql-tag';
 5 | 
 6 | class NewEntry extends React.Component {
 7 |   constructor() {
 8 |     super();
 9 |     this.state = {};
10 | 
11 |     this.submitForm = this.submitForm.bind(this);
12 |   }
13 | 
14 |   submitForm(event) {
15 |     event.preventDefault();
16 | 
17 |     const { submit } = this.props;
18 | 
19 |     const repoFullName = event.target.repoFullName.value;
20 | 
21 |     return submit(repoFullName).then((res) => {
22 |       if (!res.errors) {
23 |         browserHistory.push('/feed/new');
24 |       } else {
25 |         this.setState({ errors: res.errors });
26 |       }
27 |     });
28 |   }
29 | 
30 |   render() {
31 |     const { errors } = this.state;
32 |     return (
33 |       <div>
34 |         <h1>Submit a repository</h1>
35 | 
36 |         <form onSubmit={this.submitForm}>
37 |           <div className="form-group">
38 |             <label htmlFor="exampleInputEmail1">
39 |               Repository name
40 |             </label>
41 | 
42 |             <input
43 |               type="text"
44 |               className="form-control"
45 |               id="exampleInputEmail1"
46 |               name="repoFullName"
47 |               placeholder="apollostack/GitHunt"
48 |             />
49 |           </div>
50 | 
51 |           {errors && (
52 |             <div className="alert alert-danger" role="alert">
53 |               {errors[0].message}
54 |             </div>
55 |           )}
56 | 
57 | 
58 |           <button type="submit" className="btn btn-primary">
59 |             Submit
60 |           </button>
61 |         </form>
62 |       </div>
63 |     );
64 |   }
65 | }
66 | 
67 | NewEntry.propTypes = {
68 |   submit: React.PropTypes.func.isRequired,
69 | };
70 | 
71 | const SUBMIT_RESPOSITORY_MUTATION = gql`
72 |   mutation submitRepository($repoFullName: String!) {
73 |     submitRepository(repoFullName: $repoFullName) {
74 |       createdAt
75 |     }
76 |   }
77 | `;
78 | 
79 | const NewEntryWithData = graphql(SUBMIT_RESPOSITORY_MUTATION, {
80 |   props({ mutate }) {
81 |     return {
82 |       submit(repoFullName) {
83 |         return mutate({ variables: { repoFullName } });
84 |       },
85 |     };
86 |   },
87 | })(NewEntry);
88 | 
89 | export default NewEntryWithData;
90 | 


--------------------------------------------------------------------------------
/ui/server.js:
--------------------------------------------------------------------------------
 1 | import Express from 'express';
 2 | import React from 'react';
 3 | import ReactDOM from 'react-dom/server';
 4 | import ApolloClient, { createNetworkInterface } from 'apollo-client';
 5 | import { ApolloProvider } from 'react-apollo';
 6 | import { getDataFromTree } from 'react-apollo/server';
 7 | import { match, RouterContext } from 'react-router';
 8 | import path from 'path';
 9 | import 'isomorphic-fetch';
10 | import proxy from 'http-proxy-middleware';
11 | 
12 | import routes from './routes';
13 | import Html from './Html';
14 | 
15 | const basePort = process.env.PORT || 3000;
16 | const apiHost = `http://localhost:${basePort + 10}`;
17 | const apiUrl = `${apiHost}/graphql`;
18 | 
19 | const app = new Express();
20 | app.use(Express.static(path.join(process.cwd(), 'static')));
21 | 
22 | const apiProxy = proxy({ target: apiHost });
23 | app.use('/graphql', apiProxy);
24 | app.use('/graphiql', apiProxy);
25 | app.use('/login', apiProxy);
26 | app.use('/logout', apiProxy);
27 | 
28 | app.use((req, res) => {
29 |   match({ routes, location: req.originalUrl }, (error, redirectLocation, renderProps) => {
30 |     if (redirectLocation) {
31 |       res.redirect(redirectLocation.pathname + redirectLocation.search);
32 |     } else if (error) {
33 |       console.error('ROUTER ERROR:', error); // eslint-disable-line no-console
34 |       res.status(500);
35 |     } else if (renderProps) {
36 |       const client = new ApolloClient({
37 |         ssrMode: true,
38 |         networkInterface: createNetworkInterface(apiUrl, {
39 |           credentials: 'same-origin',
40 |           // transfer request headers to networkInterface so that they're accessible to proxy server
41 |           // Addresses this issue: https://github.com/matthew-andrews/isomorphic-fetch/issues/83
42 |           headers: req.headers,
43 |         }),
44 |       });
45 | 
46 |       const component = (
47 |         <ApolloProvider client={client}>
48 |           <RouterContext {...renderProps} />
49 |         </ApolloProvider>
50 |       );
51 | 
52 |       getDataFromTree(component).then(context => {
53 |         const content = ReactDOM.renderToString(component);
54 |         res.status(200);
55 | 
56 |         const html = <Html content={content} state={context.store.getState()} />;
57 |         res.send(`<!doctype html>\n${ReactDOM.renderToStaticMarkup(html)}`);
58 |         res.end();
59 |       }).catch(e => console.error('RENDERING ERROR:', e)); // eslint-disable-line no-console
60 |     } else {
61 |       res.status(404).send('Not found');
62 |     }
63 |   });
64 | });
65 | 
66 | app.listen(basePort, () => console.log( // eslint-disable-line no-console
67 |   `App Server is now running on http://localhost:${basePort}`
68 | ));
69 | 


--------------------------------------------------------------------------------
/ui/Layout.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { graphql } from 'react-apollo';
  3 | import { Link } from 'react-router';
  4 | import gql from 'graphql-tag';
  5 | 
  6 | function NavbarLink({ title, href, active = false }) {
  7 |   return (
  8 |     <li className={active && 'active'}>
  9 |       <Link to={href}>
 10 |         {title}
 11 |         {active && (
 12 |           <span className="sr-only">
 13 |             (current)
 14 |           </span>
 15 |         )}
 16 |       </Link>
 17 |     </li>
 18 |   );
 19 | }
 20 | 
 21 | NavbarLink.propTypes = {
 22 |   title: React.PropTypes.string,
 23 |   href: React.PropTypes.string,
 24 |   active: React.PropTypes.bool,
 25 | };
 26 | 
 27 | 
 28 | function Profile({ loading, currentUser }) {
 29 |   if (loading) {
 30 |     return (
 31 |       <p className="navbar-text navbar-right">
 32 |         Loading...
 33 |       </p>
 34 |     );
 35 |   } else if (currentUser) {
 36 |     return (
 37 |       <span>
 38 |         <p className="navbar-text navbar-right">
 39 |           {currentUser.login}
 40 |           &nbsp;
 41 |           <a href="/logout">Log out</a>
 42 |         </p>
 43 |         <Link
 44 |           type="submit"
 45 |           className="btn navbar-btn navbar-right btn-success"
 46 |           to="/submit"
 47 |         >
 48 |           <span
 49 |             className="glyphicon glyphicon-plus"
 50 |             aria-hidden="true"
 51 |           />
 52 |           &nbsp;
 53 |           Submit
 54 |         </Link>
 55 |       </span>
 56 |     );
 57 |   }
 58 |   return (
 59 |     <p className="navbar-text navbar-right">
 60 |       <a href="/login/github">Log in with GitHub</a>
 61 |     </p>
 62 |   );
 63 | }
 64 | 
 65 | Profile.propTypes = {
 66 |   loading: React.PropTypes.bool.isRequired,
 67 |   currentUser: React.PropTypes.object,
 68 | };
 69 | 
 70 | const PROFILE_QUERY = gql`
 71 |   query CurrentUserForLayout {
 72 |     currentUser {
 73 |       login
 74 |       avatar_url
 75 |     }
 76 |   }
 77 | `;
 78 | 
 79 | const ProfileWithData = graphql(PROFILE_QUERY, {
 80 |   props({ data: { loading, currentUser } }) {
 81 |     return { loading, currentUser };
 82 |   },
 83 | })(Profile);
 84 | 
 85 | function Layout({ children, params, location }) {
 86 |   return (
 87 |     <div>
 88 |       <nav className="navbar navbar-default">
 89 |         <div className="container">
 90 |           <div className="navbar-header">
 91 |             <Link className="navbar-brand" to="/feed/top">GitHunt</Link>
 92 |           </div>
 93 | 
 94 |           <ul className="nav navbar-nav">
 95 |             <NavbarLink
 96 |               title="Top"
 97 |               href="/feed/top"
 98 |               active={location.pathname === '/' || params.type === 'top'}
 99 |             />
100 |             <NavbarLink
101 |               title="New"
102 |               href="/feed/new"
103 |               active={params.type === 'new'}
104 |             />
105 |           </ul>
106 | 
107 |           <ProfileWithData />
108 |         </div>
109 |       </nav>
110 |       <div className="container">
111 |         {children}
112 |       </div>
113 |     </div>
114 |   );
115 | }
116 | 
117 | Layout.propTypes = {
118 |   location: React.PropTypes.object,
119 |   params: React.PropTypes.object,
120 |   children: React.PropTypes.element,
121 | };
122 | 
123 | export default Layout;
124 | 


--------------------------------------------------------------------------------
/ui/Feed.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { graphql, withApollo } from 'react-apollo';
  3 | import ApolloClient, { createFragment } from 'apollo-client';
  4 | import RepoInfo from './RepoInfo';
  5 | import classNames from 'classnames';
  6 | import gql from 'graphql-tag';
  7 | import { Link } from 'react-router';
  8 | 
  9 | import { COMMENT_QUERY } from './CommentsPage';
 10 | 
 11 | function Loading() {
 12 |   return (
 13 |     <div>Loading...</div>
 14 |   );
 15 | }
 16 | 
 17 | function VoteButtons({ canVote, score, onVote, vote }) {
 18 |   const buttonClasses = classNames('btn', 'btn-score', {
 19 |     invisible: !canVote,
 20 |   });
 21 | 
 22 |   function submitVote(type) {
 23 |     const voteValue = {
 24 |       UP: 1,
 25 |       DOWN: -1,
 26 |     }[type];
 27 | 
 28 |     onVote(vote.vote_value === voteValue ? 'CANCEL' : type);
 29 |   }
 30 | 
 31 |   return (
 32 |     <span>
 33 |       <button
 34 |         className={classNames(buttonClasses, { active: vote.vote_value === 1 })}
 35 |         onClick={() => submitVote('UP')}
 36 |       ><span className="glyphicon glyphicon-triangle-top" aria-hidden="true"></span></button>
 37 |       <div className="vote-score">{score}</div>
 38 |       <button
 39 |         className={classNames(buttonClasses, { active: vote.vote_value === -1 })}
 40 |         onClick={() => submitVote('DOWN')}
 41 |       ><span className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></button>
 42 |       &nbsp;
 43 |     </span>
 44 |   );
 45 | }
 46 | 
 47 | VoteButtons.propTypes = {
 48 |   canVote: React.PropTypes.bool,
 49 |   score: React.PropTypes.number,
 50 |   onVote: React.PropTypes.func,
 51 |   vote: React.PropTypes.object,
 52 | };
 53 | 
 54 | VoteButtons.fragment = createFragment(gql`
 55 |   fragment voteInfo on Entry{
 56 |     score
 57 |     vote {
 58 |       vote_value
 59 |     }
 60 |   }
 61 | `)
 62 | 
 63 | const FeedEntry = ({ entry, currentUser, onVote, client }) => {
 64 |   const repoLink = `/${entry.repository.full_name}`;
 65 |   const prefetchComments = (repoFullName) => () => {
 66 |     client.query({
 67 |       query: COMMENT_QUERY,
 68 |       variables: { repoName: repoFullName },
 69 |     });
 70 |   };
 71 | 
 72 |   return (
 73 |     <div className="media">
 74 |       <div className="media-vote">
 75 |         <VoteButtons
 76 |           canVote={!!currentUser}
 77 |           score={entry.score}
 78 |           vote={entry.vote}
 79 |           onVote={(type) => onVote({
 80 |             repoFullName: entry.repository.full_name,
 81 |             type,
 82 |           })}
 83 |         />
 84 |       </div>
 85 |       <div className="media-left">
 86 |         <a href="#">
 87 |           <img
 88 |             className="media-object"
 89 |             style={{ width: '64px', height: '64px' }}
 90 |             src={entry.repository.owner.avatar_url}
 91 |             role="presentation"
 92 |           />
 93 |         </a>
 94 |       </div>
 95 |       <div className="media-body">
 96 |         <h4 className="media-heading">
 97 |           <a href={entry.repository.html_url}>
 98 |             {entry.repository.full_name}
 99 |           </a>
100 |         </h4>
101 |         <RepoInfo
102 |           description={entry.repository.description}
103 |           stargazers_count={entry.repository.stargazers_count}
104 |           open_issues_count={entry.repository.open_issues_count}
105 |           created_at={entry.createdAt}
106 |           user_url={entry.postedBy.html_url}
107 |           username={entry.postedBy.login}
108 |         >
109 |           <Link to={repoLink} onMouseOver={prefetchComments(entry.repository.full_name)}>
110 |             View comments ({entry.commentCount})
111 |           </Link>
112 |         </RepoInfo>
113 |       </div>
114 |     </div>
115 |   );
116 | };
117 | 
118 | 
119 | FeedEntry.propTypes = {
120 |   onVote: React.PropTypes.func,
121 |   currentUser: React.PropTypes.object,
122 |   entry: React.PropTypes.object,
123 |   client: React.PropTypes.instanceOf(ApolloClient).isRequired,
124 | };
125 | 
126 | const FeedEntryWithApollo = withApollo(FeedEntry);
127 | 
128 | function FeedContent({ entries = [], currentUser, onVote, onLoadMore }) {
129 |   if (entries && entries.length) {
130 |     return (
131 |       <div> {
132 |         entries.map((entry) => (
133 |           !!entry ? <FeedEntryWithApollo
134 |             key={entry.repository.full_name}
135 |             entry={entry}
136 |             currentUser={currentUser}
137 |             onVote={onVote}
138 |           /> : null
139 |         ))
140 |       }
141 |         <a onClick={onLoadMore}>Load more</a>
142 |       </div>
143 |     );
144 |   }
145 |   return <div />;
146 | }
147 | 
148 | FeedContent.propTypes = {
149 |   entries: React.PropTypes.array,
150 |   currentUser: React.PropTypes.object,
151 |   onVote: React.PropTypes.func,
152 |   onLoadMore: React.PropTypes.func,
153 | };
154 | 
155 | class Feed extends React.Component {
156 |   constructor() {
157 |     super();
158 |     this.offset = 0;
159 |   }
160 | 
161 |   render() {
162 |     const { vote, loading, currentUser, feed, fetchMore } = this.props;
163 | 
164 |     return (
165 |       <div>
166 |         <FeedContent
167 |           entries={feed || []}
168 |           currentUser={currentUser}
169 |           onVote={vote}
170 |           onLoadMore={fetchMore}
171 |         />
172 |         {loading ? <Loading /> : null}
173 |       </div>
174 |     );
175 |   }
176 | }
177 | 
178 | Feed.propTypes = {
179 |   loading: React.PropTypes.bool.isRequired,
180 |   currentUser: React.PropTypes.object,
181 |   feed: React.PropTypes.array,
182 |   fetchMore: React.PropTypes.func,
183 |   vote: React.PropTypes.func.isRequired,
184 | };
185 | 
186 | const FEED_QUERY = gql`
187 |   query Feed($type: FeedType!, $offset: Int, $limit: Int) {
188 |     # Eventually move this into a no fetch query right on the entry
189 |     # since we literally just need this info to determine whether to
190 |     # show upvote/downvote buttons
191 |     currentUser {
192 |       login
193 |     }
194 |     feed(type: $type, offset: $offset, limit: $limit) {
195 |       createdAt
196 |       commentCount
197 |       id
198 |       postedBy {
199 |         login
200 |         html_url
201 |       }
202 |       ...voteInfo
203 |       repository {
204 |         name
205 |         full_name
206 |         description
207 |         html_url
208 |         stargazers_count
209 |         open_issues_count
210 |         owner {
211 |           avatar_url
212 |         }
213 |       }
214 |     }
215 |   }
216 | `;
217 | const ITEMS_PER_PAGE = 10;
218 | const FeedWithData = graphql(FEED_QUERY, {
219 |   options(props) {
220 |     return {
221 |       fragments:[
222 |         VoteButtons.fragment
223 |       ],
224 |       variables: {
225 |         type: (
226 |           props.params &&
227 |           props.params.type &&
228 |           props.params.type.toUpperCase()
229 |         ) || 'TOP',
230 |         offset: 0,
231 |         limit: ITEMS_PER_PAGE,
232 |       },
233 |       forceFetch: true,
234 |     };
235 |   },
236 |   props({ data: { loading, feed, currentUser, fetchMore } }) {
237 |     return {
238 |       loading,
239 |       feed,
240 |       currentUser,
241 |       fetchMore() {
242 |         return fetchMore({
243 |           variables: {
244 |             offset: feed.length,
245 |           },
246 |           updateQuery: (prev, { fetchMoreResult }) => {
247 |             if (!fetchMoreResult.data) { return prev; }
248 |             return Object.assign({}, prev, {
249 |               feed: [...prev.feed, ...fetchMoreResult.data.feed],
250 |             });
251 |           },
252 |         });
253 |       },
254 |     };
255 |   },
256 | })(Feed);
257 | 
258 | const VOTE_MUTATION = gql`
259 |   mutation vote($repoFullName: String!, $type: VoteType!) {
260 |     vote(repoFullName: $repoFullName, type: $type) {
261 |       score
262 |       id
263 |       vote {
264 |         vote_value
265 |       }
266 |     }
267 |   }
268 | `;
269 | 
270 | const FeedWithDataAndMutations = graphql(VOTE_MUTATION, {
271 |   props({mutate}) {
272 |     return {
273 |       vote({repoFullName, type}) {
274 |         return mutate({
275 |           variables: { repoFullName, type },
276 |         })
277 |       }
278 |     };
279 |   },
280 | })(FeedWithData);
281 | 
282 | export default FeedWithDataAndMutations;
283 | 


--------------------------------------------------------------------------------
/ui/CommentsPage.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { graphql, withApollo } from 'react-apollo';
  3 | import ApolloClient from 'apollo-client';
  4 | import TimeAgo from 'react-timeago';
  5 | import RepoInfo from './RepoInfo';
  6 | import gql from 'graphql-tag';
  7 | import update from 'react-addons-update';
  8 | 
  9 | // helper function checks for duplicate comments, which we receive because we
 10 | // get subscription updates for our own comments as well.
 11 | // TODO it's pretty inefficient to scan all the comments every time.
 12 | // maybe only scan the first 10, or up to a certain timestamp
 13 | function isDuplicateComment(newComment, existingComments) {
 14 |   return newComment.id !== null && existingComments.some(comment => newComment.id === comment.id);
 15 | }
 16 | 
 17 | 
 18 | function Comment({ username, userUrl, content, createdAt }) {
 19 |   return (
 20 |     <div className="comment-box">
 21 |       <b>{content}</b>
 22 |       <br />
 23 |       Submitted <TimeAgo date={createdAt} /> by <a href={userUrl}>{username}</a>
 24 |     </div>
 25 |   );
 26 | }
 27 | 
 28 | Comment.propTypes = {
 29 |   username: React.PropTypes.string,
 30 |   userUrl: React.PropTypes.string,
 31 |   content: React.PropTypes.string,
 32 |   createdAt: React.PropTypes.number,
 33 | };
 34 | 
 35 | class CommentsPage extends React.Component {
 36 |   constructor(props) {
 37 |     super(props);
 38 |     this.state = { noCommentContent: false };
 39 |     this.submitForm = this.submitForm.bind(this);
 40 |     this.subscriptionObserver = null;
 41 |     this.subscriptionRepoName = null;
 42 |   }
 43 | 
 44 |   submitForm(event) {
 45 |     const { entry, currentUser, submit } = this.props;
 46 | 
 47 |     this.setState({ noCommentContent: false });
 48 |     event.preventDefault();
 49 |     const repoFullName = entry.repository.full_name;
 50 |     const commentContent = event.target.newCommentContent.value;
 51 |     if (!commentContent) {
 52 |       this.setState({ noCommentContent: true });
 53 |     } else {
 54 |       submit({
 55 |         repoFullName,
 56 |         commentContent,
 57 |         currentUser,
 58 |       }).then((res) => {
 59 |         if (! res.errors) {
 60 |           document.getElementById('newComment').value = '';
 61 |         } else {
 62 |           this.setState({ errors: res.errors });
 63 |         }
 64 |       });
 65 |     }
 66 |   }
 67 | 
 68 |   subscribe(repoName, updateCommentsQuery) {
 69 |     const SUBSCRIPTION_QUERY = gql`
 70 |       subscription onCommentAdded($repoFullName: String!){
 71 |         commentAdded(repoFullName: $repoFullName){
 72 |           id
 73 |           postedBy {
 74 |             login
 75 |             html_url
 76 |           }
 77 |           createdAt
 78 |           content
 79 |         }
 80 |       }
 81 |     `;
 82 |     this.subscriptionRepoName = repoName;
 83 |     this.subscriptionObserver = this.props.client.subscribe({
 84 |       query: SUBSCRIPTION_QUERY,
 85 |       variables: { repoFullName: repoName },
 86 |     }).subscribe({
 87 |       next(data) {
 88 |         const newComment = data.commentAdded;
 89 |         updateCommentsQuery((previousResult) => {
 90 |           // if it's our own mutation, we might get the subscription result
 91 |           // after the mutation result.
 92 |           if (isDuplicateComment(newComment, previousResult.entry.comments)) {
 93 |             return previousResult;
 94 |           }
 95 |           // update returns a new "immutable" list with the new comment
 96 |           // added to the front.
 97 |           return update(
 98 |             previousResult,
 99 |             {
100 |               entry: {
101 |                 comments: {
102 |                   $unshift: [newComment],
103 |                 },
104 |               },
105 |             }
106 |           );
107 |         });
108 |       },
109 |       error(err) { console.error('err', err); },
110 |     });
111 |   }
112 | 
113 |   componentDidMount() {
114 |     if (this.props.loading === false){
115 |       this.subscribe(this.props.entry.repository.full_name, this.props.updateCommentsQuery);
116 |     }
117 |   }
118 | 
119 |   componentWillReceiveProps(nextProps) {
120 |     if (this.subscriptionRepoName !== nextProps.entry.repository.full_name) {
121 |       if (this.subscriptionObserver) {
122 |         this.subscriptionObserver.unsubscribe();
123 |       }
124 |       this.subscribe(nextProps.entry.repository.full_name, nextProps.updateCommentsQuery);
125 |     }
126 |   }
127 | 
128 |   componentWillUnmount() {
129 |     if (this.subscriptionObserver) {
130 |       this.subscriptionObserver.unsubscribe();
131 |     }
132 |   }
133 | 
134 |   render() {
135 |     const { loading, currentUser, entry } = this.props;
136 |     const { errors, noCommentContent } = this.state;
137 |     if (loading) {
138 |       return (
139 |         <div>Loading...</div>
140 |       );
141 |     }
142 |     const repo = entry.repository;
143 | 
144 |     return (
145 |       <div>
146 |         <div>
147 |           <h1>Comments for <a href={repo.html_url}>{repo.full_name}</a></h1>
148 |           <RepoInfo
149 |             description={repo.description}
150 |             stargazers_count={repo.stargazers_count}
151 |             open_issues_count={repo.open_issues_count}
152 |             created_at={entry.createdAt}
153 |             user_url={entry.postedBy.html_url}
154 |             username={entry.postedBy.login}
155 |           />
156 |           {currentUser && <form onSubmit={this.submitForm}>
157 |             <div className="form-group">
158 | 
159 |               <input
160 |                 type="text"
161 |                 className="form-control"
162 |                 id="newComment"
163 |                 name="newCommentContent"
164 |                 placeholder="Write your comment here!"
165 |               />
166 |             </div>
167 | 
168 |             {errors && (
169 |               <div className="alert alert-danger" role="alert">
170 |                 {errors[0].message}
171 |               </div>
172 |             )}
173 |             {noCommentContent && (
174 |               <div className="alert alert-danger" role="alert">
175 |                 Comment must have content.
176 |               </div>
177 |             )}
178 |             <button type="submit" className="btn btn-primary">
179 |               Submit
180 |             </button>
181 |           </form>}
182 |           {!currentUser && <div><em>Log in to comment.</em></div>}
183 |         </div>
184 |         <br />
185 |         <div>
186 |           <div> {
187 |             entry.comments.map((comment) => (
188 |               <Comment
189 |                 key={comment.postedBy.login + comment.content + comment.createdAt + repo.full_name}
190 |                 username={comment.postedBy.login}
191 |                 content={comment.content}
192 |                 createdAt={comment.createdAt}
193 |                 userUrl={comment.postedBy.html_url}
194 |               />
195 |             ))
196 |           }</div>
197 | 
198 |         </div>
199 |       </div>
200 |     );
201 |   }
202 | }
203 | 
204 | CommentsPage.propTypes = {
205 |   loading: React.PropTypes.bool.isRequired,
206 |   currentUser: React.PropTypes.shape({
207 |     login: React.PropTypes.string,
208 |   }),
209 |   entry: React.PropTypes.shape({
210 |     id: React.PropTypes.number,
211 |     comments: React.PropTypes.arrayOf(
212 |       React.PropTypes.shape({
213 |         postedBy: React.PropTypes.shape({
214 |           login: React.PropTypes.string.isRequired,
215 |         }),
216 |         createdAt: React.PropTypes.number,
217 |         content: React.PropTypes.string.isRequired,
218 |       })
219 |     ),
220 |     repository: React.PropTypes.shape({
221 |       full_name: React.PropTypes.string,
222 |       html_url: React.PropTypes.string,
223 |     }),
224 |   }),
225 |   submit: React.PropTypes.func.isRequired,
226 |   updateCommentsQuery: React.PropTypes.func,
227 |   client: React.PropTypes.instanceOf(ApolloClient).isRequired,
228 | };
229 | 
230 | const SUBMIT_COMMENT_MUTATION = gql`
231 |   mutation submitComment($repoFullName: String!, $commentContent: String!) {
232 |     submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
233 |       id
234 |       postedBy {
235 |         login
236 |         html_url
237 |       }
238 |       createdAt
239 |       content
240 |     }
241 |   }
242 | `;
243 | 
244 | const CommentsPageWithMutations = graphql(SUBMIT_COMMENT_MUTATION, {
245 |   props({ ownProps, mutate }) {
246 |     return {
247 |       submit({ repoFullName, commentContent }) {
248 |         return mutate({
249 |           variables: { repoFullName, commentContent },
250 |           optimisticResponse: {
251 |             __typename: 'Mutation',
252 |             submitComment: {
253 |               __typename: 'Comment',
254 |               id: null,
255 |               postedBy: ownProps.currentUser,
256 |               createdAt: +new Date,
257 |               content: commentContent,
258 |             },
259 |           },
260 |           updateQueries: {
261 |             Comment: (prev, { mutationResult }) => {
262 |               const newComment = mutationResult.data.submitComment;
263 |               if (isDuplicateComment(newComment, prev.entry.comments)) {
264 |                 return prev;
265 |               }
266 |               return update(prev, {
267 |                 entry: {
268 |                   comments: {
269 |                     $unshift: [newComment],
270 |                   },
271 |                 },
272 |               });
273 |             },
274 |           },
275 |         });
276 |       },
277 |     };
278 |   },
279 | })(CommentsPage);
280 | 
281 | 
282 | const COMMENT_QUERY = gql`
283 |   query Comment($repoName: String!) {
284 |     # Eventually move this into a no fetch query right on the entry
285 |     # since we literally just need this info to determine whether to
286 |     # show upvote/downvote buttons
287 |     currentUser {
288 |       login
289 |       html_url
290 |     }
291 |     entry(repoFullName: $repoName) {
292 |       id
293 |       postedBy {
294 |         login
295 |         html_url
296 |       }
297 |       createdAt
298 |       comments {
299 |         id
300 |         postedBy {
301 |           login
302 |           html_url
303 |         }
304 |         createdAt
305 |         content
306 |       }
307 |       repository {
308 |         full_name
309 |         html_url
310 |         description
311 |         open_issues_count
312 |         stargazers_count
313 |       }
314 |     }
315 |   }
316 | `;
317 | 
318 | 
319 | const CommentsPageWithDataAndMutations = graphql(COMMENT_QUERY, {
320 |   options({ params }) {
321 |     return {
322 |       variables: { repoName: `${params.org}/${params.repoName}` },
323 |     };
324 |   },
325 |   props({ data: { loading, currentUser, entry, updateQuery } }) {
326 |     return { loading, currentUser, entry, updateCommentsQuery: updateQuery };
327 |   },
328 | })(CommentsPageWithMutations);
329 | 
330 | const CommentsPageWithDataAndMutationsAndApollo = withApollo(CommentsPageWithDataAndMutations);
331 | 
332 | export default CommentsPageWithDataAndMutationsAndApollo;
333 | export { COMMENT_QUERY };
334 | 


--------------------------------------------------------------------------------
/process/devlog.md:
--------------------------------------------------------------------------------
  1 | # Development log
  2 | 
  3 | All of the steps I'm taking to build this app, from start to finish.
  4 | 
  5 | - [Day 1: Concept and tech](#day-1)
  6 | - [Day 2: Listing views, schema design, running mock server](#day-2)
  7 | - [Day 3: Wiring up the GitHub API](#day-3)
  8 | 
  9 | <h3 id="day-1">Day 1: Concept and tech</h3>
 10 | 
 11 | It's Friday 5/13, and we have decided to come up with a new example app.
 12 | 
 13 | [We wrote down all of the stuff we want to demonstrate about building an app with Apollo.](README.md)
 14 | 
 15 | I've also made a list of technology choices, listed in the README:
 16 | 
 17 | - Apollo server - to put a nice unified API on top of our GitHub and local data
 18 | - Apollo client - to load that data declaratively into our UI
 19 | - React - it's a great way to build UIs, and has the best integration with Apollo and Redux
 20 | - React router - it seems to be the most popular React router today, and has some great hooks and techniques for SSR. It seems like James Baxley has had some success with implementing this stuff already with React Router.
 21 | - Webpack - the Meteor build system is by far the most convenient, but comes with a dependency on mongo, its own account system, etc. Since we want to learn how Apollo works without all of these things, we're going to not use it even though it would reduce the complexity of the code.
 22 | - Babel - to compile our server code.
 23 | - Redux - to manage client side data, perhaps we can also use Redux Form to manage the submission form, but we'll see when we get there.
 24 | - Passport.js for login - this seems to be the most common login solution for Express/Node, and has a great GitHub login solution. Jonas has [already written a tutorial](https://medium.com/apollo-stack/a-guide-to-authentication-in-graphql-e002a4039d1#.l8vt1hskj) for using that with GraphQL.
 25 | - SQL for local data - We'll use SQLite for dev, and Postgres for production. TBD - should we use Sequelize or some other ORM? Or just Knex for query building?
 26 | - Bootstrap for styling - I already know how to use it, and I don't want the styling to be the focus of the app. Let's keep it as simple as possible.
 27 | 
 28 | I drew a [quick mockup of the desired UI](mockup.jpg). It's quite simple, and should be easy to implement in bootstrap.
 29 | 
 30 | <h3 id="day-2">Day 2: Listing different views and designing schema</h3>
 31 | 
 32 | We want to make this app as simple as possible, but also useful. I think I'll design it the way I would a real app, and then simplify if necessary. Here are some ideas for different views in the app:
 33 | 
 34 | - Home page: "Hot" feed, which ranks by number of upvotes and time since posting
 35 | - "new" page, which lists stuff that was just posted, but hasn't had time yet to be upvoted
 36 | - Submission page, which is a form that lets people put in info about the repository - perhaps it's just a link to the repo, maybe a comment as well?
 37 | - Repo page, where you can look at a particular repository, and its upvotes and comments
 38 | 
 39 | Given this, let's design our GraphQL schema for the app. I think this is a great place to start the process because it will let us set up some mocked data, and work on the UI and API in parallel as we need to.
 40 | 
 41 | #### Repository
 42 | 
 43 | This represents a repository on GitHub - all of its data is fetched from the GitHub API. I think it will be convenient to separate data from different APIs into different types in my schema, rather than having one type that merges both the local data (upvotes etc) and the GitHub data (description etc). This can theoretically have [all of the fields that GitHub returns](https://developer.github.com/v3/repos/#get), but we're probably interested mostly in high-level data like:
 44 | 
 45 | - Repository name
 46 | - Organization/author avatar
 47 | - Description
 48 | - Number of stars
 49 | - Number of issues
 50 | - Number of PRs
 51 | - Number of contributors
 52 | - Date created
 53 | 
 54 | #### Entry
 55 | 
 56 | This represents a GitHub repository submitted to GitHunt. It will have data specific to our application:
 57 | 
 58 | - User that posted this repository
 59 | - Date posted
 60 | - The related repository object from GitHub
 61 | - Display score (probably just upvotes - downvotes)
 62 | - Comments
 63 | - Number of comments
 64 | 
 65 | #### Comment
 66 | 
 67 | Just a comment posted on an entry.
 68 | 
 69 | - User that posted this comment
 70 | - Date posted
 71 | - Comment content
 72 | 
 73 | #### User
 74 | 
 75 | Someone that has logged in to the app.
 76 | 
 77 | - Username
 78 | - Avatar
 79 | - GitHub profile URL
 80 | 
 81 | #### In GraphQL schema language
 82 | 
 83 | Now let's put it all together to see what our GraphQL schema might look like. Let's keep in mind that this is just a sketch - the mechanics of our app might require some changes.
 84 | 
 85 | ```graphql
 86 | # This uses the exact field names returned by the GitHub API for simplicity
 87 | type Repository {
 88 |   name: String!
 89 |   full_name: String!
 90 |   description: String
 91 |   html_url: String!
 92 |   stargazers_count: Number!
 93 |   open_issues_count: Number
 94 | 
 95 |   # We should investigate how best to represent dates
 96 |   created_at: String!
 97 | }
 98 | 
 99 | # Uses exact field names from GitHub for simplicity
100 | type User {
101 |   login
102 |   avatar_url
103 |   html_url
104 | }
105 | 
106 | type Comment {
107 |   postedBy: User!
108 |   createdAt: String! # Actually a date
109 |   content: String!
110 | }
111 | 
112 | type Entry {
113 |   repository: Repository!
114 |   postedBy: User!
115 |   createdAt: String! # Actually a date
116 |   score: Number!
117 |   comments: [Comment]! # Should this be paginated?
118 |   commentCount: Number!
119 | }
120 | ```
121 | 
122 | Looks pretty good so far! We might also want some root queries as entry points into our data. These are probably going to correlate to the different views we want for our data:
123 | 
124 | ```graphql
125 | # To select the sort order of the feed
126 | enum FeedType {
127 |   HOT
128 |   NEW
129 | }
130 | 
131 | type Query {
132 |   # For the home page, after arg is optional to get a new page of the feed
133 |   # Pagination TBD - what's the easiest way to have the client handle this?
134 |   feed(type: FeedType!, after: String): [Entry]
135 | 
136 |   # For the entry page
137 |   entry(repoFullName: String!): Entry
138 | 
139 |   # To display the current user on the submission page, and the navbar
140 |   currentUser: User
141 | }
142 | ```
143 | 
144 | OK, one last thing - we need to define a few mutations, which will be the way we modify our server-side data. These are basically just all of the actions a user can take in our app:
145 | 
146 | ```graphql
147 | # Type of vote
148 | enum VoteType {
149 |   UP
150 |   DOWN
151 |   CANCEL
152 | }
153 | 
154 | type Mutation {
155 |   # Submit a new repository
156 |   submitRepository(repoFullName: String!): Entry
157 | 
158 |   # Vote on a repository
159 |   vote(repoFullName: String!, type: VoteType!): Entry
160 | 
161 |   # Comment on a repository
162 |   # TBD: Should this return an Entry or just the new Comment?
163 |   comment(repoFullName: String!, content: String!): Entry
164 | }
165 | ```
166 | 
167 | It's not yet clear to me what return values from mutations should be. There are a few possible approaches:
168 | 
169 | 1. Return parent of thing being modified - then we can incorporate the result into the store more easily
170 | 2. Return the thing being modified - then we have to figure out where it goes into the store
171 | 3. Return the root query object itself, so that we can refetch anything we want after the mutation, in one request
172 | 
173 | I'd like to try all three eventually and see how they feel in this app. Apollo Client should probably have one or two situations that it deals with the best, so that we can recommend people use that for best results.
174 | 
175 | #### Getting mocked server running
176 | 
177 | One great function of Apollo Server is the ability to easily mock data so that you can run some queries against your server without writing any resolvers. Let's get that going.
178 | 
179 | To do that, we need to set up some build tooling for our server. This would be extra trivial if we used Meteor, but we'll try to go the more generic route and set up babel ourselves. I googled and found this great simple setup: https://github.com/babel/example-node-server
180 | 
181 | First, let's install some packages:
182 | 
183 | ```txt
184 | npm init
185 | npm install --save-dev nodemon babel-cli babel-preset-es2015 babel-preset-stage-2
186 | ```
187 | 
188 | Let's add a `start` script to our app. We're using `nodemon` so that our app restarts automatically if we change server code.
189 | 
190 | ```js
191 | "scripts": {
192 |   "start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
193 | }
194 | ```
195 | 
196 | Then if we set up some "hello world" index file, we can run `npm start` and confirm that compilation worked.
197 | 
198 | Let's get Apollo Server going!
199 | 
200 | ```txt
201 | npm install --save express apollo-server
202 | ```
203 | 
204 | Then I massaged the boilerplate from the starter kit: https://github.com/apollostack/apollo-starter-kit
205 | 
206 | See the code in this commit: https://github.com/apollostack/GitHunt/commit/5f5ad68b28d15139e10d653c1ad24b15535d2706
207 | 
208 | Now, I have a mocked version of my schema going, after some syntax errors like writing `Number` instead of `Int` in my sketch above. The default mocking just uses `"Hello world!"` for every string so it's not that exciting, but at least it means the server is running properly and the schema is being loaded!
209 | 
210 | ![Basic graphiql!](../screenshots/default-mock.png)
211 | 
212 | Now there's a decision to make - should we write a mocked backend and then implement the UI, or wire up the actual backend right now?
213 | 
214 | <h3 id="day-3">Day 3: Wire up GitHub API</h3>
215 | 
216 | OK, setting up a client build system is a bit annoying - since we can test our server via GraphiQL, let's just use that and connect our schema to a real database.
217 | 
218 | First, let's split up our schema into multiple files, which correspond to the different models we need to implement in our DB. We are going to follow some of Jonas' recommendations from [the proposed connector spec on GraphQL-Tools](https://github.com/apollostack/graphql-tools/blob/bc7d106cebbb6b03512df7282d4c91f19edb464e/connectors.md). This means we need a few things for our backend:
219 | 
220 | 1. One model for each GraphQL type we want to fetch: Repository, User, Comment, and Entry
221 | 2. One connector for each type of backend we are fetching from: GitHub API, and SQL
222 | 
223 | Probably we want to start from the connectors, because those are more general. We should probably test them in some way. According to the connector document, we want our connectors to definitely do two things:
224 | 
225 | 1. Batching - when we want to fetch multiple objects of the same type, we should batch them into one request if possible (for example, by running a query with an array of IDs, rather than many queries with one ID each)
226 | 2. Caching - if we make multiple requests for the same exact object in one query, we should make sure we only do one request if possible and reuse the result. So if we ask for a particular item from the GitHub API, we don't want to fetch it multiple times per request. In our case, we want to implement one more thing in our GitHub connector: ETags and conditional requests, which will let us check the API for changes without running into our rate limit: https://developer.github.com/v3/#conditional-requests
227 | 
228 | Let's start with the GitHub connector. I think we basically need just one method on the connector:
229 | 
230 | ```
231 | GitHub.getObject(url);
232 | ```
233 | 
234 | Since the GitHub API doesn't support any batching (we can't get multiple repository objects with one request, for example) we can't take advantage of having any more detailed information than the URL in the connector itself. Converting the object type and ID into the URL is something we can do in the model, which will be type-specific.
235 | 
236 | Let's go over the functionality we want in this connector:
237 | 
238 | 1. It should pass the correct GitHub API key
239 | 2. It should not load the same GitHub URL twice in the same request, using something like [DataLoader](https://github.com/facebook/dataloader)
240 | 3. It should keep track of `ETag` headers for as many GitHub objects as possible, and send them with requests to both speed up API accesses and avoid hitting the rate limit
241 | 4. It doesn't need to send any authentication information other than our API key, because none of the data we are requesting is per-user (although we might want to add this in the future, since the rate limits on the GitHub API are per user)
242 | 
243 | This means that the connector needs to have both per-request and per-server state - per-request for (1) and per-server for (2). We can make further optimizations later if we end up hitting the GitHub API limit but this seems like a good start.
244 | 
245 | OK, we implemented a basic connector and tested (1) and (2). (3) is an optimization, so let's wire up the connector and try running some queries before we do that.
246 | 
247 | Let's implement a simple model layer over our connector - this is going to be the layer that knows about the different kinds of objects we want to fetch, and the URLs for those.
248 | 
249 | > - NOTE: Following this method, I had to add a bunch of "not implemented" resolvers to my schema right away. Not sure how to overcome that.
250 | > - NOTE: When I get a runtime error in my resolver, GraphiQL shows it to me but I don't get to see where in my server code it actually happened.
251 | > - NOTE: The connectors property on apollo server is misnamed.
252 | > - NOTE: If I wanted to share a connector instance between models, the current API doesn't have a great way to do that since I don't get to call the constructor myself. I feel like I could just attach those to context manually and not be sad about it.
253 | 
254 | Alright, we've got the GitHub API going!
255 | 
256 | ![GitHub API!](../screenshots/github-api.png)
257 | 
258 | Next stop is implementing the SQL connector/models, so that we can actually insert some entries into our database.
259 | 
260 | <h3 id="day-4">Day 4: Setting up SQL</h3>
261 | 
262 | We want to store our local non-GitHub data in SQL. To do that, we first have to design our SQL schema. It shouldn't be too hard to base this on our GraphQL schema. There are two types that we want to keep in our database:
263 | 
264 | - Comment
265 | - Entry
266 | 
267 | To recap, here are the fields they have in the GraphQL schema:
268 | 
269 | ```graphql
270 | type Comment {
271 |   postedBy: User!
272 |   createdAt: String! # Actually a date
273 |   content: String!
274 | }
275 | 
276 | type Entry {
277 |   repository: Repository!
278 |   postedBy: User!
279 |   createdAt: String! # Actually a date
280 |   score: Int!
281 |   comments: [Comment]! # Should this be paginated?
282 |   commentCount: Int!
283 | }
284 | ```
285 | 
286 | What does that translate to in SQL types? We'll use [SQLite](https://www.sqlite.org/datatype3.html) type names. All should have timestamps and ids, just in case we need them (we're not trying to demo the most optimized SQL schema of all time in this particular app).
287 | 
288 | - `comments` table
289 |   - `posted_by`: TEXT (GitHub username)
290 |   - `created_at`: INTEGER (Unix time)
291 |   - `content`: TEXT
292 |   - `entry_id`: INTEGER
293 | - `entries` table
294 |   - `repository`: TEXT (GitHub name)
295 |   - `posted_by`: TEXT (GitHub username)
296 |   - `created_at`: INTEGER (Unix time)
297 | - `votes` table (since we need to keep track of who has already upvoted a particular thing)
298 |   - `entry_id`: INTEGER
299 |   - `vote_value`: INTEGER (-1 or +1)
300 |   - `username`: TEXT (GitHub username)
301 | 
302 | When we get to auth, we might need something to store login tokens as well, but we'll cross that bridge when we get there.
303 | 
304 | [Here's the current migration code.](https://github.com/apollostack/GitHunt/blob/5ba0136f57d109629c6d2dfcf6a7cfbaeff86517/migrations/20160518201950_create_comments_entries_votes.js)
305 | 
306 | OK, after messing about with some various Knex and GraphQL stuff, we've also set up some simple seed data, and written some basic resolvers/models. There's still a good way to go until we have a good SQL connector, but we can move on for now. My goal is to get a backend that returns the data we want first, then optimize later.
307 | 
308 | Also, I found a cool trick to simplify resolvers:
309 | 
310 | ```js
311 | import { property, constant } from 'lodash';
312 | 
313 | ...
314 | 
315 | createdAt: property('created_at'),
316 | score: constant(0),
317 | commentCount: constant(0),
318 | ```
319 | 
320 | Couldn't help myself: https://medium.com/@stubailo/one-weird-trick-to-make-your-graphql-js-resolvers-more-concise-8cab3072b80#.oolym5t5b
321 | 
322 | OK, added a few more queries to the SQL model. We don't have caching/batching yet, but we'll implement that when we get there.
323 | 
324 | ### Day 5: Implement basic frontend
325 | 
326 | OK, I'm now tired of learning SQL, although it was very informative. Let's get that frontend build going and load some data with Apollo Client!
327 | 
328 | Let's steal the config from [the Graph.Cool example app](https://github.com/graphcool-examples/react-apollo-todo-example).
329 | 
330 | I learned about the `concurrently` NPM module from the Angular 2 getting started example, so I'm using that to run the webpack dev server and nodemon at the same time, for the server and client builds. I'm also using Webpack dev server `proxy` to pass `/graphql` to my API server.
331 | 
332 | OK, after fiddling around with a bunch of stuff we now have a basic UI, and no surprises yet!
333 | 
334 | ![Basic UI screenshot](../screenshots/first-ui.png)
335 | 
336 | It's a scientific fact that everything is more exciting with images!
337 | 
338 | ![UI screenshot with avatars](../screenshots/avatars.png)
339 | 
340 | ### Day 6: Implement GitHub login
341 | 
342 | We're going to implement GitHub login. First, let's read Jonas' excellent series on auth in GraphQL ([part 1](https://medium.com/apollo-stack/a-guide-to-authentication-in-graphql-e002a4039d1#.swmmlfyex), [part 2](https://medium.com/apollo-stack/auth-in-graphql-part-2-c6441bcc4302#.4ozv5kdzl)). Based on those ideas, we'll use some of the following libraries:
343 | 
344 | - [passport](http://passportjs.org/)
345 | - [passport-github](https://github.com/jaredhanson/passport-github)
346 | - [express-session](https://github.com/expressjs/session)
347 | - [connect-session-knex](https://github.com/llambda/connect-session-knex)
348 | 
349 | Everything was pretty much following the boilerplate in the tutorial and the docs of the various packages (even though I ran into some issues where the docs for the github package were outdated) except one thing:
350 | 
351 | > NOTE: By default `fetch` doesn't send cookies, and you need to pass the `credentials` option.
352 | 
353 | Thankfully, passing that option was very easy once I realized I needed it:
354 | 
355 | ```js
356 | const client = new ApolloClient({
357 |   networkInterface: createNetworkInterface('/graphql', {
358 |     credentials: 'same-origin',
359 |   }),
360 | });
361 | ```
362 | 
363 | ### Day 7: Add upvote/downvote mutation
364 | 
365 | OK, we have a pretty good UI going. Next step is to implement our first mutation - `vote`. Let's refresh our memory of what we wrote down before:
366 | 
367 | ```graphql
368 | # Vote on a repository
369 | vote(repoFullName: String!, type: VoteType!): Entry
370 | ```
371 | 
372 | This mutation needs to insert or update a row in our `votes` table, let's remind ourselves what that looks like:
373 | 
374 | ```js
375 | knex.schema.createTable('votes', function (table) {
376 |   table.increments();
377 |   table.timestamps();
378 |   table.integer('entry_id');
379 |   table.integer('vote_value');
380 |   table.string('username');
381 | }),
382 | ```
383 | 
384 | I'm sitting at a coffee shop with Angela Zhang, so I'll ask her since she knows more about SQL things.
385 | 
386 | Notes from Angela:
387 | 
388 | 1. We might want to have a primary key of (repo id, user id) on votes so that we can use upsert, and quickly find all of the votes for a particular repository.
389 | 2. We might want to use GitHub user IDs instead of usernames as the primary key.
390 | 3. GitHub warns users a lot about changing their username, so people will expect stuff to break in that case.
391 | 4. We can use this SO answer to get the username from a GitHub id if we want to: http://stackoverflow.com/questions/11976393/get-github-username-by-id
392 | 
393 | Hopefully we can optimize all of this stuff later; for now I'm just going to build something that works.
394 | 
395 | OK, I implemented the first mutation. The code is absolutely horrible, but it works!
396 | 
397 | ![First mutation](../screenshots/first-mutation.png)
398 | 
399 | Now let's integrate it into the UI. Fortunately we can start by just copying that into our JS code.
400 | 
401 | > NOTE: Right now we have a hacky way of reloading the whole UI to display the new vote count. I've filed an issue to improve it, maybe Dhaivat can take a look: https://github.com/apollostack/GitHunt/issues/3
402 | 
403 | ### Day 8: Adding routes, the ability to submit new entries, and more features
404 | 
405 | > NOTE: It's hard to identify network or GraphQL errors when using react-apollo. It's not that hard to look into the network tab, but I get something like this:
406 | 
407 | ![Useless stack trace](../screenshots/error-stack.png)
408 | 
409 | > When what I really want is this:
410 | 
411 | ![Useful error from network tab](../screenshots/useful-error.png)
412 | 
413 | Alright, let's add some routing to our app. As we mentioned before, we want at least three different routes:
414 | 
415 | 1. Home page/feed
416 | 2. Page to add a new entry
417 | 3. Page for a specific entry, perhaps with a comment list
418 | 
419 | Right now, let's just do (1) and (2) - I feel like (3) and implementing comments might be a fair bit of work that we don't need to do at the moment.
420 | 
421 | We're going to go with React Router for this app, so let's get that set up. We already have `Layout` and `Feed` components that we should just be able to drop into the routes. They'll probably look like this:
422 | 
423 | ```js
424 | // Sketch of code, not guaranteed to work
425 | 
426 | // Before, no router
427 | render(
428 |   <ApolloProvider client={client}>
429 |     <Layout><Feed /></Layout>
430 |   </ApolloProvider>,
431 |   document.getElementById('root')
432 | )
433 | 
434 | // After, with routes
435 | render((
436 |   <ApolloProvider client={client}>
437 |     <Router history={browserHistory}>
438 |       <Route path="/" component={Layout}>
439 |         <IndexRoute component={Feed} />
440 |         <Route path="new" component={NewEntry}/>
441 |         <Route path="*" component={NoMatch}/>
442 |       </Route>
443 |     </Router>
444 |   </ApolloProvider>
445 | ), document.body)
446 | ```
447 | 
448 | In addition to adding the routes, we need to implement:
449 | 
450 | 1. `NewEntry`, a simple form for adding a new component, and
451 | 2. `NoMatch`, basically a 404 page.
452 | 
453 | Also, this is a good opportunity to add a `new` feed in addition to `top`, which can be driven by query parameters and links in the navbar.
454 | 


--------------------------------------------------------------------------------