From 1d4a9c4dec8cd1e57bf4a7808e31d73747ef4aee Mon Sep 17 00:00:00 2001
From: Eric Tillberg <eric.tillberg@gmail.com>
Date: Sat, 13 Jul 2019 11:03:40 -0400
Subject: [PATCH 1/4] It's a start

---
 src/GoalsForm.js    |  5 +++--
 src/RepoSelector.js | 41 +++++++++++++++++++++++++++++++++++------
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/GoalsForm.js b/src/GoalsForm.js
index a87ec74..19bdc06 100644
--- a/src/GoalsForm.js
+++ b/src/GoalsForm.js
@@ -106,7 +106,7 @@ 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)
   }
 
@@ -201,7 +201,8 @@ class GoalsForm extends Component {
       <div>
         <RepoSelector
           repoNames={this.buildRepoNames()}
-          handleChange={this.handleChangeRepo} />
+          handleChange={this.handleChangeRepo}
+          currentRepo={this.state.currentRepo} />
         <form onSubmit={this.handleSubmit}>
           <MilestoneField
             value={this.state.milestone.title}
diff --git a/src/RepoSelector.js b/src/RepoSelector.js
index b704266..f967236 100644
--- a/src/RepoSelector.js
+++ b/src/RepoSelector.js
@@ -1,17 +1,46 @@
 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();
+  }
+
   renderOptions = () => {
-    return this.props.repoNames.map((name, i) => {
-      return (<option value={i} key={i}>{name}</option>)
-    });
+    if (this.state.visible) {
+      return this.props.repoNames.map((name, i) => {
+        return (
+          <div value={i} key={i} onClick={this.selectRepo}>
+            {name}
+          </div>
+        )
+      });
+    }
   }
 
   render() {
     return (
-      <select onChange={this.props.handleChange}>
-        { this.renderOptions() }
-      </select>
+      <nav>
+        <p>Select Repo</p>
+        <div onClick={this.toggleDropdown}>{this.props.currentRepo.name}</div>
+        {this.renderOptions()}
+      </nav>
     );
   }
 }

From 0d132c78679b0c704991ed5e68d8ed39a64a4f7b Mon Sep 17 00:00:00 2001
From: Eric Tillberg <eric.tillberg@gmail.com>
Date: Sat, 13 Jul 2019 12:59:04 -0400
Subject: [PATCH 2/4] Add some styling and arrows

---
 src/RepoSelector.js                     | 37 ++++++++++++++++++++----
 src/apiCommunicators/apiCommunicator.js |  2 +-
 src/index.js                            |  1 +
 src/milestone.css                       |  2 +-
 src/reposelector.css                    | 38 +++++++++++++++++++++++++
 5 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 src/reposelector.css

diff --git a/src/RepoSelector.js b/src/RepoSelector.js
index f967236..9a8a67f 100644
--- a/src/RepoSelector.js
+++ b/src/RepoSelector.js
@@ -22,25 +22,50 @@ class RepoSelector extends Component {
     this.toggleDropdown();
   }
 
+  back = () => {
+
+  }
+
+  forward = () => {
+
+  }
+
   renderOptions = () => {
+    let result;
+
     if (this.state.visible) {
-      return this.props.repoNames.map((name, i) => {
+      result = this.props.repoNames.map((name, i) => {
         return (
-          <div value={i} key={i} onClick={this.selectRepo}>
+          <div className="dropdown-item" value={i} key={i} onClick={this.selectRepo}>
             {name}
           </div>
         )
       });
+
+      return (
+        <nav>
+          {result}
+          <div className="list-navigation">
+            <span className="arrow" onClick={this.back}>
+              &lt;
+            </span>
+            <span className="arrow" onClick={this.forward}>
+              &gt;
+            </span>
+          </div>
+        </nav>
+      )
     }
+
+    return;
   }
 
   render() {
     return (
-      <nav>
-        <p>Select Repo</p>
-        <div onClick={this.toggleDropdown}>{this.props.currentRepo.name}</div>
+      <div className="repo-selector">
+        <div className="current-repo" onClick={this.toggleDropdown}>{this.props.currentRepo.name}</div>
         {this.renderOptions()}
-      </nav>
+      </div>
     );
   }
 }
diff --git a/src/apiCommunicators/apiCommunicator.js b/src/apiCommunicators/apiCommunicator.js
index 7f45665..990756f 100644
--- a/src/apiCommunicators/apiCommunicator.js
+++ b/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,
       )
