feat: add and remove task in watchlist

api/tasks/tasks.api.ts

@@ -1,6 +1,14 @@
 import { apiClient } from '../../lib/api-client'
 import { TApiMethodsRecord } from '../common/common-api.types'
-import { CrateTaskDto, GetTasksDto, TTask, UpdateTaskDto } from './tasks.types'
+import {
+  ToggleWatchListStatusDto,
+  CrateTaskDto,
+  GetTasksDto,
+  TTask,
+  TWatchListTask,
+  UpdateTaskDto,
+  AddTaskToWatchListDto,
+} from './tasks.types'
 
 export const TasksApi = {
   getTasks: {
@@ -25,4 +33,18 @@ export const TasksApi = {
       await apiClient.patch<TTask>(`/v1/tasks/${id}`, task)
     },
   },
+
+  addTaskToWatchList: {
+    key: ['tasksApi.addTaskToWatchList'],
+    fn: async ({ taskId }: AddTaskToWatchListDto) => {
+      await apiClient.post<TWatchListTask>(`/v1/watchlist/tasks`, { taskId })
+    },
+  },
+
+  toggleTaskWatchListStatus: {
+    key: ['tasksApi.toggleTaskWatchListStatus'],
+    fn: async ({ taskId, isActive }: ToggleWatchListStatusDto) => {
+      await apiClient.patch(`/v1/watchlist/tasks/${taskId}`, { isActive })
+    },
+  },
 } satisfies TApiMethodsRecord

api/tasks/tasks.types.ts

@@ -13,7 +13,7 @@ export type TTask = {
   }
   tags?: string[]
   dueAt?: string
-  isInWatchlist?: boolean
+  in_watchlist?: boolean | null
 }
 
 export type GetTasksDto = {
@@ -39,3 +39,22 @@ export type UpdateTaskDto = {
   status?: TASK_STATUS_ENUM
   dueAt?: string
 }
+
+export type AddTaskToWatchListDto = {
+  taskId: string
+}
+
+export type ToggleWatchListStatusDto = {
+  taskId: string
+  isActive: boolean
+}
+
+export type TWatchListTask = {
+  taskId: string
+  userId: string
+  isActive?: boolean
+  createdAt?: string | null
+  createdBy?: string | null
+  updatedAt?: string | null
+  updatedBy?: string | null
+}

components/TodoForm.tsx

@@ -41,7 +41,6 @@ const DEFAULT_FORM_DATA: TaskFormData = {
   priority: TASK_PRIORITY_ENUM.LOW,
   tags: [],
   status: TASK_STATUS_ENUM.TODO,
-  isInWatchlist: false,
   labels: [],
 }
 

modules/dashboard/components/dashboard-tasks-table.tsx

@@ -16,10 +16,11 @@ import {
 } from '@/components/ui/table'
 import { cn } from '@/lib/utils'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { Edit2 } from 'lucide-react'
+import { Edit2, Eye, EyeOff } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from 'sonner'
 import { DashboardTasksTableTabs } from '../constants'
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 
 const TaskPriorityLabel = ({ priority }: { priority: TASK_PRIORITY_ENUM }) => {
   return (
@@ -86,14 +87,64 @@ const EditTaskButton = ({ task }: EditTaskButtonProps) => {
   )
 }
 
+type WatchListButtonProps = {
+  taskId: string
+  isInWatchlist?: boolean | null
+}
+
+const WatchListButton = ({ taskId, isInWatchlist }: WatchListButtonProps) => {
+  const queryClient = useQueryClient()
+
+  const addTaskToWatchlistMutation = useMutation({
+    mutationFn: TasksApi.addTaskToWatchList.fn,
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key })
+      toast.success('Task added to watchlist!')
+    },
+    onError: () => {
+      toast.error('Failed to add task in watchlist!')
+    },
+  })
+
+  const toggleWatchListStatusMutation = useMutation({
+    mutationFn: TasksApi.toggleTaskWatchListStatus.fn,
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key })
+      toast.success(
+        variables.isActive ? 'Task added to watchlist!' : 'Task removed from watchlist!',
+      )
+    },
+    onError: () => {
+      toast.error('Failed to update watchlist status!')
+    },
+  })
+
+  const handleAddTaskToWatchlist = () => {
+    if (isInWatchlist == null) {
+      addTaskToWatchlistMutation.mutate({ taskId })
+    } else {
+      toggleWatchListStatusMutation.mutate({ taskId, isActive: true })
+    }
+  }
+
+  return isInWatchlist ? (
+    <EyeOff
+      className="h-5 w-5"
+      onClick={() => toggleWatchListStatusMutation.mutate({ taskId, isActive: false })}
+    />
+  ) : (
+    <Eye className="h-5 w-5" onClick={handleAddTaskToWatchlist} />
+  )
+}
+
 type DashboardTasksTableProps = {
   type: DashboardTasksTableTabs
   tasks: TTask[]
 }
 
 export const DashboardTasksTable = ({ type, tasks }: DashboardTasksTableProps) => {
   const filteredTasks = tasks.filter(
-    (task) => type === DashboardTasksTableTabs.All || task.isInWatchlist,
+    (task) => type === DashboardTasksTableTabs.All || task.in_watchlist,
   )
 
   return (
@@ -139,8 +190,16 @@ export const DashboardTasksTable = ({ type, tasks }: DashboardTasksTableProps) =
                   {task.dueAt ? new Date(task.dueAt).toLocaleDateString() : task.dueAt || '-'}
                 </TableCell>
 
-                <TableCell>
+                <TableCell className="flex items-center gap-3">
                   <EditTaskButton task={task} />
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <WatchListButton taskId={task.id} isInWatchlist={task.in_watchlist} />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {task?.in_watchlist ? 'Remove task from watchlist' : 'Add task to watchlist'}
+                    </TooltipContent>
+                  </Tooltip>
                 </TableCell>
               </TableRow>
             ))}