From 2bd9cb8dd01ed8ae9b03beac39196ae41cfc0f40 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Fri, 19 Mar 2021 23:54:20 +0100
Subject: [PATCH] =?UTF-8?q?:sparkles:=20(private=20repo)=20display=20if=20?=
 =?UTF-8?q?fav=20repo=20is=20priva=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useRepos.hook.ts |  12 ++--
 src/views/RepoList.vue     | 116 +++++++++++++++++++++++--------------
 2 files changed, 78 insertions(+), 50 deletions(-)

diff --git a/src/hooks/useRepos.hook.ts b/src/hooks/useRepos.hook.ts
index 6720d4d..5ccdbe0 100644
--- a/src/hooks/useRepos.hook.ts
+++ b/src/hooks/useRepos.hook.ts
@@ -19,11 +19,13 @@ export const useRepos = () => {
       per_page: 100
     })
 
-    return repoList.data.items.map((item) => ({
-      id: `${item.id}`,
-      name: item.name,
-      isPrivate: item.private
-    }))
+    return repoList.data.items
+      .map((item) => ({
+        id: `${item.id}`,
+        name: item.name,
+        isPrivate: item.private
+      }))
+      .sort((a, b) => (a.name < b.name ? -1 : 1))
   }, [])
 
   return {
diff --git a/src/views/RepoList.vue b/src/views/RepoList.vue
index a5e6db0..9cc3402 100644
--- a/src/views/RepoList.vue
+++ b/src/views/RepoList.vue
@@ -1,55 +1,77 @@
 <template>
   <div class="repo-list">
-    <go-back />
     <h1 class="title is-1">Repositories</h1>
+    <go-back />
     <span v-if="!isReady">loading...</span>
     <div v-else class="columns is-centered">
       <div class="column is-one-third">
-        <table class="table is-striped is-hoverable is-fullwidth">
-          <tr v-for="repo in favoriteRepos" :key="repo.id">
-            <td>
-              <input
-                type="checkbox"
-                name="favorites"
-                :value="repo.id"
-                :checked="favoriteCheckboxes.includes(repo.id)"
-                @click="toggleCheckbox(repo)"
-              />
-            </td>
-            <td>
-              <span v-if="repo.isPrivate">🔏</span>
+        <table
+          class="table is-striped is-hoverable"
+          v-if="favoriteRepos.length > 0"
+        >
+          <thead>
+            <tr>
+              <th></th>
+              <th>Favorites</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="repo in favoriteRepos" :key="repo.id">
+              <td>
+                <input
+                  type="checkbox"
+                  name="favorites"
+                  :value="repo.id"
+                  :checked="favoriteCheckboxes.includes(repo.id)"
+                  @click="toggleCheckbox(repo)"
+                />
+              </td>
+              <td>
+                <span v-if="repo.isPrivate">🔏</span>
 
-              <router-link
-                :to="{
-                  name: 'Home',
-                  params: { user: username, repo: repo.name }
-                }"
-              >
-                {{ repo.name }}
-              </router-link>
-            </td>
-          </tr>
-          <tr v-for="repo in otherRepos" :key="repo.id">
-            <td>
-              <input
-                type="checkbox"
-                name="favorites"
-                :value="repo.id"
-                :checked="favoriteCheckboxes.includes(repo.id)"
-                @click="toggleCheckbox(repo)"
-              />
-            </td>
-            <td>
-              <router-link
-                :to="{
-                  name: 'Home',
-                  params: { user: username, repo: repo.name }
-                }"
-              >
-                {{ repo.name }}
-              </router-link>
-            </td>
-          </tr>
+                <router-link
+                  :to="{
+                    name: 'Home',
+                    params: { user: username, repo: repo.name }
+                  }"
+                >
+                  {{ repo.name }}
+                </router-link>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <br v-if="favoriteRepos.length > 0" />
+        <table class="table is-striped is-hoverable">
+          <thead>
+            <tr>
+              <th></th>
+              <th>Repos</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="repo in otherRepos" :key="repo.id">
+              <td>
+                <input
+                  type="checkbox"
+                  name="favorites"
+                  :value="repo.id"
+                  :checked="favoriteCheckboxes.includes(repo.id)"
+                  @click="toggleCheckbox(repo)"
+                />
+              </td>
+              <td>
+                <router-link
+                  :to="{
+                    name: 'Home',
+                    params: { user: username, repo: repo.name }
+                  }"
+                >
+                  {{ repo.name }}
+                </router-link>
+              </td>
+            </tr>
+          </tbody>
         </table>
       </div>
     </div>
@@ -95,5 +117,9 @@ export default defineComponent({
   text-align: center;
 
   overflow-y: auto;
+
+  table {
+    margin: auto;
+  }
 }
 </style>