From f7f6b105e4be2ba2519569a224c1f289b50608a4 Mon Sep 17 00:00:00 2001
From: Brett Sun <qisheng.brett.sun@gmail.com>
Date: Wed, 18 Mar 2020 13:25:03 +0100
Subject: [PATCH] Group repos by organization / user name

---
 src/OptionsGroup.js |  7 ++++--
 src/index.js        | 61 +++++++++++++++++++++++++++++++++++----------
 2 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/src/OptionsGroup.js b/src/OptionsGroup.js
index 21a6b99..5aef0d0 100644
--- a/src/OptionsGroup.js
+++ b/src/OptionsGroup.js
@@ -2,6 +2,7 @@ import { css, html } from './utils'
 
 export function OptionsGroup({
   name: groupName,
+  settingName,
   options = [],
   onOptionChange = () => null,
 }) {
@@ -38,7 +39,7 @@ export function OptionsGroup({
       >
         ${options.length > 0
           ? options.map(
-              ([name, checked]) => html`
+              ([name, checked, optionName]) => html`
                 <label
                   class=${css`
                     display: flex;
@@ -58,7 +59,9 @@ export function OptionsGroup({
                   <input
                     type="checkbox"
                     checked=${checked}
-                    onClick=${() => onOptionChange(groupName, name, !checked)}
+                    onClick=${() =>
+                      onOptionChange(settingName || groupName, optionName || name, !checked)
+                    }
                   />
                   <span
                     class=${css`
diff --git a/src/index.js b/src/index.js
index 805ebbb..ba239bf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -98,6 +98,53 @@ function App() {
     }
   }, [])
 
+  const options = useMemo(
+    () => {
+      const reviewerOptions = html`
+        <${OptionsGroup}
+          name="Reviewers"
+          onOptionChange=${changeOption}
+          options=${reviewers}
+        />
+      `
+      // Get user / organization grouping of repos
+      const repoByOrgs = [...repos.reduce((orgMap, [name, checked]) => {
+        const [orgName, repoName] = name.split('/')
+        const repoSet = orgMap.get(orgName) || []
+        repoSet.push([repoName, checked, name])
+        orgMap.set(orgName, repoSet)
+
+        return orgMap
+      }, new Map())]
+      const repoOptions = html`
+        <div
+          class=${css`
+            font-size: 0.8rem;
+          `}
+        >
+          Repos:
+          <div
+            class=${css`
+              padding-left: 20px;
+            `}
+          >
+            ${repoByOrgs.map(([orgName, orgRepos]) => html`
+                <${OptionsGroup}
+                  name=${orgName}
+                  settingName="Repos"
+                  onOptionChange=${changeOption}
+                  options=${orgRepos}
+                />
+              `
+            )}
+          </div>
+          </div>
+      `
+
+      return [repoOptions, reviewerOptions]
+    }, [repos, reviewers]
+  )
+
   const groups = useMemo(
     () =>
       GROUPS.reduce(
@@ -155,19 +202,7 @@ function App() {
     <${Layout}
       title="Aragon Pull Requests"
       hasToken=${Boolean(GITHUB_TOKEN)}
-      options=${[
-        ['Repos', repos],
-        ['Reviewers', reviewers],
-      ].map(
-        ([name, options]) =>
-          html`
-            <${OptionsGroup}
-              name=${name}
-              onOptionChange=${changeOption}
-              options=${options}
-            />
-          `
-      )}
+      options=${options}
       columns=${groups.map(
         ([days, emoji, prs]) =>
           html`