Added: Github app

Author: Ushang Thakker

README.md

@@ -1,2 +1,22 @@
-# reactgithubapi
-Learning react basics
+# ReactGithubAPI
+Learning react basics using the free and opensource github API
+
+Update:
+
+To run this in a docker container use `make`
+
+After downloading/forking the repo:
+
+`npm install`
+
+After that to run the app:
+
+`npm start` 
+
+and then visit `http://localhost:8080` on your browser.
+
+To run tests:
+
+`npm run test`
+
+

package.json

@@ -0,0 +1,59 @@
+{
+  "name": "ReactGithubAPI",
+  "version": "1.0.4",
+  "description": "A simple app to learn the basics of React/webpack and deploy it using a docker instance",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest",
+    "start": "webpack"
+  },
+  "keywords": [
+    "react",
+    "node",
+    "webpack",
+    "docker",
+    "githubapi"
+  ],
+  "author": "Ushang Thakker",
+  "license": "ISC",
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ]
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react",
+      "<rootDir>/node_modules/react-dom",
+      "<rootDir>/node_modules/react-addons-test-utils",
+      "<rootDir>/node_modules/fbjs"
+    ]
+  },
+  "devDependencies": {
+    "babel-core": "^6.10.4",
+    "babel-jest": "^13.2.2",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "jest-cli": "^13.2.3",
+    "node-sass": "^3.8.0",
+    "react-addons-test-utils": "^15.2.1",
+    "react-hot-loader": "^1.3.0",
+    "sass-loader": "^4.0.0",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "dependencies": {
+    "chance": "^1.0.3",
+    "css-loader": "^0.23.1",
+    "file-loader": "^0.9.0",
+    "history": "^3.0.0",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-router": "^2.5.2",
+    "style-loader": "^0.13.1",
+    "superagent": "^2.1.0",
+    "webpack": "^1.13.1"
+  }
+}

src/components/App/App.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+class App extends React.Component {
+	render() {
+		return(
+			<div>
+				<h1> GitHub API using React with Docker & CI </h1>
+				{this.props.children}
+			</div>
+		);
+	}
+}
+
+export default App;

src/components/App/App.scss

@@ -0,0 +1,7 @@
+h1 {
+    font-weight: 100;
+    font-size: 250%;
+    margin-bottom: 0;
+    color: #0275d8;
+}
+

src/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IndexLink } from 'react-router';
+
+class Breadcrumb extends React.Component {
+	render() {
+		if(this.props.rootNode){
+			return(<p>You are here: <IndexLink to="/" activeClassName="active">Home</IndexLink></p>);
+		}
+		else{
+			return(
+				<p>You are here: <IndexLink to="/" activeClassName="active">Home </IndexLink>
+	                > {this.props.childNode}</p>
+			);
+		}
+	}
+}
+
+export default Breadcrumb;

src/components/Breadcrumb/Breadcrumb.scss

@@ -0,0 +1,12 @@
+a {
+    color: #0275d8;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a.active {
+    color: black;
+}

