Resolve #14: Add author section (#19)

* Upgrade Jest
* Upgrade webpack

package.json

@@ -2,7 +2,6 @@
   "name": "my-contributions.github.io",
   "version": "0.0.1",
   "description": "Show off your open source contributions and check out others",
-  "main": "index.js",
   "homepage": "https://my-contributions.github.io",
   "repository": "github:my-contributions/my-contributions.github.io",
   "author": "Elisey Zanko <[email protected]>",
@@ -21,17 +20,18 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
-    "babel-jest": "^21.2.0",
+    "babel-jest": "^22.4.3",
     "babel-loader": "^7.1.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "eslint": "^4.19.1",
     "eslint-plugin-react": "^7.5.1",
-    "jest": "^21.2.1",
+    "jest": "^22.4.3",
     "jest-junit": "^3.1.0",
-    "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.9.3",
+    "webpack": "^4.2.0",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1",
     "webpack-merge": "^4.1.0",
     "whatwg-fetch": "^2.0.3"
   },

src/api/GitHub.js

@@ -323,4 +323,27 @@ export default class GitHub {
 
         return GitHub._sortIssues(results);
     }
+
+    async getUser() {
+        let user;
+
+        try {
+            user = await this._fetchJSON('https://api.github.com/users/' + this._author);
+        }
+        catch (e) {
+            if (e.name == 'AuthorizationError') {
+                GitHub._requestAuthorization();
+                return null;
+            }
+            throw e;
+        }
+
+        return {
+            login: user.login,
+            html_url: user.html_url,
+            name: user.name,
+            bio: user.bio,
+            location: user.location,
+        };
+    }
 }

src/api/GitHub.test.js

@@ -605,6 +605,39 @@ describe('aggregateIssues', () => {
     });
 });
 
+describe('getUser', () => {
+    it('handles HTTP errors', async () => {
+        window.fetch.mockReturnValueOnce({ok: false});
+
+        const error = new Error(
+            'Could not fetch https://api.github.com/users/test'
+        );
+        await expect(github.getUser()).rejects.toEqual(error);
+    });
+
+    it('requests authorization if 401 Unauthorized', async () => {
+        github._authorization = 'token';
+        window.fetch.mockReturnValueOnce({status: 401});
+
+        await expect(github.getUser()).resolves.toEqual(null);
+        expect(window.localStorage.removeItem).toHaveBeenCalledWith('access_token');
+    });
+
+    it('uses authorization header', async () => {
+        const user = {
+            login: 'test',
+            html_url: 'https://github.com/test',
+            name: 'Test User',
+            bio: 'Test Bio',
+            location: 'Test Location',
+        };
+        github._authorization = 'token';
+        window.fetch.mockReturnValueOnce(mockResponse(user));
+
+        await expect(github.getUser()).resolves.toEqual(user);
+    });
+});
+
 describe('authorize', () => {
     it('gets access_token from localStorage', async () => {
         window.localStorage.getItem.mockReturnValueOnce('some_token');

src/components/App.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PullRequests from './PullRequests';
 import GitHub from '../api/GitHub';
 import Issues from './Issues';
+import Author from './Author';
 
 
 class App extends React.PureComponent {
@@ -45,6 +46,7 @@ class App extends React.PureComponent {
         if (this.state.github) {
             return (
                 <div>
+                    <Author github={this.state.github}/>
                     <PullRequests github={this.state.github}/>
                     <Issues github={this.state.github}/>
                 </div>

src/components/Author.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import GitHub from '../api/GitHub';
+import React from 'react';
+import AuthorName from './AuthorName';
+import AuthorBio from './AuthorBio';
+import AuthorLocation from './AuthorLocation';
+
+export default class Author extends React.PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            author: null,
+            error: '',
+        };
+    }
+
+    async componentWillMount() {
+        try {
+            this.setState({
+                author: await this.props.github.getUser(),
+            });
+        }
+        catch(e) {
+            this.setState({error: e.toString()});
+        }
+    }
+
+    render() {
+        if (this.state.error) {
+            return this.state.error;
+        }
+
+        if (!this.state.author) {
+            return null;
+        }
+
+        return (
+            <div>
+                <AuthorName name={this.state.author.name} login={this.state.author.login} html_url={this.state.author.html_url}/>
+                <AuthorBio text={this.state.author.bio}/>
+                <AuthorLocation text={this.state.author.location}/>
+            </div>
+        );
+    }
+}
+
+Author.propTypes = {
+    github: PropTypes.instanceOf(GitHub).isRequired,
+};

src/components/AuthorBio.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class AuthorBio extends React.PureComponent {
+    render() {
+        return this.props.text && (
+            <div>
+                {this.props.text}
+            </div>
+        );
+    }
+}
+
+AuthorBio.propTypes = {
+    text: PropTypes.string,
+};

src/components/AuthorLocation.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class AuthorLocation extends React.PureComponent {
+    render() {
+        return this.props.text && (
+            <div>
+                {this.props.text}
+            </div>
+        );
+    }
+}
+
+AuthorLocation.propTypes = {
+    text: PropTypes.string,
+};

src/components/AuthorName.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class AuthorName extends React.PureComponent {
+    render() {
+        return (
+            <div>
+                {this.props.name} <a href={this.props.html_url}>{this.props.login}</a>
+            </div>
+        );
+    }
+}
+
+AuthorName.propTypes = {
+    name: PropTypes.string,
+    login: PropTypes.string.isRequired,
+    html_url: PropTypes.string.isRequired,
+};

src/components/Repository.js

@@ -9,8 +9,7 @@ export default class Repository extends React.PureComponent {
         }
         return (
             <div>
-                <a href={this.props.item.html_url}>{this.props.item.full_name}</a>&nbsp;
-                ({details})
+                <a href={this.props.item.html_url}>{this.props.item.full_name}</a> ({details})
             </div>
         );
     }

webpack.dev.js

@@ -3,6 +3,7 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
+    mode: 'development',
     devtool: 'inline-source-map',
     devServer: {
         contentBase: './dist',

webpack.prod.js

@@ -1,17 +1,11 @@
 const webpack = require('webpack');
 const merge = require('webpack-merge');
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 
 module.exports = merge(common, {
+    mode: 'production',
     plugins: [
-        new UglifyJSPlugin({
-            sourceMap: true,
-        }),
         new webpack.DefinePlugin({
-            'process.env': {
-                'NODE_ENV': JSON.stringify('production'),
-            },
             OAUTH_GATEWAY_URL: JSON.stringify('https://3fyst874r0.execute-api.eu-central-1.amazonaws.com/prod'),
             OAUTH_CLIENT_ID: JSON.stringify('5d3995b225dc40b5601b'),
         }),