diff --git a/src/index.js b/src/index.js
index 2cc83fb..afd47dc 100755
--- a/src/index.js
+++ b/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'));
diff --git a/src/milestone.css b/src/milestone.css
index 05bf315..f302fdb 100644
--- a/src/milestone.css
+++ b/src/milestone.css
@@ -1,4 +1,4 @@
 .milestone {
-  background-color: #9fc3cb;
+  background: #9fc3cb;
   padding: 1rem;
 }
diff --git a/src/reposelector.css b/src/reposelector.css
new file mode 100644
index 0000000..fdf1fe2
--- /dev/null
+++ b/src/reposelector.css
@@ -0,0 +1,38 @@
+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;
+}
+
+.list-navigation:hover {
+  background: #FFE5B4;
+}
+
+.arrow {
+  font-size: 3rem;
+  padding: 0.25rem 1rem;
+}
+
+.repo-selector {
+  background: #9fc3cb;
+  margin: 1.5rem 0;
+  padding: 1rem 0;
+}

From ad2807ab6c1b0d430f33632053800a88d7af568b Mon Sep 17 00:00:00 2001
From: Eric Tillberg <eric.tillberg@gmail.com>
Date: Sat, 13 Jul 2019 21:38:51 -0400
Subject: [PATCH 3/4] Pretty broken

---
 src/GoalsForm.js                              | 46 ++++++++++++++++---
 src/RepoSelector.js                           | 14 ++----
 src/apiCommunicators/gitHubApiCommunicator.js |  8 +++-
 src/reposelector.css                          | 19 ++++++--
 4 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/src/GoalsForm.js b/src/GoalsForm.js
