Set timer icon if a timer is running

src/js/utils/index.js

@@ -13,6 +13,7 @@ import {
   head,
   defaultTo,
 } from "lodash/fp"
+import { startOfWeek, endOfWeek } from "date-fns"
 import { format } from "date-fns"
 
 const nilToArray = input => input || []
@@ -100,6 +101,8 @@ export const trace = curry((tag, value) => {
 
 export const weekStartsOn = 1
 export const formatDate = date => format(date, "yyyy-MM-dd")
+export const getStartOfWeek = () => startOfWeek(new Date(), { weekStartsOn })
+export const getEndOfWeek = () => endOfWeek(new Date(), { weekStartsOn })
 
 export const extensionSettingsUrl = () => `chrome://extensions/?id=${chrome.runtime.id}`
 

src/js/utils/messageHandlers.js

@@ -4,27 +4,29 @@ import {
   ERROR_UPGRADE_REQUIRED,
   ERROR_UNKNOWN,
   groupedProjectOptions,
-  weekStartsOn,
+  getStartOfWeek,
+  getEndOfWeek,
 } from "utils"
 import { get, forEach, reject, isNil } from "lodash/fp"
-import { startOfWeek, endOfWeek } from "date-fns"
 import { createMatcher } from "utils/urlMatcher"
 import remoteServices from "remoteServices"
 import { queryTabs, isBrowserTab, getSettings } from "utils/browser"
+import { isChrome } from "./browser"
+import mocoIcon from "images/moco-32x32.png"
+import mocoTimerIcon from "images/moco-timer-32x32.png"
 
-const getStartOfWeek = () => startOfWeek(new Date(), { weekStartsOn })
-const getEndOfWeek = () => endOfWeek(new Date(), { weekStartsOn })
 const matcher = createMatcher(remoteServices)
 
 export function tabUpdated(tab, { messenger, settings }) {
   messenger.connectTab(tab)
 
   const service = matcher(tab.url)
+  const apiClient = new ApiClient(settings)
+
   if (service?.match?.id) {
     messenger.postMessage(tab, { type: "requestService" })
 
     messenger.once("newService", ({ payload: { service } }) => {
-      const apiClient = new ApiClient(settings)
       apiClient
         .bookedHours(service)
         .then(({ data }) => {
@@ -49,6 +51,20 @@ export function tabUpdated(tab, { messenger, settings }) {
   } else {
     messenger.postMessage(tab, { type: "hideBubble" })
   }
+
+  const fromDate = getStartOfWeek()
+  const toDate = getEndOfWeek()
+
+  apiClient
+    .activities(fromDate, toDate)
+    .then(({ data: activities }) => {
+      if (activities.every(activity => isNil(activity.timer_started_at))) {
+        setTimerIcon(false)
+      } else {
+        setTimerIcon()
+      }
+    })
+    .catch(() => null)
 }
 
 export function settingsChanged(settings, { messenger }) {
@@ -123,3 +139,12 @@ async function openPopup(tab, { service, messenger }) {
     })
   }
 }
+
+export function setTimerIcon(enabled = true) {
+  const global = isChrome() ? chrome : browser
+  if (enabled) {
+    global.browserAction.setIcon({ path: mocoTimerIcon })
+  } else {
+    global.browserAction.setIcon({ path: mocoIcon })
+  }
+}