aragonone · sohkai · Mar 18, 2020 · Mar 18, 2020
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1,6 @@
+# Personal Github token, to avoid API throttling or to access private repos.
+# Create a token with the `repo` scope at https://github.com/settings/tokens.
+#
+# !!! NOTE: this is NOT meant for production use; you should only supply this
+#           option during development!
+GITHUB_TOKEN=
diff --git a/README.md b/README.md
@@ -1,4 +1,12 @@
-# Aragon Pull Requests
+# Pull Request Dashboard
+
+Dashboard for keeping track of Github pull requests across repos, users, and organizations!
+
+## Configuration
+
+### Development
+
+- `GITHUB_TOKEN`: Personal Github token ([create one with the `repo` scope](https://github.com/settings/tokens), to decrease API throttling and allow  access of private repos during development. **NOT** meant for production usage.
 
 ## Develop
 
@@ -11,6 +19,12 @@ Then open `public/index.html` in your browser.
 
 ## Publish
 
+This repo is automatically published for Aragon One via [Zeit Now](https://zeit.co/aragonone/pull-requests).
+
+If you would like to re-configure it and host a version for your own repos, you can either fork this
+repo and install the [Zeit Now Github integration](https://github.com/zeit/now) in your fork, or
+manually publish through `now`:
+
 ```console
 now
 ```
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
+    "dotenv": "^8.2.0",
     "rollup": "^2.0.6",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.3.0"

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,3 +1,5 @@
+require('dotenv').config()
+
 const commonjs = require('rollup-plugin-commonjs')
 const resolve = require('@rollup/plugin-node-resolve')
 const copy = require('rollup-plugin-copy')
@@ -17,6 +19,9 @@ module.exports = {
     copy({
       targets: [{ src: 'src/index.html', dest: BUILD_DIR }],
     }),
-    replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.GITHUB_TOKEN': JSON.stringify(process.env.GITHUB_TOKEN),
+    }),
   ],
 }
diff --git a/src/Layout.js b/src/Layout.js
@@ -1,6 +1,6 @@
 import { css, html } from './utils'
 
-export function Layout({ title, options, columns }) {
+export function Layout({ title, hasToken, options, columns }) {
   return html`
     <main
       class=${css`
@@ -16,15 +16,43 @@ export function Layout({ title, options, columns }) {
           padding: 1rem;
         `}
       >
-        <h1
+        <div
           class=${css`
-            font-size: 1.3rem;
-            font-weight: 400;
+            display: flex;
+            align-items: center;
+            padding: 10px 0;
+            min-height: 55px;
           `}
         >
-          ${title}
-        </h1>
-
+          <h1
+            class=${css`
+              font-size: 1.3rem;
+              font-weight: 400;
+            `}
+          >
+            ${title}
+          </h1>
+          ${hasToken && (
+            html`
+              <button
+                class=${css`
+                  height: 100%;
+                  padding: 10px 10px;
+                  margin-left: auto;
+                  border-radius: 0.25rem;
+                  outline: 0;
+                  background: #111;
+                  :active,
+                  :focus {
+                    background: #1a1a1a;
+                  }
+                `}
+              >
+                Set Github token
+              </button>
+            `
+          )}
+        </div>
         ${options}
       </div>
 

diff --git a/src/index.html b/src/index.html
@@ -17,10 +17,16 @@
         font-size: 16px;
         line-height: 1.5;
       }
+      h1, h2, h3, h4, h5 {
+        margin: 0;
+      }
       a {
         color: inherit;
         text-decoration: none;
       }
+      button {
+        color: #ddd;
+      }
     </style>
   </head>
   <body>

diff --git a/src/index.js b/src/index.js
@@ -7,7 +7,14 @@ import { OptionsGroup } from './OptionsGroup'
 
 const ONE_DAY = 24 * 60 * 60 * 1000
 
-const BASE_API_URL = 'https://api.github.com'
+const BASE_GITHUB_API_URL = 'https://api.github.com'
+const LOCAL_GITHUB_TOKEN_KEY = 'GITHUB_TOKEN'
+const GITHUB_TOKEN = localStorage.getItem(LOCAL_GITHUB_TOKEN_KEY) || process.env.GITHUB_TOKEN
+const GITHUB_API_HEADERS = {
+  // See https://developer.github.com/v3/#current-version
+  accept: 'application/vnd.github.v3+json',
+  authorization: GITHUB_TOKEN ? `token ${GITHUB_TOKEN}` : null
+}
 
 const REPOS = [
   'aragon/aragon',
@@ -27,7 +34,9 @@ const GROUPS = [
 ]
 
 async function getRepoPrs(repo) {
-  const res = await fetch(`${BASE_API_URL}/repos/${repo}/pulls`)
+  const res = await fetch(`${BASE_GITHUB_API_URL}/repos/${repo}/pulls`, {
+    headers: GITHUB_API_HEADERS,
+  })
   const prs = await res.json()
   return prs.map(pr => {
     const reviewers = pr.requested_reviewers.map(user => user.login)
@@ -72,9 +81,9 @@ function useFetchPrs() {
 }
 
 function App() {
-  const [prs, loading] = useFetchPrs()
   const [repos, setRepos] = useState(REPOS.map(repo => [repo, true]))
   const [reviewers, setReviewers] = useState([])
+  const [prs, loading] = useFetchPrs()
 
   const changeOption = useCallback((groupName, optionName, check) => {
     let setFn = null
@@ -152,6 +161,7 @@ function App() {
   return html`
     <${Layout}
       title="Aragon Pull Requests"
+      hasToken=${Boolean(GITHUB_TOKEN)}
       options=${[
         ['Repos', repos],
         ['Reviewers', reviewers],

diff --git a/yarn.lock b/yarn.lock
@@ -346,6 +346,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+dotenv@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
+  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+
 emotion@^10.0.27:
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"