refactor: improve task management and error handling in background pr…

…ocessor style: fix task list running time text position
Ray-D-Song · Dec 1, 2024 · a8198b2 · a8198b2
1 parent d69b0f9
commit a8198b2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 39 deletions.
diff --git a/packages/plugin/background/processor.ts b/packages/plugin/background/processor.ts
@@ -20,46 +20,50 @@ export interface SeriableSingleFileTask {
   errorMessage?: string
 }
 
-const taskList: SeriableSingleFileTask[] = []
-
-let isInit = false
-async function initTask() {
-  if (isInit) {
-    return
-  }
-
-  const { tasks } = await Browser.storage.local.get('tasks')
-  if (tasks) {
-    tasks.forEach((task: SeriableSingleFileTask) => {
-      if (task.status !== 'done' && task.status !== 'failed') {
-        task.status = 'failed'
-        task.endTimeStamp = Date.now()
-        task.errorMessage = 'unexpected shutdown'
-      }
-    })
-    taskList.splice(0, taskList.length, ...tasks)
-  }
-  isInit = true
+async function markUnfinishedTasksAsFailed() {
+  const tasks = await getTaskList()
+  tasks.forEach((task: SeriableSingleFileTask) => {
+    if (task.status !== 'done' && task.status !== 'failed') {
+      task.status = 'failed'
+      task.endTimeStamp = Date.now()
+      task.errorMessage = 'browser unexpected shutdown'
+    }
+  })
+  await saveTaskList(tasks)
 }
 
 Browser.runtime.onStartup.addListener(async () => {
   console.log('onStartup')
-  await initTask()
+  await markUnfinishedTasksAsFailed()
 })
 
-async function getTaskList() {
-  await initTask()
-  return taskList
+async function getTaskList(): Promise<SeriableSingleFileTask[]> {
+  const { tasks } = await Browser.storage.local.get('tasks')
+  return tasks || []
 }
 
-async function saveTaskList() {
-  await Browser.storage.local.set({ tasks: taskList })
+async function saveTaskList(tasks: SeriableSingleFileTask[]) {
+  await Browser.storage.local.set({ tasks })
+}
+
+async function saveTask(task: SeriableSingleFileTask) {
+  const tasks = await getTaskList()
+
+  const index = tasks.findIndex(t => t.uuid === task.uuid)
+  if (index === -1) {
+    tasks.push(task)
+  }
+  else {
+    tasks[index] = task
+  }
+  await Browser.storage.local.set({ tasks })
 }
 
 async function clearFinishedTaskList() {
-  const newTaskList = taskList.filter(task => task.status !== 'done')
-  taskList.splice(0, taskList.length, ...newTaskList)
-  await saveTaskList()
+  const tasks = await getTaskList()
+
+  const newTasks = tasks.filter(task => task.status !== 'done')
+  await saveTaskList(newTasks)
 }
 
 type CreateTaskOptions = {
@@ -127,29 +131,28 @@ async function createAndRunTask(options: CreateTaskOptions) {
   // todo wait refactor, add progress
   async function run() {
     task.status = 'scraping'
-    await saveTaskList()
+    await saveTask(task)
     const content = await scrapePageData(singleFileSetting, tabId)
 
     task.status = 'uploading'
-    await saveTaskList()
+    await saveTask(task)
 
     await uploadPageData({ content, href, title, pageDesc, folderId, screenshot, bindTags, isShowcased })
     task.status = 'done'
     task.endTimeStamp = Date.now()
-    await saveTaskList()
+    await saveTask(task)
   }
 
-  taskList.push(task)
-  await saveTaskList()
+  await saveTask(task)
   try {
     await run()
   }
   catch (e: any) {
     task.status = 'failed'
     task.endTimeStamp = Date.now()
-    console.error('tsak failed', e, task)
+    console.error('task failed', e, task)
     task.errorMessage = typeof e === 'string' ? e : e.message
-    await saveTaskList()
+    await saveTask(task)
   }
 }
 

diff --git a/packages/plugin/popup/components/HistoryTaskList.tsx b/packages/plugin/popup/components/HistoryTaskList.tsx
@@ -79,9 +79,11 @@ function TaskListItem({ task }: { task: SeriableSingleFileTask }) {
   return (
     <div className="flex justify-between items-center h-6 w-full space-x-1">
       <div className="font-bold cursor-pointer overflow-hidden text-ellipsis text-nowrap" onClick={openOriginalPage}>{task.title}</div>
-      <div>{runningTimeText}</div>
-      <div className="flex mt-0.5">
-        <TaskStatusIcon status={task.status} errorMessage={task.errorMessage}></TaskStatusIcon>
+      <div className="flex">
+        <div>{runningTimeText}</div>
+        <div className="flex mt-0.5">
+          <TaskStatusIcon status={task.status} errorMessage={task.errorMessage}></TaskStatusIcon>
+        </div>
       </div>
     </div>
   )