list repositories at Select

Author: lucassabreu

package.json

@@ -38,6 +38,7 @@
     "react-dom": "^16.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "react-select": "^1.2.1",
     "reactstrap": "^5.0.0-beta",
     "style-loader": "0.19.0",
     "svg-react-loader": "^0.4.5",
@@ -49,7 +50,7 @@
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
-    "start": "yarn install && HOST=cwps.lucassabreu.test node scripts/start.js",
+    "start": "yarn install && node scripts/start.js",
     "build": "node scripts/build.js && cp _redirects build/_redirects",
     "test": "node scripts/test.js --env=jsdom"
   },

src/GitHub/GitHub.js

@@ -1,20 +1,25 @@
 import React from 'react'
 import Loading from '../Components/Loading';
+import { withGithubRepositories } from './withGitHubRepositories';
+import Select from 'react-select';
+import 'react-select/dist/react-select.css';
 
 class GitHub extends React.Component {
-  constructor(props) {
-    super(props);
 
-    const params = new URLSearchParams(props.location.search);
+  constructor(props) {
+    super(props)
+    this.state = { selectedOption: null }
+  }
 
-    this.state = {
-      loading: true,
-      code: params.get('code')
-    };
+  handleSelect(selectedOption) {
+    this.setState({ selectedOption })
   }
 
   render() {
-    const { loading } = this.state;
+    const { loading, repositories } = this.props;
+    const selectedOption = this.state.selectedOption && this.state.selectedOption.value
+
+    repositories.sort((a, b) => a.full_name.toLocaleLowerCase() > b.full_name.toLocaleLowerCase() ? 1 : -1)
     return (
       <div className="GitHub">
         {loading ?
@@ -24,11 +29,19 @@ class GitHub extends React.Component {
           </section>
           :
           <section>
+            <Select
+              value={selectedOption}
+              onChange={(e) => this.handleSelect(e)}
+              options={repositories.map(r => Object.assign(r, {
+                value: r.full_name,
+                label: r.full_name,
+              }))}
+            />
           </section>
         }
       </div>
     )
   }
 }
 
-export default GitHub
+export default withGithubRepositories(GitHub)

src/GitHub/withGitHubRepositories.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export function withGithubRepositories(Component) {
+  return class extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        loading: true,
+        repositories: [],
+      }
+    }
+
+    async componentDidMount() {
+      const repositories = await this.fetchNextPage();
+      this.setState({
+        loading: false,
+        repositories: repositories,
+      })
+    }
+
+    async fetchNextPage(page) {
+      const paging = page ? `?page=${page}` : '';
+
+      const resp = await fetch(new Request(
+        `https://api.github.com/user/repos${paging}`,
+        {
+          headers: new Headers({
+            Authorization: `token ${sessionStorage.getItem('github-token')}`,
+            Accept: 'application/json',
+          })
+        }
+      ));
+
+      let repos = await resp.json();
+      if (repos.length === 0) {
+        return repos;
+      }
+
+      return repos.concat(await this.fetchNextPage(page ? page + 1 : 2));
+    }
+
+    render() {
+      return <Component {...this.props}
+        loading={this.state.loading}
+        repositories={this.state.repositories}
+      />
+    }
+  }
+}

yarn.lock

@@ -1331,7 +1331,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@^2.2.3, classnames@^2.2.5:
+classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -5210,6 +5210,12 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-input-autosize@^2.1.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
+  dependencies:
+    prop-types "^15.5.8"
+
 react-popper@^0.7.2:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.5.tgz#71c25946f291db381231281f6b95729e8b801596"
@@ -5240,6 +5246,14 @@ react-router@^4.2.0:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
+react-select@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1"
+  dependencies:
+    classnames "^2.2.4"
+    prop-types "^15.5.8"
+    react-input-autosize "^2.1.2"
+
 react-transition-group@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"