Bugfix/UI

src/background/alarms.js

@@ -1,9 +1,16 @@
 import { RELEASE_CHECK_ALARM_NAME } from '@/constants'
-import { __RepoController } from '@/store/modules/repositories/actions'
-import { checkReleases } from './checkReleases'
 
-chrome.alarms.onAlarm.addListener(async alarm => {
-  if (alarm.name !== RELEASE_CHECK_ALARM_NAME) return
-  const repos = await __RepoController.getActiveRepos()
-  repos.forEach(repo => checkReleases(repo, false))
-})
+// one-time initial release check
+export const initialAlarm = () => {
+  browser.alarms.create(RELEASE_CHECK_ALARM_NAME, {
+    delayInMinutes: 0
+  })
+}
+
+// regular repeating release chceck
+export const initRepeatingAlarm = async (requestInterval) => {
+  browser.alarms.clearAll()
+  browser.alarms.create(RELEASE_CHECK_ALARM_NAME, {
+    periodInMinutes: requestInterval
+  })
+}

src/background/badge.js

@@ -2,7 +2,8 @@ import { isNumber } from '@/utils/typeChecker'
 
 export default {
   async set (number) {
-    if (!isNumber(number) || number <= 0) number = '!'
+    if (!isNumber(number)) number = '!'
+    if (number <= 0) return this.clear()
     browser.browserAction.setBadgeText({ text: number.toString() })
   },
   clear () {

src/background/checkReleases.js

@@ -11,7 +11,7 @@ export const checkReleases = async (repo, initMode = false) => {
   const releases = await githubAPI.fetchWithoutBase(repo.url + '/releases')
   if (!isArray(releases)) return
 
-  releases.forEach(async release => {
+  for (const release of releases) {
     try {
       await __ReleaseController.create({
         id: release.id,
@@ -31,15 +31,13 @@ export const checkReleases = async (repo, initMode = false) => {
           (newReleases, repo) => newReleases + repo.newReleasesCount,
           0
         )
-        showNotification(repo.name)
+        showNotification(repo.name, release.html_url)
         badge.set(allNewCount)
       }
     } catch (error) {
       if (error.name === 'ConstraintError') {
         console.info('Release already exists')
-        return
-      }
-      console.error(error)
+      } else console.error(error)
     }
-  })
+  }
 }

src/background/csConnect.js

@@ -1,35 +1,39 @@
 import { __RepoController } from '@/store/modules/repositories/actions'
 import { checkReleases } from './checkReleases'
 
-chrome.runtime.onMessage.addListener(async function (
-  request,
-  sender,
-  sendResponse
-) {
+async function requestCheck (request) {
   if (request.requestType === 'checkWatchStatus') {
     try {
       const exists = await __RepoController.getOne(request.id)
-      sendResponse({ exists: Boolean(exists), success: true })
+      return { exists: Boolean(exists), success: true }
     } catch (error) {
       console.error('erorr in db!', error)
-      sendResponse({ exists: false, success: false })
+      return { exists: false, success: false }
     }
-    return
   }
 
   if (request.requestType === 'updateRepo') {
     try {
       if (request.isAdding) {
         delete request.isAdding
-        await __RepoController.create(request)
+        __RepoController.create(request)
         checkReleases(request, true)
       } else {
-        await __RepoController.delete(request.id)
+        __RepoController.delete(request.id)
       }
-      sendResponse({ success: true })
+      return { success: true }
     } catch (error) {
       console.error('erorr in db!', error)
-      sendResponse({ success: false })
+      return { success: false }
     }
   }
+}
+
+chrome.runtime.onMessage.addListener(function (
+  request,
+  sender,
+  sendResponse
+) {
+  requestCheck(request).then(sendResponse)
+  return true
 })

src/background/index.js

@@ -1,27 +1,27 @@
-import './alarms'
+import { initialAlarm, initRepeatingAlarm } from './alarms'
 import './csConnect'
+import { __RepoController } from '@/store/modules/repositories/actions'
+import { checkReleases } from './checkReleases'
 import { RELEASE_CHECK_ALARM_NAME } from '@/constants'
 import { __SettingsController } from '@/store/modules/settings/actions'
 
 chrome.runtime.onInstalled.addListener(async function () {
   browser.browserAction.setBadgeBackgroundColor({ color: '#fcc' })
 
+  chrome.alarms.onAlarm.addListener(async alarm => {
+    if (alarm.name !== RELEASE_CHECK_ALARM_NAME) return
+    const repos = await __RepoController.getActiveRepos()
+    repos.forEach(repo => checkReleases(repo, false))
+  })
+
   chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
     if (changeInfo.status === 'complete') {
       chrome.tabs.sendMessage(tabId, {
         message: 'TabUpdated'
       })
     }
   })
-
-  // one-time initial release check
-  browser.alarms.create(RELEASE_CHECK_ALARM_NAME, {
-    delayInMinutes: 0
-  })
-
-  // regular repeating release chceck
   const settings = await __SettingsController.getSettings()
-  browser.alarms.create(RELEASE_CHECK_ALARM_NAME, {
-    periodInMinutes: settings.requestInterval
-  })
+  initialAlarm()
+  initRepeatingAlarm(settings.requestInterval || 15)
 })

src/background/notifications.js

@@ -1,7 +1,7 @@
 import { __SettingsController } from '@/store/modules/settings/actions'
 import badge from './badge'
 
-export async function showNotification (repoName) {
+export async function showNotification (repoName, repoLink) {
   badge.set()
 
   const settings = await __SettingsController.getSettings()
@@ -12,6 +12,12 @@ export async function showNotification (repoName) {
     message: 'Check it out in Release Watcher',
     iconUrl: '/icons/128_warning.png',
     type: 'basic',
-    silent: settings.notificationSound || false
+    silent: Boolean(settings.notificationSound) || false,
+    buttons: repoLink ? [{ title: 'Go to GutHub' }] : null
+  })
+
+  browser.notifications.onButtonClicked.addListener((id, index) => {
+    browser.notifications.clear(id)
+    browser.tabs.create({ active: true, url: repoLink })
   })
 }

src/content-scripts/bgConnect.js

@@ -18,8 +18,9 @@ export const updateRepo = isAdding => {
       requestType: 'updateRepo',
       isAdding,
       id,
-      url: GITHUB_API_URL + pathName + +'/releases',
+      url: GITHUB_API_URL + pathName,
       name,
+      disabled: 0,
       language: getMostPopularLanguage(),
       newReleasesCount: 0
     },

src/content-scripts/iconInjection/index.js

@@ -9,7 +9,7 @@ import {
 } from './styleLogic'
 import { isWatching, updateRepo } from '../bgConnect'
 import { watchIcon, watchDisabledIcon } from '@/utils/getAssets'
-import { releasesHeader } from '../pageElements'
+import { releasesHeader, privateRepoCheck } from '../pageElements'
 
 let watchState = false
 const iconContainer = document.createElement('div')
@@ -43,6 +43,8 @@ const toggleIcon = () => {
 }
 
 export async function init () {
+  if (privateRepoCheck()) return
+
   iconContainer.appendChild(text)
   try {
     applyStylesFromObj(iconContainerStyles, iconContainer)

src/content-scripts/iconInjection/styleLogic.js

@@ -6,17 +6,17 @@ const applyStylesFromObj = (obj, target) => {
   })
 }
 const releasesHeaderStyles = {
-  display: 'flex',
-  alignItems: 'flex-end'
+  display: 'flex'
 }
 
 const iconContainerStyles = {
   marginLeft: '5px',
   minWidth: '24px',
-  height: '20px',
+  height: '19px',
   cursor: 'pointer',
   display: 'flex',
-  color: 'var(--color-btn-primary-icon)'
+  color: 'var(--color-btn-primary-icon)',
+  alignSelf: 'center'
 }
 
 const iconContainerStylesPrimary = {

src/content-scripts/pageElements.js

@@ -30,3 +30,12 @@ export const getMostPopularLanguage = () => {
     return 'no language found'
   }
 }
+
+export const privateRepoCheck = () => {
+  try {
+    return document.getElementsByTagName('h1')[0].innerText.endsWith('Private')
+  } catch (error) {
+    console.error('h1 tag not found')
+    return false
+  }
+}

src/models/ReleasesModel.js

@@ -46,7 +46,7 @@ export default class ReleasesModel extends BaseModel {
         body: {
           schema: {
             type: String,
-            required: true
+            required: false
           }
         }
       },

src/popup/App.vue

@@ -47,14 +47,14 @@ html {
 
   body {
     margin: 0;
-    padding: 14px 10px;
     height: 100%;
   }
 
   .__app__ {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    padding: 14px 10px;
+    min-height: 100%;
   }
 }
 </style>

src/popup/components/home/TheReposList.vue

@@ -10,14 +10,18 @@
       class="repo__row"
     >
       <el-link
-        :href="repo.url"
+        @click="onViewRepo(repo)"
         :title="repo.name"
         target="_blank"
         class="repo__name"
       >
         {{ repo.name }}
       </el-link>
 
+      <el-tag size="mini" class="repo__language-tag" :color="languageTagColor(repo.language)">
+        {{ repo.language }}
+      </el-tag>
+
       <el-button-group>
         <el-button
           size="small"
@@ -65,6 +69,25 @@ export default {
 
     onDeleteRepo (id) {
       this.$emit('onRemoveRepo', id)
+    },
+
+    languageTagColor (langName) {
+      switch (langName.toLowerCase()) {
+        case 'javascript':
+          return '#F0DB4F'
+        case 'typescript':
+          return '#2D79C7'
+        case 'vue':
+          return '#41B883'
+        case 'html':
+          return '#E34C26'
+        case 'python':
+          return '#FFDB4F'
+        case 'css':
+          return '#563D7C'
+        default:
+          return '#ccc'
+      }
     }
   }
 }
@@ -103,5 +126,11 @@ export default {
   &__name {
     max-width: 200px;
   }
+
+  &__language-tag {
+    margin-left: auto;
+    margin-right: .5rem;
+    color: white;
+  }
 }
 </style>

src/popup/components/home/TheUrlAdder.vue

@@ -1,42 +1,35 @@
 <template>
-  <div class="TheUrlAdder">
-
+  <el-form class="TheUrlAdder">
     <el-input
       class="input"
       placeholder="/owner/name"
-      :value="urlInput"
-      @input="setRepoUrl"
+      v-model="urlInput"
       clearable
     >
-      <template slot="prepend">github.com</template></el-input
-    >
+      <template slot="prepend">github.com</template>
+    </el-input>
     <el-button
       class="button"
       type="primary"
       icon="el-icon-plus"
       size="small"
       @click="addUrl"
     />
-  </div>
+  </el-form>
 </template>
 
 <script>
 export default {
   name: 'TheUrlAdder',
 
   data: () => ({
-    source: 'https://github.com',
     urlInput: ''
   }),
 
   methods: {
-    setRepoUrl (url) {
-      this.urlInput = url.replace(this.source, '')
-    },
     addUrl () {
-      const url = this.urlInput
+      this.$emit('onUrlAdd', this.urlInput)
       this.urlInput = ''
-      this.$emit('onUrlAdd', url)
     }
   }
 }
@@ -60,7 +53,6 @@ export default {
 }
 
 .button {
-  height: 100%;
   border-radius: 0 3px 3px 0;
 }
 </style>