Merge pull request #76 from cytechmobile/feat/e0dbc12_refactor-tasks-store

refactor(tasks): refactor tasks store

Author: QZera

components/Column.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { VueDraggable } from 'vue-draggable-plus'
+import { type SortableEvent, VueDraggable } from 'vue-draggable-plus'
 import type { Task } from '../types/tasks'
-import type { VueDraggableEvent } from '~/types/vue-draggable-plus'
 import { doneTaskStatuses } from '~/constants/tasks'
 
 const props = defineProps<{
@@ -29,23 +28,28 @@ watchEffect(() => {
   }
 })
 
-function handleMoveTask(event: VueDraggableEvent) {
-  const { id, kind } = event.item.dataset
-  const { column } = event.to.dataset
+function handleMoveTask(event: SortableEvent) {
+  const { oldIndex, newIndex, item, to } = event
+  const { id, kind } = item.dataset
+  const { column } = to.dataset
+  if (!id || !kind || !column || oldIndex === undefined || newIndex === undefined) {
+    throw new Error('Invalid task move event')
+  }
+
   const task = props.tasks.find((task) => task.rpb.kind === kind && task.id === id)
-  if (!task || !column || (task.rpb.column === column && event.oldIndex === event.newIndex)) {
+  if (!task || !column || (task.rpb.column === column && oldIndex === newIndex)) {
     return
   }
 
-  void tasks.moveTask({
+  tasks.moveTask({
     task,
     column,
-    index: event.newIndex,
+    index: newIndex,
   })
 }
 
 function handleCreateIssue(title: string) {
-  void tasks.createIssue({ title, column: props.title })
+  tasks.createIssue({ title, column: props.title })
 }
 
 const columnIcon = computed(() => {

components/Header.vue

@@ -80,13 +80,10 @@ const aboutLink = new URL(
           </button>
         </UTooltip>
         <UTooltip v-if="isDebugging" text="Reset card order. All changes will be lost!">
-          <UButton
-            :icon="tasks.isResettingPriority ? 'i-heroicons-arrow-path' : undefined"
-            :disabled="tasks.isLoading || tasks.isResettingPriority"
-            @click="tasks.resetPriority"
-          >
+          <button class="button-solid" type="button" @click="tasks.resetPriority">
+            <Icon name="octicon:sync" size="16" />
             Reset Order
-          </UButton>
+          </button>
         </UTooltip>
       </template>
     </div>

components/TaskKindSelect.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Writable } from 'ts-essentials'
+import { assertUnreachable } from '~/utils/assertions'
 
 const board = useBoardStore()
 
@@ -14,19 +15,17 @@ const optionIcons = {
 
 const selected = computed(() => {
   const { taskKind } = board.state.filter
-  if (!taskKind) {
-    return 'All'
-  }
-
-  if (taskKind === 'issue') {
-    return 'Issues'
-  }
 
-  if (taskKind === 'patch') {
-    return 'Patches'
+  switch (taskKind) {
+    case undefined:
+      return 'All'
+    case 'issue':
+      return 'Issues'
+    case 'patch':
+      return 'Patches'
+    default:
+      return assertUnreachable(taskKind)
   }
-
-  throw new Error(`Invalid task kind: ${taskKind}`)
 })
 
 function handleChange(selected: (typeof options)[number]) {
@@ -41,7 +40,7 @@ function handleChange(selected: (typeof options)[number]) {
       board.state.filter.taskKind = 'patch'
       break
     default:
-      throw new Error(`Invalid selected option: ${selected}`)
+      assertUnreachable(selected)
   }
 }
 </script>

composables/use-tasks-fetch.ts

@@ -1,11 +1,12 @@
 import type { RadicleIssue, RadiclePatch } from '~/types/httpd'
 import type { Issue, Patch, Task } from '~/types/tasks'
+import { assertUnreachable } from '~/utils/assertions'
 
 export function useTasksFetch() {
   const { $httpd } = useNuxtApp()
   const route = useRoute('node-rid')
 
-  async function fetchIssue(id: string): Promise<Issue> {
+  async function fetchIssueById(id: string): Promise<Issue> {
     const radicleIssue = await $httpd('/projects/{rid}/issues/{issue}', {
       path: { rid: route.params.rid, issue: id },
     })
@@ -14,7 +15,7 @@ export function useTasksFetch() {
     return issue
   }
 
-  async function fetchIssues(): Promise<Issue[]> {
+  async function fetchAllIssues(): Promise<Issue[]> {
     const issueStatuses = ['open', 'closed'] satisfies RadicleIssue['state']['status'][]
 
     const radicleIssuesByStatus = await Promise.all(
@@ -38,7 +39,7 @@ export function useTasksFetch() {
     return issues
   }
 
-  async function fetchPatch(id: string): Promise<Patch> {
+  async function fetchPatchById(id: string): Promise<Patch> {
     const radiclePatch = await $httpd('/projects/{rid}/patches/{patch}', {
       path: { rid: route.params.rid, patch: id },
     })
@@ -47,7 +48,7 @@ export function useTasksFetch() {
     return patch
   }
 
-  async function fetchPatches(): Promise<Patch[]> {
+  async function fetchAllPatches(): Promise<Patch[]> {
     const patchStatuses = [
       'draft',
       'open',
@@ -76,25 +77,10 @@ export function useTasksFetch() {
     return patches
   }
 
-  async function refreshSpecificTasks(tasks: Task[]): Promise<void> {
-    await Promise.all(
-      tasks.map(async (task) => {
-        switch (task.rpb.kind) {
-          case 'issue':
-            task = await fetchIssue(task.id)
-            break
-          case 'patch':
-            task = await fetchPatch(task.id)
-            break
-          default:
-            throw new Error('Unsupported task kind')
-        }
-      }),
-    )
-  }
-
   async function updateTaskLabels(task: Task, labels: string[]) {
-    switch (task.rpb.kind) {
+    const { kind } = task.rpb
+
+    switch (kind) {
       case 'issue':
         return await $httpd(`/projects/{rid}/issues/{issue}`, {
           path: { rid: route.params.rid, issue: task.id },
@@ -114,26 +100,67 @@ export function useTasksFetch() {
           },
         })
       default:
-        throw new Error('Unsupported task kind')
+        return assertUnreachable(kind)
     }
   }
 
   const {
     data: tasks,
     pending: areTasksPending,
-    refresh: refreshTasks,
+    refresh: refetchAllTasks,
   } = useAsyncData('tasks', async () => {
-    const issuesAndPatches = await Promise.all([fetchIssues(), fetchPatches()])
+    const issuesAndPatches = await Promise.all([fetchAllIssues(), fetchAllPatches()])
     const tasks = issuesAndPatches.flat()
 
     return tasks
   })
 
+  async function refetchTask(task: Task): Promise<void> {
+    if (!tasks.value) {
+      return
+    }
+
+    let refetchedTask: Task
+    const { kind } = task.rpb
+
+    switch (kind) {
+      case 'issue':
+        refetchedTask = await fetchIssueById(task.id)
+        break
+      case 'patch':
+        refetchedTask = await fetchPatchById(task.id)
+        break
+      default:
+        assertUnreachable(kind)
+    }
+
+    const taskIndex = tasks.value.indexOf(task)
+    if (taskIndex === undefined || taskIndex === -1) {
+      return
+    }
+
+    tasks.value[taskIndex] = refetchedTask
+  }
+
+  async function refetchSpecificTasks(tasksToRefetch: Task[]): Promise<void> {
+    await Promise.all(
+      tasksToRefetch.map(async (task) => {
+        await refetchTask(task)
+      }),
+    )
+  }
+
+  async function fetchIssueByIdAndAddToTasks(id: string): Promise<void> {
+    const issue = await fetchIssueById(id)
+    tasks.value?.push(issue)
+  }
+
   return {
     tasks,
     areTasksPending,
-    refreshTasks,
-    refreshSpecificTasks,
+    refetchAllTasks,
+    refetchSpecificTasks,
     updateTaskLabels,
+    fetchIssueByIdAndAddToTasks,
   }
 }

layouts/default.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 useTheme()
 const tasksStore = useTasksStore()
+
+const isLoading = computed(() => !tasksStore.tasksByColumn)
 </script>
 
 <template>
-  <div class="flex h-dvh flex-col" aria-live="polite" :aria-busy="!tasksStore.isReady">
-    <Loading v-if="!tasksStore.isReady" />
+  <div class="flex h-dvh flex-col" aria-live="polite" :aria-busy="isLoading">
+    <Loading v-if="isLoading" />
     <template v-else>
       <Header />
 

package.json

@@ -25,6 +25,7 @@
     "@iconify/json": "^2.2.219",
     "@nuxt/ui": "2.15.2",
     "@pinia/nuxt": "^0.5.1",
+    "@tanstack/vue-query": "^5.36.0",
     "@vueuse/nuxt": "^10.11.0",
     "deepmerge": "^4.3.1",
     "nuxt-icon": "^0.6.9",

pages/[node]/[rid].vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { VueDraggable } from 'vue-draggable-plus'
+import { type SortableEvent, VueDraggable } from 'vue-draggable-plus'
 import { elementIds } from '~/constants/elements'
-import type { VueDraggableEvent } from '~/types/vue-draggable-plus'
 
 const auth = useAuthStore()
 const tasks = useTasksStore()
@@ -15,7 +14,11 @@ watchEffect(() => {
   }
 })
 
-function handleMoveColumn({ oldIndex, newIndex }: VueDraggableEvent) {
+function handleMoveColumn({ oldIndex, newIndex }: SortableEvent) {
+  if (!oldIndex || !newIndex) {
+    throw new Error('Invalid column move event')
+  }
+
   const column = board.state.columns[oldIndex]
   if (!column) {
     return

plugins/vue-query.ts

@@ -0,0 +1,5 @@
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueQueryPlugin)
+})