Merge pull request #20 from mmrakt/fix/ui

fix bug and refactor

Author: mmrakt

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
         name: Create tag if necessary
         id: daily-version
       - run: yarn
-      - run: yarn b
+      - run: yarn build
       - name: Update manifest.json
         run: |
           npx dot-json@1 build/manifest.json version ${{ steps.daily-version.outputs.version }}

package.json

@@ -18,12 +18,12 @@
     "pomodoro-timer"
   ],
   "scripts": {
-    "d": "vite",
-    "b": "tsc && vite build",
+    "dev": "vite",
+    "build": "tsc && vite build",
     "preview": "vite preview",
-    "l": "eslint --fix './src/'",
-    "t": "jest",
-    "t:w": "jest --watch",
+    "lint": "eslint --fix './src/'",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -71,6 +71,7 @@
     "ts-node": "^10.9.1",
     "typescript": "*",
     "vite": "^4.4.7",
+    "vite-tsconfig-paths": "^4.2.1",
     "zip-folder": "^1.0.0"
   },
   "husky": {

src/background/Action.ts

@@ -1,10 +1,12 @@
-import { COLOR } from '../consts/color'
-import { Phase } from '../types'
-import { action } from '../utils/chrome'
-import { getTimeFromSeconds, formatDisplayTime } from '../utils/timeHelper'
+import { COLOR } from '@/consts/color'
+import { Phase } from '@/types'
+import { action } from '@/utils/chrome'
+import { getTimeFromSeconds, formatDisplayTime } from '@/utils/timeHelper'
 
-const updateSecondsOfBadge = async (reminingSeconds: number): Promise<void> => {
-  const { seconds, minutes } = getTimeFromSeconds(reminingSeconds)
+const updateSecondsOfBadge = async (
+  remainingSeconds: number
+): Promise<void> => {
+  const { seconds, minutes } = getTimeFromSeconds(remainingSeconds)
   await action.setBadgeText({
     text: formatDisplayTime(seconds, minutes)
   })

src/background/Notification.ts

@@ -1,11 +1,11 @@
 import i18next from 'i18next'
-import { Phase } from '../types'
-import { notifications } from '../utils/chrome'
+import { Phase } from '@/types'
+import { notifications } from '@/utils/chrome'
 
 const createNotificationContent = async (
   phase: Phase,
   todayPomodoro: number,
-  reminingPomodorUntilLongBreak: number
+  remainingPomodorUntilLongBreak: number
 ): Promise<string[]> => {
   let title = ''
   let message = ''
@@ -14,13 +14,13 @@ const createNotificationContent = async (
     message = i18next
       .t('notifications.pomodoro.message')
       .replace('%f', String(todayPomodoro))
-      .replace('%s', String(reminingPomodorUntilLongBreak))
+      .replace('%s', String(remainingPomodorUntilLongBreak))
   } else {
     title = i18next.t('notifications.break.title')
     message = i18next
       .t('notifications.break.message')
       .replace('%f', String(todayPomodoro))
-      .replace('%s', String(reminingPomodorUntilLongBreak))
+      .replace('%s', String(remainingPomodorUntilLongBreak))
   }
   return [title, message]
 }

src/background/Tab.ts

@@ -1,6 +1,6 @@
-import { EXPIRE_HTML_PATH } from '../consts'
-import { tabs, windows } from '../utils/chrome'
-import { EXPIRE_PAGE } from '../consts/index'
+import { EXPIRE_HTML_PATH } from '@/consts'
+import { tabs, windows } from '@/utils/chrome'
+import { EXPIRE_PAGE } from '@/consts/index'
 
 const openNewTab = (): void => {
   tabs.create(

src/background/Timer.ts

@@ -1,20 +1,20 @@
 import dayjs from 'dayjs'
-import { StorageValue, Phase, DailyPomodoro, Message } from '../types'
-import { getStorage, runtime, setStorage } from '../utils/chrome'
+import { StorageValue, Phase, DailyPomodoro, Message } from '@/types'
+import { getStorage, runtime, setStorage } from '@/utils/chrome'
 import { updateSecondsOfBadge, updateColorOfBadge } from './Action'
 import { closeTabs, openNewTab } from './Tab'
 import { createNotificationContent, sendNotification } from './Notification'
-import keepAlive from '../utils/keepAliveServiceWorker'
-import { FromServiceWorkerMessgeType } from '../utils/message'
-import { extractTodayPomodoroCount } from '../utils/pomodoroHelper'
+import keepAlive from '@/utils/keepAliveServiceWorker'
+import { FromServiceWorkerMessageType } from '@/utils/message'
+import { extractTodayPomodoroCount } from '@/utils/pomodoroHelper'
 
 let intervalId = 0
 
 const toggleTimerStatus = async (needSendMessage = false): Promise<void> => {
   await keepAlive()
 
   getStorage([
-    'reminingSeconds',
+    'remainingSeconds',
     'phase',
     'isRunning',
     'totalPomodoroCountsInSession'
@@ -28,7 +28,7 @@ const toggleTimerStatus = async (needSendMessage = false): Promise<void> => {
       }
       if (needSendMessage) {
         await runtime.sendMessage<Message>({
-          type: FromServiceWorkerMessgeType.TOGGLE_TIMER_STATUS,
+          type: FromServiceWorkerMessageType.TOGGLE_TIMER_STATUS,
           data: {
             toggledTimerStatus: !data.isRunning
           }
@@ -53,12 +53,12 @@ const setTickInterval = (isRunning: boolean): void => {
  * カウントを減らすか終了させるか判定
  */
 const handleCountDown = (): void => {
-  getStorage(['reminingSeconds']).then(async (data: StorageValue) => {
-    if (data.reminingSeconds > 0) {
-      await reduceCount(data.reminingSeconds)
+  getStorage(['remainingSeconds']).then(async (data: StorageValue) => {
+    if (data.remainingSeconds > 0) {
+      await reduceCount(data.remainingSeconds)
     }
 
-    if (data.reminingSeconds === 1) {
+    if (data.remainingSeconds === 1) {
       const {
         phase,
         totalPomodoroCountsInSession,
@@ -80,14 +80,14 @@ const handleCountDown = (): void => {
   })
 }
 
-const reduceCount = async (reminingSeconds: number): Promise<void> => {
+const reduceCount = async (remainingSeconds: number): Promise<void> => {
   try {
-    setStorage({ reminingSeconds: reminingSeconds - 1 })
-    await updateSecondsOfBadge(reminingSeconds - 1)
+    setStorage({ remainingSeconds: remainingSeconds - 1 })
+    await updateSecondsOfBadge(remainingSeconds - 1)
     await runtime.sendMessage<Message>({
-      type: FromServiceWorkerMessgeType.REDUCE_COUNT,
+      type: FromServiceWorkerMessageType.REDUCE_COUNT,
       data: {
-        secs: reminingSeconds - 1
+        secs: remainingSeconds - 1
       }
     })
   } catch (e) {
@@ -105,7 +105,7 @@ const expire = async (
   pomodorosUntilLongBreak: number,
   isAutoExpire = true
 ): Promise<void> => {
-  let reminingSeconds = 0
+  let remainingSeconds = 0
   let nextPhase: Phase = 'focus'
 
   try {
@@ -114,34 +114,34 @@ const expire = async (
     if (phase === 'focus') {
       totalPomodoroCountsInSession++
       if (totalPomodoroCountsInSession >= pomodorosUntilLongBreak) {
-        reminingSeconds = await (
+        remainingSeconds = await (
           await getStorage(['longBreakSeconds'])
         ).longBreakSeconds
         totalPomodoroCountsInSession = 0
         nextPhase = 'longBreak'
       } else {
-        reminingSeconds = await (
+        remainingSeconds = await (
           await getStorage(['breakSeconds'])
         ).breakSeconds
         nextPhase = 'break'
       }
       dailyPomodoros = increaseDailyPomodoro(dailyPomodoros)
     } else {
-      reminingSeconds = await (
+      remainingSeconds = await (
         await getStorage(['pomodoroSeconds'])
       ).pomodoroSeconds
     }
     const todayTotalPomodoroCount = extractTodayPomodoroCount(dailyPomodoros)
 
     setStorage({
-      reminingSeconds,
+      remainingSeconds,
       phase: nextPhase,
       totalPomodoroCountsInSession,
       isRunning: false,
       dailyPomodoros,
       isTimerStarted: false
     })
-    await updateSecondsOfBadge(reminingSeconds)
+    await updateSecondsOfBadge(remainingSeconds)
     await updateColorOfBadge(nextPhase)
 
     if (isAutoExpire) {
@@ -188,9 +188,9 @@ const expire = async (
     setTickInterval(false)
     // popup非表示時はここで止まってしまうため最後に実行する
     await runtime.sendMessage<Message>({
-      type: FromServiceWorkerMessgeType.EXPIRE,
+      type: FromServiceWorkerMessageType.EXPIRE,
       data: {
-        secs: reminingSeconds,
+        secs: remainingSeconds,
         phase: nextPhase,
         todayTotalPomodoroCount,
         totalPomodoroCountsInSession,

src/background/__tests__/Timer.test.ts

@@ -1,10 +1,10 @@
 import MockDate from 'mockdate'
 import { chrome } from 'jest-chrome'
-// import { DEFAULT_TIMER_SECONDS } from '../../consts/index'
-import { expire } from '../Timer'
-import { Message } from '../../types/index'
-import { FromServiceWorkerMessgeType } from '../../utils/message'
-import { COLOR } from '../../consts/color'
+// import { DEFAULT_TIMER_SECONDS } from '@/consts/index'
+import { expire } from '@/background/Timer'
+import { Message } from '@/types/index'
+import { FromServiceWorkerMessageType } from '@/utils/message'
+import { COLOR } from '@/consts/color'
 
 describe.skip('Timer', () => {
   beforeEach(() => {
@@ -42,7 +42,7 @@ describe.skip('Timer', () => {
 
   it('finish first focus', async () => {
     const expectedSetValue = {
-      reminingSeconds: 0, // TODO: getStorageのPromiseが解決されないままテストが終わる原因調査
+      remainingSeconds: 0, // TODO: getStorageのPromiseが解決されないままテストが終わる原因調査
       phase: 'break',
       totalPomodoroCountsInSession: 1,
       isRunning: false,
@@ -58,7 +58,7 @@ describe.skip('Timer', () => {
     const pomodorosUntilLongBreak = 4
     const todayTotalPomodoroCount = 0
     const expectedOptions: Message = {
-      type: FromServiceWorkerMessgeType.EXPIRE,
+      type: FromServiceWorkerMessageType.EXPIRE,
       data: {
         secs: 0, // FIXME
         phase: expectedSetValue.phase,
@@ -87,7 +87,7 @@ describe.skip('Timer', () => {
 
   it('finish first break', async () => {
     const expectedSetValue = {
-      reminingSeconds: 0, // FIXME
+      remainingSeconds: 0, // FIXME
       phase: 'focus',
       totalPomodoroCountsInSession: 1,
       isRunning: false,
@@ -103,7 +103,7 @@ describe.skip('Timer', () => {
     const pomodorosUntilLongBreak = 4
     const todayTotalPomodoroCount = 1
     const expectedOptions: Message = {
-      type: FromServiceWorkerMessgeType.EXPIRE,
+      type: FromServiceWorkerMessageType.EXPIRE,
       data: {
         secs: 0, // FIXME
         phase: expectedSetValue.phase,
@@ -144,7 +144,7 @@ describe.skip('Timer', () => {
 
   it('start long break', async () => {
     const expectedSetValue = {
-      reminingSeconds: 0, // FIXME
+      remainingSeconds: 0, // FIXME
       phase: 'longBreak',
       totalPomodoroCountsInSession: 0,
       isRunning: false,
@@ -160,7 +160,7 @@ describe.skip('Timer', () => {
     const pomodorosUntilLongBreak = 4
     const todayTotalPomodoroCount = 3
     const expectedOptions = {
-      type: FromServiceWorkerMessgeType.EXPIRE,
+      type: FromServiceWorkerMessageType.EXPIRE,
       data: {
         secs: 0, // FIEXME
         phase: expectedSetValue.phase,
@@ -201,7 +201,7 @@ describe.skip('Timer', () => {
   it('長い休憩までのポモドーロ数を実施済みポモドーロ数以下に設定した場合。実施数3 長い休憩までのポモドーロ数4 変更後2', async () => {
     const changedPomodorosUntilLongBreak = 2
     const expectedSetValue = {
-      reminingSeconds: 0, // FIXME
+      remainingSeconds: 0, // FIXME
       phase: 'longBreak',
       totalPomodoroCountsInSession: 0,
       isRunning: false,
@@ -215,7 +215,7 @@ describe.skip('Timer', () => {
       ]
     }
     const expectedOptions = {
-      type: FromServiceWorkerMessgeType.EXPIRE,
+      type: FromServiceWorkerMessageType.EXPIRE,
       data: {
         secs: 0, // FIXME
         phase: expectedSetValue.phase,

src/background/main.ts

@@ -1,20 +1,20 @@
-import { StorageValue, Message } from '../types/index'
-import { runtime, getStorage, setStorage, commands } from '../utils/chrome'
-import '../utils/i18n'
+import { StorageValue, Message } from '@/types/index'
+import { runtime, getStorage, setStorage, commands } from '@/utils/chrome'
+import '@/utils/i18n'
 import { closeTabs } from './Tab'
 import { updateSecondsOfBadge, updateColorOfBadge } from './Action'
 import { toggleTimerStatus, expire, pauseTimer, resumeTimer } from './Timer'
-import { DEFAULT_STORAGE_VALUE } from '../consts/index'
+import { DEFAULT_STORAGE_VALUE } from '@/consts/index'
 
 // installed event
 runtime.onInstalled.addListener(async () => {
-  getStorage(['reminingSeconds']).then((data) => {
-    if (!data?.reminingSeconds) {
+  getStorage(['remainingSeconds']).then((data) => {
+    if (!data?.remainingSeconds) {
       setStorage(DEFAULT_STORAGE_VALUE)
     }
   })
 
-  await updateSecondsOfBadge(DEFAULT_STORAGE_VALUE.reminingSeconds)
+  await updateSecondsOfBadge(DEFAULT_STORAGE_VALUE.remainingSeconds)
   await updateColorOfBadge(DEFAULT_STORAGE_VALUE.phase)
 })
 

src/components/common/Break.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
-import { COLOR } from '../../consts/color'
+import { COLOR } from '@/consts/color'
 import { twMerge } from 'tailwind-merge'
-import { ThemeContext } from '../../providers/ThemeProvider'
+import { ThemeContext } from '@/providers/ThemeProvider'
 
 const BreakIcon: React.FC<{ className?: string }> = ({ className = '' }) => {
   const { theme } = useContext(ThemeContext)

src/components/common/Circle.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useContext } from 'react'
 import LoadingSpinner from './LoadingSpinner'
-import { COLOR } from '../../consts/color'
-import { ThemeContext } from '../../providers/ThemeProvider'
+import { COLOR } from '@/consts/color'
+import { ThemeContext } from '@/providers/ThemeProvider'
 import { twMerge } from 'tailwind-merge'
 
 type IProps = {