index 19bdc06..18fd570 100644
--- a/src/GoalsForm.js
+++ b/src/GoalsForm.js
@@ -28,21 +28,27 @@ class GoalsForm extends Component {
       issueNumber: 1,
       errors: [],
       success: false,
+      nextRepoSelectorPageLink: null,
+      lastRepoSelectorPageLink: null
     };
   }
 
   componentDidMount() {
-    this.getRepos()
-      .then(repoData => this.setRepos(repoData))
-      .then(repo => this.getMilestonesAndIssues(repo))
-      .then(response => this.setMilestoneAndIssueNumbers(response))
+    this.getRepos();
   }
 
   getRepos() {
-    return gitHubApiCommunicator.getRepos(this.props.token);
+    const url = this.state.nextRepoSelectorPageLink
+
+    gitHubApiCommunicator.getRepos(this.props.token, url)
+      .then(repoData => this.setRepos(repoData))
+      .then(repo => this.getMilestonesAndIssues(repo))
+      .then(response => this.setMilestoneAndIssueNumbers(response))
   }
 
   setRepos(repoData) {
+    this.setPagination(repoData);
+
     const repos = repoData.data.map((repo) => {
       return {
         name: repo.name,
@@ -57,6 +63,22 @@ class GoalsForm extends Component {
     return currentRepo;
   }
 
+  setPagination(repoData) {
+    const links = repoData.headers.link.split(",")
+    const result = {}
+
+    links.map((link) => {
+      const key = JSON.parse(link.match(/".*"/g)[0])
+      const value = link.match(/[^<>]+/)[0]
+      result[key] = value
+    });
+
+    this.setState({
+      nextRepoSelectorPageLink: result.next,
+      lastRepoSelectorPageLink: result.last
+    });
+  }
+
   getMilestonesAndIssues(repo) {
     return gitHubApiCommunicator.getMilestonesAndIssues(
       this.props.token,
@@ -110,6 +132,16 @@ class GoalsForm extends Component {
     }, this.updateMilestoneAndIssue)
   }
 
+  pageRepoSelectorForward = () => {
+    //this.setState({repoSelectorPage: page});
+    this.getRepos()
+  }
+
+  pageRepoSelectorBack = () => {
+    //this.setState({repoSelectorPage: page});
+    this.getRepos()
+  }
+
   updateMilestoneAndIssue = () => {
     this.getMilestonesAndIssues(this.state.currentRepo)
       .then(response => this.setMilestoneAndIssueNumbers(response))
@@ -202,7 +234,9 @@ class GoalsForm extends Component {
         <RepoSelector
           repoNames={this.buildRepoNames()}
           handleChange={this.handleChangeRepo}
-          currentRepo={this.state.currentRepo} />
+          currentRepo={this.state.currentRepo}
+          back={this.pageRepoSelectorBack}
+          forward={this.pageRepoSelectorForward} />
         <form onSubmit={this.handleSubmit}>
           <MilestoneField
             value={this.state.milestone.title}
diff --git a/src/RepoSelector.js b/src/RepoSelector.js
index 9a8a67f..0bd2948 100644
--- a/src/RepoSelector.js
+++ b/src/RepoSelector.js
@@ -5,6 +5,8 @@ class RepoSelector extends Component {
     super(props);
 
     this.state = {
+      back: "disabled arrow",
+      forward: "arrow",
       visible: false
     }
   }
@@ -22,14 +24,6 @@ class RepoSelector extends Component {
     this.toggleDropdown();
   }
 
-  back = () => {
-
-  }
-
-  forward = () => {
-
-  }
-
   renderOptions = () => {
     let result;
 
@@ -46,10 +40,10 @@ class RepoSelector extends Component {
         <nav>
           {result}
           <div className="list-navigation">
-            <span className="arrow" onClick={this.back}>
+            <span className={this.state.back} onClick={this.props.back}>
               &lt;
             </span>
-            <span className="arrow" onClick={this.forward}>
+            <span className={this.state.forward} onClick={this.props.forward}>
               &gt;
             </span>
           </div>
diff --git a/src/apiCommunicators/gitHubApiCommunicator.js b/src/apiCommunicators/gitHubApiCommunicator.js
index fad5f86..b3216f3 100644
--- a/src/apiCommunicators/gitHubApiCommunicator.js
+++ b/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) {
diff --git a/src/reposelector.css b/src/reposelector.css
index fdf1fe2..7610c1b 100644
--- a/src/reposelector.css
+++ b/src/reposelector.css
@@ -22,13 +22,24 @@ nav {
   justify-content: space-around;
 }
 
-.list-navigation:hover {
-  background: #FFE5B4;
-}
-
 .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 {

From 35bf772f7bb61afb1cece6eca80f52c510a9b41d Mon Sep 17 00:00:00 2001
From: Eric Tillberg <eric.tillberg@gmail.com>
Date: Sun, 14 Jul 2019 08:58:52 -0400
Subject: [PATCH 4/4] It kinda basically works now!

---
 src/GoalsForm.js    | 44 +++++++++++++++++++++++++++-----------------
 src/RepoSelector.js | 22 ++++++++++++++++++----
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/GoalsForm.js b/src/GoalsForm.js
index 18fd570..cdfcb64 100644
--- a/src/GoalsForm.js
+++ b/src/GoalsForm.js
@@ -28,8 +28,8 @@ class GoalsForm extends Component {
       issueNumber: 1,
       errors: [],
       success: false,
-      nextRepoSelectorPageLink: null,
-      lastRepoSelectorPageLink: null
+      prevRepoSelectorPageLink: null,
+      nextRepoSelectorPageLink: null
     };
   }
 
@@ -37,9 +37,7 @@ class GoalsForm extends Component {
     this.getRepos();
   }
 
-  getRepos() {
-    const url = this.state.nextRepoSelectorPageLink
-
+  getRepos(url = null) {
     gitHubApiCommunicator.getRepos(this.props.token, url)
       .then(repoData => this.setRepos(repoData))
       .then(repo => this.getMilestonesAndIssues(repo))
@@ -65,17 +63,17 @@ class GoalsForm extends Component {
 
   setPagination(repoData) {
     const links = repoData.headers.link.split(",")
-    const result = {}
+    const result = {prev: null, next: null}
 
     links.map((link) => {
       const key = JSON.parse(link.match(/".*"/g)[0])
-      const value = link.match(/[^<>]+/)[0]
+      const value = link.match(/[^\s<>]+/)[0]
       result[key] = value
     });
 
     this.setState({
-      nextRepoSelectorPageLink: result.next,
-      lastRepoSelectorPageLink: result.last
+      prevRepoSelectorPageLink: result.prev,
+      nextRepoSelectorPageLink: result.next
     });
   }
 
@@ -132,14 +130,24 @@ class GoalsForm extends Component {
     }, this.updateMilestoneAndIssue)
   }
 
-  pageRepoSelectorForward = () => {
-    //this.setState({repoSelectorPage: page});
-    this.getRepos()
+  atBeginningOfRepoSelector = () => {
+    return this.state.prevRepoSelectorPageLink == null
+  }
+
+  atEndOfRepoSelector = () => {
+    return this.state.nextRepoSelectorPageLink == null
   }
 
-  pageRepoSelectorBack = () => {
-    //this.setState({repoSelectorPage: page});
-    this.getRepos()
+  pageRepoSelectorNext = () => {
+    if (this.state.nextRepoSelectorPageLink) {
+      this.getRepos(this.state.nextRepoSelectorPageLink);
+    }
+  }
+
+  pageRepoSelectorPrev = () => {
+    if (this.state.prevRepoSelectorPageLink) {
+      this.getRepos(this.state.prevRepoSelectorPageLink);
+    }
   }
 
   updateMilestoneAndIssue = () => {
@@ -235,8 +243,10 @@ class GoalsForm extends Component {
           repoNames={this.buildRepoNames()}
           handleChange={this.handleChangeRepo}
           currentRepo={this.state.currentRepo}
-          back={this.pageRepoSelectorBack}
-          forward={this.pageRepoSelectorForward} />
+          atBeginning={this.atBeginningOfRepoSelector()}
+          atEnd={this.atEndOfRepoSelector()}
+          prev={this.pageRepoSelectorPrev}
+          next={this.pageRepoSelectorNext} />
         <form onSubmit={this.handleSubmit}>
           <MilestoneField
             value={this.state.milestone.title}
diff --git a/src/RepoSelector.js b/src/RepoSelector.js
index 0bd2948..b6bb28b 100644
--- a/src/RepoSelector.js
+++ b/src/RepoSelector.js
@@ -5,8 +5,6 @@ class RepoSelector extends Component {
     super(props);
 
     this.state = {
-      back: "disabled arrow",
-      forward: "arrow",
       visible: false
     }
   }
@@ -24,6 +22,22 @@ class RepoSelector extends Component {
     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 = () => {
     let result;
 
@@ -40,10 +54,10 @@ class RepoSelector extends Component {
         <nav>
           {result}
           <div className="list-navigation">
-            <span className={this.state.back} onClick={this.props.back}>
+            <span className={this.prevClassName()} onClick={this.props.prev}>
               &lt;
             </span>
-            <span className={this.state.forward} onClick={this.props.forward}>
+            <span className={this.nextClassName()} onClick={this.props.next}>
               &gt;
             </span>
           </div>