src/components/Detail/Detail.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Link } from 'react-router';
+import Breadcrumb from '../Breadcrumb/Breadcrumb';
+import ajax from 'superagent';
+
+class Detail extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            mode: 'commits',
+            commits: [],
+            forks: [],
+            pulls: []
+        };
+    }
+
+    
+    fetchFeed(type) {
+        if(this.props.params.repo === ''){
+            return;
+        }
+
+        const baseURL = 'https://api.github.com/repos/facebook';
+
+        // -------- Discarding fetch for superagent -----------------------------
+        /*fetch(`${baseURL}/${this.props.params.repo}/${type}`).then((response) => {
+            return response.json();
+        }).then((body) => {
+            this.setState({ [type]: body });
+        }).catch((err) => {
+            console.log(`Error fetching ${type}`,err);
+        });*/
+
+        // --------------  superagent code ---------------------------------------------------
+        ajax.get(`${baseURL}/${this.props.params.repo}/${type}`) //es6 String Interpolation: Need `` and not ''
+            .end((error, response) => {
+                if (!error && response) {
+                    this.setState({ [type]: response.body }); //es6 Computed property names: surround variable names by []
+                } else {
+                    console.log(`Error fetching ${type}`, error);
+                }
+            }
+        );
+    }
+
+    componentWillMount() {
+        
+        this.fetchFeed('commits');
+        this.fetchFeed('forks');
+        this.fetchFeed('pulls');
+    }
+
+    selectMode(mode) {
+        this.setState({ mode });
+    }
+
+
+    renderCommits() {
+        return this.state.commits.map((commit, index) => {
+            const author = commit.author ? commit.author.login : 'Anonymous';
+            const profileLink = '/user/'+author;
+
+            return (<p key={index}>
+                <Link to={profileLink}> {author} </Link> :
+                <a href={commit.html_url}>{commit.commit.message}</a>.
+            </p>);
+        });
+    }
+
+    renderForks() {
+        return this.state.forks.map((fork, index) => {
+            const owner = fork.owner ? fork.owner.login : 'Anonymous';
+            const profileLink = '/user/'+owner;
+
+            return (<p key={index}>
+                <Link to={profileLink}> {owner} </Link> : forked to
+                <a href={fork.html_url}>{fork.html_url}</a> at {fork.created_at}.
+            </p>);
+        });
+    }
+
+    renderPulls() {
+        return this.state.pulls.map((pull, index) => {
+            const user = pull.user ? pull.user.login : 'Anonymous';
+            const profileLink = '/user/'+user;
+
+            return (<p key={index}>
+                <Link to={profileLink}> {user} </Link> :
+                <a href={pull.html_url}>{pull.body}</a>.
+            </p>);
+        });
+    }
+
+    render() {
+        let content;
+
+        if (this.state.mode === 'commits') {
+            content = this.renderCommits();
+        } else if (this.state.mode === 'forks') {
+            content = this.renderForks();
+        } else {
+            content = this.renderPulls();
+        }
+
+        return (<div>
+            <Breadcrumb childNode = {this.props.params.repo} />
+            <br/>
+            <button onClick={this.selectMode.bind(this, 'commits')}>Show Commits</button>
+            <button onClick={this.selectMode.bind(this, 'forks')}>Show Forks</button>
+            <button onClick={this.selectMode.bind(this, 'pulls')}>Show Pulls</button>
+            <hr/>
+            <h1>{this.state.mode}</h1> 
+            {content}
+        </div>);
+    }
+}
+
+export default Detail;

src/components/Detail/Detail.scss

@@ -0,0 +1,12 @@
+button {
+    padding: 5px 20px;
+    background-color: white;
+    margin: 10px;
+    border: 1px solid #aaaaaa;
+    border-radius: 5px;
+    outline-width: 0;
+}
+
+button:active {
+    background-color: #dcdcdc;
+}

src/components/List/List.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Link } from 'react-router';
+import Breadcrumb from '../Breadcrumb/Breadcrumb';
+
+class List extends React.Component {
+
+	render() {
+		return (
+			<div>
+				<Breadcrumb rootNode="true" />
+				<p> Please choose a repository from the list below </p>
+				<ul>
+					<li> <Link to="/detail/react"> React </Link> </li>
+					<li> <Link to="/detail/react-native"> React Native</Link> </li>
+					<li> <Link to="/detail/jest"> Jest </Link> </li>
+				</ul>
+			</div>
+		);
+	}
+}
+
+export default List;

src/components/User/User.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Link } from 'react-router';
+import Breadcrumb from '../Breadcrumb/Breadcrumb';
+import ajax from 'superagent';
+
+class User extends React.Component {
+
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			events: []
+		}
+	}
+
+	componentWillMount(){
+		const baseURL = 'https://api.github.com/users';
+
+		// -------- Discarding fetch for superagent -----------------------------
+        /*fetch(`${baseURL}/${this.props.params.user}/events`).then((response) => {
+            return response.json();
+        }).then((body) => {
+            this.setState({ events: body });
+        }).catch((err) => {
+            console.log(`Error fetching ${this.props.params.user}`,err);
+        });*/
+
+        // -------------- superagent code ---------------------------------------------------
+        ajax.get(`${baseURL}/${this.props.params.user}/events`) //es6 String Interpolation: Need `` and not ''
+            .end((error, response) => {
+                if (!error && response) {
+                    this.setState({ events: response.body }); //es6 Computed property names: surround variable names by []
+                } else {
+                    console.log(`Error fetching ${this.props.params.user} data`, error);
+                }
+            }
+        );
+	}
+
+	getContent() {
+		return this.state.events.map((event, index) => {
+			var eventMap = [
+				{key:"Event Type", value: event.type},
+				{key:"Actor Name", value: event.actor.login},
+				{key:"Actor URL", value: event.actor.url},
+				{key:"Repo Name", value: event.repo.name},
+				{key:"Repo URL", value: event.repo.url},
+				{key:"Created At", value: event.created_at}
+			];
+			return(
+					<ul key={index}>
+						{
+							eventMap.map((data,index) => {
+								return <li key={index}> <b> {data.key} </b>: {data.value} </li>;
+							})
+						}
+					</ul>
+				);
+			});
+	}
+
+	render() {
+		let content = this.getContent();
+		return(<div>
+				<Breadcrumb childNode = {this.props.params.user} />
+				{content}
+			</div>);
+	}
+}
+
+export default User;