first commit

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,17 @@
+# Github user search
+
+Search and view users via the Github API - http://simonsmith.github.io/github-user-search/
+
+Built with
+
+- [React](http://facebook.github.io/react/)
+- [Reflux](https://github.com/spoike/refluxjs)
+- [SUIT CSS](http://suitcss.github.io/)
+- [6to5](https://6to5.org/)
+- [webpack](http://webpack.github.io/)
+
+It also caches results in sessionStorage to lower the hits on the API.
+
+### To do
+
+- Add some more profile information

app/npm-debug.log

@@ -0,0 +1,23 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose stack Error: missing script: start
+4 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:142:19)
+4 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:58:5
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:345:5
+4 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:309:45)
+4 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:343:3)
+4 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:113:5)
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:232:12
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:76:16
+4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
+5 verbose cwd /Applications/XAMPP/xamppfiles/htdocs/github-user-search-master/app
+6 error Darwin 16.1.0
+7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
+8 error node v4.1.2
+9 error npm  v2.14.4
+10 error missing script: start
+11 error If you need help, you may report this error at:
+11 error     <https://github.com/npm/npm/issues>
+12 verbose exit [ 1, true ]

app/react/actions/user.js

@@ -0,0 +1,35 @@
+import Reflux from 'reflux';
+import request from 'reqwest';
+import { getItem } from 'mixins/cache';
+import gitHubAPI from 'api/github';
+import partial from 'lodash-node/modern/function/partial'
+
+var User = Reflux.createActions({
+  search: { asyncResult: true },
+  profile: { asyncResult: true },
+  repos: { asyncResult: true },
+  starred: { asyncResult: true }
+});
+
+User.search.listen(function(url) {
+  // Use the url as the cachekey
+  getAPIItem.call(this, url, url);
+});
+
+function getAPIItem(cacheKey, url, username) {
+  var cached = getItem(`${username}:${cacheKey}`);
+
+  if (cached) {
+    return this.completed(cached, true);
+  }
+
+  gitHubAPI(url)
+    .then(this.completed)
+    .fail(this.failed);
+}
+
+User.profile.listen(partial(getAPIItem, 'profile'));
+User.repos.listen(partial(getAPIItem, 'repos'));
+User.starred.listen(partial(getAPIItem, 'starred'));
+
+export default User

app/react/api/github.js

@@ -0,0 +1,25 @@
+import reqwest from 'reqwest';
+import parseLinkHeader from 'utils/parseLinkHeader';
+import startsWith from 'lodash-node/modern/string/startsWith';
+import path from 'path';
+
+const API_ROOT_URL = 'https://api.github.com';
+
+export default gitHubAPI;
+
+function gitHubAPI(url) {
+  var requestUrl = startsWith(url, API_ROOT_URL) ? url : path.join(API_ROOT_URL, url);
+  var req = reqwest({
+    url: requestUrl,
+    type: 'json'
+  })
+    .then(apiData => {
+      return {
+        results: apiData,
+        url,
+        pagination: parseLinkHeader(req.request.getResponseHeader('Link'))
+      };
+    });
+
+  return req;
+}

app/react/components/app.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Router, { Route, DefaultRoute, Redirect } from 'react-router'
+
+import Layout from './layout.jsx';
+import Search from './search.jsx';
+import UserDetail from './user-detail.jsx';
+
+var routes = (
+    <Route name="layout" path="/" handler={Layout}>
+      <Route name="users" path="search/users" handler={Search} />
+      <Route name="user" path="/users/:username" handler={UserDetail} />
+      <DefaultRoute handler={Search} />
+      <Redirect from="/" to="users" />
+    </Route>
+);
+
+Router.run(routes, function(Handler) {
+  React.render(<Handler/>, document.body);
+});

app/react/components/layout.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Router, { RouteHandler } from 'react-router'
+
+var Layout = React.createClass({
+  render: function() {
+    return (
+      <RouteHandler />
+    )
+  }
+});
+
+export default Layout;

app/react/components/pagination.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import Router, { State, Link } from 'react-router'
+
+var Pagination = React.createClass({
+  mixins: [State],
+
+  renderNextLink() {
+    if (this.props.pagination.next) {
+      let url = new URL(this.props.pagination.next);
+      return (
+        <Link className="Pagination-link Pagination-link--next u-linkClean" to={`${url.pathname}${url.search}`}>
+          Next <span aria-hidden="true">&rsaquo;</span>
+        </Link>
+      )
+    }
+  },
+
+  renderPrevLink() {
+    if (this.props.pagination.prev) {
+      let url = new URL(this.props.pagination.prev);
+      return (
+        <Link className="Pagination-link Pagination-link--prev u-linkClean" to={`${url.pathname}${url.search}`}>
+          <span aria-hidden="true">&lsaquo;</span> Previous
+        </Link>
+      )
+    }
+  },
+
+  renderFirstLink() {
+    if (this.props.pagination.first) {
+      let url = new URL(this.props.pagination.first);
+      return (
+        <Link className="Pagination-link Pagination-link--first u-linkClean" to={`${url.pathname}${url.search}`}>
+          <span aria-hidden="true">&laquo;</span> First
+        </Link>
+      )
+    }
+  },
+
+  renderLastLink() {
+    if (this.props.pagination.last) {
+      let url = new URL(this.props.pagination.last);
+      return (
+        <Link className="Pagination-link Pagination-link--last u-linkClean" to={`${url.pathname}${url.search}`}>
+          Last <span aria-hidden="true">&raquo;</span>
+        </Link>
+      )
+    }
+  },
+
+  render() {
+    return (
+      <div className="Pagination u-cf">
+        {this.renderFirstLink()}
+        {this.renderPrevLink()}
+        {this.renderNextLink()}
+        {this.renderLastLink()}
+      </div>
+    );
+  }
+});
+
+export default Pagination;

app/react/components/profile-card.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+var ProfileCard = React.createClass({
+  render: function() {
+    return (
+      <div className="ProfileCard">
+        <Link className="ProfileCard-link u-cf u-linkClean" to="user" params={{ username: this.props.username }}>
+          <img className="ProfileCard-avatar" src={this.props.avatar} width="40" height="40" />
+          <h2 className="ProfileCard-username u-textTruncate">{this.props.username}</h2>
+        </Link>
+      </div>
+    )
+  }
+});
+
+export default ProfileCard;

app/react/components/profile-stat-group.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Stat from './stat.jsx';
+import map from 'lodash-node/modern/collection/map';
+import uniqueId from 'lodash-node/modern/utility/uniqueId';
+
+var ProfileStatGroup = React.createClass({
+  renderStatItems: function() {
+    return map(this.props.stats, function(value, key) {
+      return (
+        <li key={uniqueId()} className="ProfileStatGroup-item">
+          <Stat value={value} title={key} className="Stat--large" />
+        </li>
+      );
+    });
+  },
+
+  render: function() {
+    return (
+      <ul className="ProfileStatGroup">
+        {this.renderStatItems()}
+      </ul>
+    )
+  }
+});
+
+export default ProfileStatGroup;

app/react/components/profile.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import ProfileStatGroup from './profile-stat-group.jsx';
+
+var Profile = React.createClass({
+  render: function() {
+    var stats = {
+      'Followers': this.props.user.followers,
+      'Following': this.props.user.following,
+      'Repos': this.props.user.public_repos
+    };
+
+    return (
+      <div className="Profile u-cf">
+        <div className="Profile-avatar">
+          <img className="Profile-avatarImg u-imgResponsive" src={this.props.user.avatar_url} width="190" height="190" />
+        </div>
+        <div className="Profile-body">
+          <h2 className="Profile-name">
+            <a className="Profile-link u-linkClean" href={this.props.user.html_url}>
+              {this.props.user.name}
+            </a>
+          </h2>
+          <div className="Profile-userInfo">
+            <p className="Profile-userItem">{this.props.user.login}</p>
+            <p className="Profile-userItem">{this.props.user.location}</p>
+            <p className="Profile-userItem"><a href={this.props.user.blog} target="_blank">{this.props.user.blog}</a></p>
+          </div>
+          <div className="Profile-wrapProfileStatGroup">
+            <ProfileStatGroup stats={stats} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+});
+
+export default Profile;

app/react/components/repo-list.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Repo from  './repo.jsx';
+import map from 'lodash-node/modern/collection/map';
+
+var RepoList = React.createClass({
+  render: function() {
+    var repos = map(this.props.repos, function(repo) {
+      return (
+        <li className="RepoList-item" key={repo.id}>
+          <Repo data={repo} />
+        </li>
+      );
+    });
+
+    return (
+      <ul className="RepoList">
+        {repos}
+      </ul>
+    )
+  }
+});
+
+export default RepoList;

app/react/components/repo.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Stat from './stat.jsx';
+
+var Repo = React.createClass({
+  renderStat: function() {
+    if (this.props.data.stargazers_count) {
+      return (
+        <div className="Repo-wrapStat">
+          <Stat value={this.props.data.stargazers_count} title="Star" />
+        </div>
+      )
+    } else {
+      return null;
+    }
+  },
+
+  render: function() {
+    return (
+      <div className="Repo">
+        <a className="Repo-link u-linkBlock" href={this.props.data.html_url}>
+          <h3 className="Repo-name">{this.props.data.name}</h3>
+          <p className="Repo-description u-textTruncate">{this.props.data.description}</p>
+          {this.renderStat()}
+        </a>
+      </div>
+    )
+  }
+});
+
+export default Repo;

app/react/components/results-message.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import pluralize from 'pluralize';
+
+var ResultsMessage = React.createClass({
+  render: function() {
+    var results = this.props.results;
+    var total = results.total_count;
+    var resultsMessage;
+
+    // Found some results
+    if (total > 0) {
+      resultsMessage = (
+        <span>
+          <b>{total}</b> {pluralize('results', total)} for <mark>{this.props.query}</mark>
+        </span>
+      );
+    }
+
+    // Found zero results
+    if (total == 0) {
+      resultsMessage = (
+        <span>No results for <mark>{this.props.query}</mark></span>
+      );
+    }
+
+    // Found results, but no more pages
+    if (total > 0 && !results.items.length) {
+      resultsMessage = (
+        <span>No more results for <mark>{this.props.query}</mark></span>
+      );
+    }
+
+    // No results because error
+    if (results.error) {
+      resultsMessage = (
+        <span><b>Error:</b> {results.error.message}</span>
+      )
+    }
+
+    return (
+      <p className="ResultsMessage">
+        {resultsMessage}
+      </p>
+    )
+  }
+});
+
+export default ResultsMessage;