🚨 (app)

src/components/AuthorizeUser.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="authorize">
+  <div class="authorize-user">
     <div v-if="hasError">An error occured when sign in...</div>
   </div>
 </template>
@@ -11,7 +11,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { signIn } from '@/modules/user/service/signIn'
 
 export default defineComponent({
-  name: 'Authorize',
+  name: 'AuthorizeUser',
   setup() {
     const route = useRoute()
     const router = useRouter()
@@ -22,13 +22,13 @@ export default defineComponent({
 
     onBeforeMount(async () => {
       if (code) {
-        const body = await signIn(code.toString())
+        const token = await signIn(code.toString())
 
-        if ('error' in body) {
+        if ('error' in token) {
           hasError.value = true
         } else {
-          body.access_token
+          token.access_token
-          saveCredentials(body)
+          saveCredentials(token)
         }
 
         router.replace({ name: 'Home' })

src/components/FluxNote.vue

@@ -105,10 +105,10 @@ export default defineComponent({
 
     watch(
       renderedContent,
-      () =>
+      async () => {
-        nextTick(() => {
+        await nextTick()
-          listenToClick()
+        listenToClick()
-        }),
+      },
       { immediate: true }
     )
 

src/router/router.ts

@@ -1,13 +1,8 @@
 import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
 
-import Home from '@/views/Home.vue'
+import Home from '@/views/HomeApp.vue'
 
 const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import(/* webpackChunkName: "login" */ '@/views/Login.vue')
-  },
   {
     path: '/repo-list',
     name: 'RepoList',
@@ -62,7 +57,8 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/about',
     name: 'About',
-    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
+    component: () =>
+      import(/* webpackChunkName: "about" */ '@/views/AboutApp.vue')
   },
   {
     path: '/:catchAll(.*)',

src/views/HomeApp.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!user || !repo" class="home content">
-    <authorize class="authorize" />
+    <authorize-user class="authorize" />
     <new-version class="new-version" />
     <welcome-world />
   </div>
@@ -11,7 +11,7 @@
 import { defineComponent, defineAsyncComponent, computed } from 'vue'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import NewVersion from '@/components/NewVersion.vue'
-import Authorize from '@/components/Authorize.vue'
+import AuthorizeUser from '@/components/AuthorizeUser.vue'
 import { useComputeBacklinks } from '@/hooks/useComputeBacklinks.hook'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
@@ -21,12 +21,12 @@ const WelcomeWorld = defineAsyncComponent(
 )
 
 export default defineComponent({
-  name: 'Home',
+  name: 'HomeApp',
   components: {
     WelcomeWorld,
     FluxNote,
     NewVersion,
-    Authorize
+    AuthorizeUser
   },
   props: {
     user: { type: String, required: false, default: '' },

src/views/Login.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="login content">
-    <button class="button is-white go-back" @click="back">
-      <img src="@/assets/icons/dark-left-arrow.svg" alt="back" />
-    </button>
-    <div class="columns is-centered">
-      <div class="column is-one-third">
-        <form @submit.prevent>
-          <div class="field is-horizontal">
-            <div class="field-label">
-              <label class="label">Username</label>
-            </div>
-            <div class="field-body">
-              <div class="control">
-                <input
-                  v-model="user"
-                  class="input"
-                  type="text"
-                  placeholder="GitHub username"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="field is-horizontal">
-            <div class="field-label">
-              <label class="label">Token</label>
-            </div>
-            <div class="field-body">
-              <div class="control">
-                <input
-                  v-model="token"
-                  class="input"
-                  type="password"
-                  placeholder="Personal Access Token"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="action-container">
-            <button
-              class="button is-primary"
-              type="submit"
-              @click="saveCredentials(user, token)"
-            >
-              register token
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-    <div class="columns is-centered">
-      <div class="column is-one-third">
-        <p>
-          Want to know how to login with a personal access token? Take a look at
-          <a
-            href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token"
-            target="_blank"
-            rel="noopener noreferrer"
-            >GitHub documentation</a
-          >.
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { useRouter } from 'vue-router'
-
-export default defineComponent({
-  name: 'Login',
-  setup() {
-    const { push } = useRouter()
-    const { username, accessToken, ...form } = useGitHubLogin()
-    const user = ref(username.value ?? '')
-    const token = ref(accessToken.value ?? '')
-
-    return {
-      ...form,
-      user,
-      token,
-      back: () =>
-        push({
-          name: 'Home'
-        })
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.login {
-  flex: 1;
-
-  .go-back {
-    margin: 10px 0;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-
-    .field-label {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
-
-    .field-body {
-      flex: 1;
-    }
-
-    .action-container {
-      margin: auto;
-    }
-  }
-}
-</style>

src/views/RepoList.vue

@@ -34,9 +34,8 @@
                     name: 'Home',
                     params: { user: username, repo: repo.name }
                   }"
+                  >{{ repo.name }}</router-link
                 >
-                  {{ repo.name }}
-                </router-link>
               </td>
             </tr>
           </tbody>
@@ -66,9 +65,8 @@
                     name: 'Home',
                     params: { user: username, repo: repo.name }
                   }"
+                  >{{ repo.name }}</router-link
                 >
-                  {{ repo.name }}
-                </router-link>
               </td>
             </tr>
           </tbody>
@@ -91,12 +89,10 @@ export default defineComponent({
   setup() {
     const { username } = useGitHubLogin()
     const { isReady } = useRepos()
-    const {
+    // eslint-disable-next-line prettier-vue/prettier
-      favoriteRepos,
+    const { favoriteRepos, otherRepos, favoriteCheckboxes, toggleCheckbox } =
-      otherRepos,
+      // eslint-disable-next-line prettier-vue/prettier
-      favoriteCheckboxes,
+      useRepoList()
-      toggleCheckbox
-    } = useRepoList()
 
     return {
       isReady,