Style dropdown

src/GoalsForm.js

@@ -28,21 +28,25 @@ class GoalsForm extends Component {
       issueNumber: 1,
       errors: [],
       success: false,
+      prevRepoSelectorPageLink: null,
+      nextRepoSelectorPageLink: null
     };
   }
 
   componentDidMount() {
-    this.getRepos()
+    this.getRepos();
+  }
+
+  getRepos(url = null) {
+    gitHubApiCommunicator.getRepos(this.props.token, url)
       .then(repoData => this.setRepos(repoData))
       .then(repo => this.getMilestonesAndIssues(repo))
       .then(response => this.setMilestoneAndIssueNumbers(response))
   }
 
-  getRepos() {
-    return gitHubApiCommunicator.getRepos(this.props.token);
-  }
-
   setRepos(repoData) {
+    this.setPagination(repoData);
+
     const repos = repoData.data.map((repo) => {
       return {
         name: repo.name,
@@ -57,6 +61,22 @@ class GoalsForm extends Component {
     return currentRepo;
   }
 
+  setPagination(repoData) {
+    const links = repoData.headers.link.split(",")
+    const result = {prev: null, next: null}
+
+    links.map((link) => {
+      const key = JSON.parse(link.match(/".*"/g)[0])
+      const value = link.match(/[^\s<>]+/)[0]
+      result[key] = value
+    });
+
+    this.setState({
+      prevRepoSelectorPageLink: result.prev,
+      nextRepoSelectorPageLink: result.next
+    });
+  }
+
   getMilestonesAndIssues(repo) {
     return gitHubApiCommunicator.getMilestonesAndIssues(
       this.props.token,
@@ -106,10 +126,30 @@ class GoalsForm extends Component {
 
   handleChangeRepo = (event) => {
     this.setState({
-      currentRepo: this.state.repos[parseInt(event.target.value)]
+      currentRepo: this.state.repos[event.target.getAttribute("value")]
     }, this.updateMilestoneAndIssue)
   }
 
+  atBeginningOfRepoSelector = () => {
+    return this.state.prevRepoSelectorPageLink == null
+  }
+
+  atEndOfRepoSelector = () => {
+    return this.state.nextRepoSelectorPageLink == null
+  }
+
+  pageRepoSelectorNext = () => {
+    if (this.state.nextRepoSelectorPageLink) {
+      this.getRepos(this.state.nextRepoSelectorPageLink);
+    }
+  }
+
+  pageRepoSelectorPrev = () => {
+    if (this.state.prevRepoSelectorPageLink) {
+      this.getRepos(this.state.prevRepoSelectorPageLink);
+    }
+  }
+
   updateMilestoneAndIssue = () => {
     this.getMilestonesAndIssues(this.state.currentRepo)
       .then(response => this.setMilestoneAndIssueNumbers(response))
@@ -201,7 +241,12 @@ class GoalsForm extends Component {
       <div>
         <RepoSelector
           repoNames={this.buildRepoNames()}
-          handleChange={this.handleChangeRepo} />
+          handleChange={this.handleChangeRepo}
+          currentRepo={this.state.currentRepo}
+          atBeginning={this.atBeginningOfRepoSelector()}
+          atEnd={this.atEndOfRepoSelector()}
+          prev={this.pageRepoSelectorPrev}
+          next={this.pageRepoSelectorNext} />
         <form onSubmit={this.handleSubmit}>
           <MilestoneField
             value={this.state.milestone.title}

src/RepoSelector.js

@@ -1,17 +1,79 @@
 import React, { Component } from 'react';
 
 class RepoSelector extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      visible: false
+    }
+  }
+
+  toggleDropdown = () => {
+    if (this.state.visible) {
+      this.setState({visible: false});
+    } else {
+      this.setState({visible: true});
+    }
+  }
+
+  selectRepo = (event) => {
+    this.props.handleChange(event);
+    this.toggleDropdown();
+  }
+
+  prevClassName = () => {
+    if (this.props.atBeginning) {
+      return "disabled arrow"
+    } else {
+      return "arrow"
+    }
+  }
+
+  nextClassName = () => {
+    if (this.props.atEnd) {
+      return "disabled arrow"
+    } else {
+      return "arrow"
+    }
+  }
+
   renderOptions = () => {
-    return this.props.repoNames.map((name, i) => {
-      return (<option value={i} key={i}>{name}</option>)
-    });
+    let result;
+
+    if (this.state.visible) {
+      result = this.props.repoNames.map((name, i) => {
+        return (
+          <div className="dropdown-item" value={i} key={i} onClick={this.selectRepo}>
+            {name}
+          </div>
+        )
+      });
+
+      return (
+        <nav>
+          {result}
+          <div className="list-navigation">
+            <span className={this.prevClassName()} onClick={this.props.prev}>
+              &lt;
+            </span>
+            <span className={this.nextClassName()} onClick={this.props.next}>
+              &gt;
+            </span>
+          </div>
+        </nav>
+      )
+    }
+
+    return;
   }
 
   render() {
     return (
-      <select onChange={this.props.handleChange}>
-        { this.renderOptions() }
-      </select>
+      <div className="repo-selector">
+        <div className="current-repo" onClick={this.toggleDropdown}>{this.props.currentRepo.name}</div>
+        {this.renderOptions()}
+      </div>
     );
   }
 }

src/apiCommunicators/apiCommunicator.js

@@ -13,7 +13,7 @@ export default class apiCommunicator {
           direction: 'desc',
           state: 'all',
           type: 'all',
-          per_page: 500,
+          per_page: 20,
         },
         params,
       )

src/apiCommunicators/gitHubApiCommunicator.js

@@ -2,8 +2,12 @@ import apiCommunicator from './apiCommunicator';
 import pullRequester from './pullRequester';
 
 export default class gitHubApiCommunicator {
-  static getRepos(token) {
-    return apiCommunicator.get('/user/repos', token, {});
+  static getRepos(token, url) {
+    if (url) {
+      return apiCommunicator.get(url, token)
+    } else {
+      return apiCommunicator.get('/user/repos', token, {});
+    }
   }
 
   static submitForm(formData, token) {

src/index.js

@@ -6,6 +6,7 @@ import './docfield.css';
 import './index.css';
 import './issue.css';
 import './milestone.css';
+import './reposelector.css';
 import './typography.css';
 
 ReactDOM.render(<GoalSetter />, document.getElementById('root'));

src/milestone.css

@@ -1,4 +1,4 @@
 .milestone {
-  background-color: #9fc3cb;
+  background: #9fc3cb;
   padding: 1rem;
 }

src/reposelector.css

@@ -0,0 +1,49 @@
+nav {
+  background: #9fc3cb;
+  padding: 1rem 0;
+  position: absolute;
+}
+
+.current-repo {
+  font-weight: bold;
+  padding: 0 1rem;
+}
+
+.dropdown-item {
+  padding: 0.25rem 1rem;
+}
+
+.dropdown-item:hover {
+  background: white;
+}
+
+.list-navigation {
+  display: flex;
+  justify-content: space-around;
+}
+
+.arrow {
+  flex: 1;
+  font-size: 3rem;
+  padding: 0.25rem 1rem;
+  text-align: center;
+}
+
+.arrow:hover {
+  background: #FFE5B4;
+}
+
+.disabled {
+  background: #f7f7f8;
+  color: #c2c2ca;
+}
+
+.disabled:hover {
+  background: #f7f7f8;
+}
+
+.repo-selector {
+  background: #9fc3cb;
+  margin: 1.5rem 0;
+  padding: 1rem 0;
+}