perf(app): sync github settings

LarchLiu · Jul 15, 2023 · 5a64060 · 5a64060 · vercel · Jul 15, 2023
1 parent 22f5847
commit 5a64060
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 7 deletions.
diff --git a/app/extension/chrome/locales/en.yml b/app/extension/chrome/locales/en.yml
@@ -19,6 +19,9 @@ settings:
   syncSettings: Sync
   syncBookmarks: Bookmarks
   syncGithub: Github
+  githubUser: User
+  githubUserPlaceholder: Default - Token's owner
+  githubError: Please set Github Token
   de: German
   en: English
   es: Spanish

diff --git a/app/extension/chrome/locales/zh-CN.yml b/app/extension/chrome/locales/zh-CN.yml
@@ -19,6 +19,9 @@ settings:
   syncSettings: 同步设置
   syncBookmarks: 书签 
   syncGithub: Github
+  githubUser: 用户
+  githubUserPlaceholder: 默认 - Token 的拥有者
+  githubError: 请设置 Github Token
   de: 德语
   en: 英语
   es: 西班牙语

diff --git a/app/extension/chrome/src/background/index.ts b/app/extension/chrome/src/background/index.ts
@@ -268,7 +268,7 @@ chrome.runtime.onMessage.addListener(async (request: ContentRequest, sender, sen
 
       do {
         if (githubUser)
-          api = `https://api.github.com/users/LarchLiu/starred?per_page=${maxGithubPerPage}&page=${page}`
+          api = `https://api.github.com/users/${githubUser}/starred?per_page=${maxGithubPerPage}&page=${page}`
         else
           api = `https://api.github.com/user/starred?per_page=${maxGithubPerPage}&page=${page}`
         const res = await fetch(api, {
@@ -288,7 +288,7 @@ chrome.runtime.onMessage.addListener(async (request: ContentRequest, sender, sen
       } while(starredCountOfPage === maxGithubPerPage)
       fetchGithubStarredEnd = true
       githubCount = githubStarred.length
-      
+
       sendSyncGithubStatus()
       syncGithubToDB()
       sendResponse({ message: 'handling save to DB' })

diff --git a/app/extension/chrome/src/popup/App.vue b/app/extension/chrome/src/popup/App.vue
@@ -31,6 +31,8 @@ const syncGithubFailCount = ref(0)
 const syncMarksEnd = ref(false)
 const syncGithubEnd = ref(false)
 const fetchGithubStarredEnd = ref(true)
+const showGithubSetting = ref(false)
+const showGithubError = ref(false)
 let bookmarks: string[] = []
 let starTimer: NodeJS.Timeout
 let bubblyTimer: NodeJS.Timeout
@@ -121,8 +123,9 @@ function onSyncClick() {
   showLanguage.value = false
   showSync.value = !showSync.value
   if (showSync.value) {
-    chrome.storage.sync.get(['githubToken'], (result) => {
+    chrome.storage.sync.get(['githubToken', 'githubUser'], (result) => {
       githubToken.value = result.githubToken || ''
+      githubUser.value = result.githubUser || ''
     })
   }
 }
@@ -131,6 +134,10 @@ function saveGithubToken() {
   chrome.storage.sync.set({ githubToken: githubToken.value})
 }
 
+function saveGithubUser() {
+  chrome.storage.sync.set({ githubUser: githubUser.value})
+}
+
 function getBookmarks(tree: chrome.bookmarks.BookmarkTreeNode[]) {
   tree.map((item) => {
     if (item.children) {
@@ -181,6 +188,7 @@ function onBookmarksSync() {
 
 async function onGithubSync() {
   if (githubToken.value) {
+    showGithubError.value = false
     githubCount.value = 0
     githubIdx.value = 0
     fetchGithubStarredEnd.value = false
@@ -194,6 +202,9 @@ async function onGithubSync() {
       },
     )
   }
+  else {
+    showGithubError.value = true
+  }
 }
 
 function genRandomColor() {
@@ -400,7 +411,7 @@ onMounted(() => {
         <div flex items-cente>
           <div v-if="marksIdx < marksCount" flex items-center>
             <div cursor-pointer @click="sendSyncBookmarksState()">
-              <img class="hover:bg-#E6E6E6 hover:border hover:rounded-full" :src="stopSyncMarks ? iconPlay : iconStop" height="18">
+              <img class="hover:bg-#E6E6E6 hover:border hover:rounded-full" :src="stopSyncMarks ? iconPlay : iconStop" height="16">
             </div>
           </div>
           <div ml-2 cursor-pointer @click="onBookmarksSync">
@@ -429,11 +440,14 @@ onMounted(() => {
       <div my-2 flex justify-between items-center>
         <div flex items-center>
           <label class="inline-block h-5" pr-2>{{ t('settings.syncGithub') }}</label>
+          <div cursor-pointer @click="showGithubSetting = !showGithubSetting">
+            <img class="hover:bg-#E6E6E6 hover:border hover:rounded-full" :src="iconSetting" height="14">
+          </div>
         </div>
         <div flex items-center>
           <div v-if="fetchGithubStarredEnd && githubIdx < githubCount">
             <div cursor-pointer @click="sendSyncGithubState()">
-              <img class="hover:bg-#E6E6E6 hover:border hover:rounded-full" :src="stopSyncGithub ? iconPlay : iconStop" height="18">
+              <img class="hover:bg-#E6E6E6 hover:border hover:rounded-full" :src="stopSyncGithub ? iconPlay : iconStop" height="16">
             </div>
           </div>
           <div cursor-pointer @click="onGithubSync">
@@ -472,8 +486,18 @@ onMounted(() => {
           </div>
         </el-tooltip>
       </div>
-      <div mt-2>
-        <input v-model="githubToken" text-12px placeholder="Github Token" type="password" name="githubToken" @change="saveGithubToken">
+      <div v-if="showGithubError && !githubToken">
+        <span text-12px text-red>{{ t('settings.githubError') }}</span>
+      </div>
+      <div v-if="showGithubSetting">
+        <div my-2 flex justify-between items-center>
+          <label class="inline-block h-5" pr-2>Token <span text-red>*</span></label>
+          <input v-model="githubToken" text-12px placeholder="Github Token" type="password" name="githubToken" @change="saveGithubToken">
+        </div>
+        <div my-2 flex justify-between items-center>
+          <label class="inline-block h-5" pr-2>{{ t('settings.githubUser') }}</label>
+          <input v-model="githubUser" text-12px :placeholder="t('settings.githubUserPlaceholder')" name="githubUser" @change="saveGithubUser">
+        </div>
       </div>
     </div>
   </div>