Dev to Main Sync

src/components/forms/date-picker-select.tsx

@@ -10,13 +10,15 @@ type DatePickerSelectProps = {
   value: Date | undefined
   isDateDisabled?: (date: Date) => boolean
   onChange: (date: Date | undefined) => void
+  disabled: boolean
 }
 
 export const DatePickerSelect = ({
   id,
   value,
   onChange,
   isDateDisabled,
+  disabled,
 }: DatePickerSelectProps) => {
   const [open, setOpen] = React.useState(false)
 
@@ -28,6 +30,7 @@ export const DatePickerSelect = ({
           variant="outline"
           data-selected={value ? 'true' : 'false'}
           className="w-full justify-between font-normal data-[selected=false]:text-gray-500"
+          disabled={disabled}
         >
           {value ? value.toLocaleDateString() : 'Select date'}
           <ChevronDownIcon />
@@ -39,6 +42,7 @@ export const DatePickerSelect = ({
           selected={value}
           captionLayout="dropdown"
           isDateDisabled={isDateDisabled}
+          disabled={disabled}
           onSelect={(date) => {
             onChange(date)
             setOpen(false)

src/components/todos/create-todo-button.tsx

@@ -1,13 +1,13 @@
 import { USER_TYPE_ENUM } from '@/api/common/common-enum'
 import { TasksApi } from '@/api/tasks/tasks.api'
 import { TeamsApi } from '@/api/teams/teams.api'
-import { CreateEditTodoDialog } from '@/components/todos/create-edit-todo-dialog'
+import { TodoDialog } from '@/components/todos/todo-dialog'
 import { Button } from '@/components/ui/button'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { PlusIcon } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from 'sonner'
-import { TTodoFormData } from './create-edit-todo-form'
+import { TTodoFormData } from './todo-form'
 
 type Props = {
   defaultData?: Partial<TTodoFormData>
@@ -47,7 +47,7 @@ export const CreateTodoButton = ({ defaultData, teamId }: Props) => {
   })
 
   return (
-    <CreateEditTodoDialog
+    <TodoDialog
       mode="create"
       defaultData={defaultData}
       open={showCreateTaskForm}
@@ -72,6 +72,6 @@ export const CreateTodoButton = ({ defaultData, teamId }: Props) => {
         <PlusIcon className="mr-1 h-4 w-4" />
         Create Todo
       </Button>
-    </CreateEditTodoDialog>
+    </TodoDialog>
   )
 }

src/components/todos/deferred-task-button.tsx

@@ -14,15 +14,16 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import { DatePickerSelect } from '../forms/date-picker-select'
-import { TTodoFormData } from './create-edit-todo-form'
+import { TTodoFormData } from './todo-form'
 
 type DeferredTaskButtonProps = {
   todo: Partial<TTodoFormData>
   open: boolean
   setOpen: (open: boolean) => void
+  disabled: boolean
 }
 
-export const DeferredTaskButton = ({ todo, open, setOpen }: DeferredTaskButtonProps) => {
+export const DeferredTaskButton = ({ todo, open, setOpen, disabled }: DeferredTaskButtonProps) => {
   const [deferredTill, setDeferredTill] = useState<Date>()
   const queryClient = useQueryClient()
 
@@ -80,6 +81,7 @@ export const DeferredTaskButton = ({ todo, open, setOpen }: DeferredTaskButtonPr
                   value={deferredTill}
                   onChange={setDeferredTill}
                   isDateDisabled={(date) => !isDateValidForDefer(date, todo.dueDate)}
+                  disabled={disabled}
                 />
               </div>
             </div>

src/components/todos/edit-task-button.tsx

@@ -1,72 +1,39 @@
-import { USER_TYPE_ENUM } from '@/api/common/common-enum'
-import { TasksApi } from '@/api/tasks/tasks.api'
 import { TTask } from '@/api/tasks/tasks.types'
+import { useUpdateTask } from '@/hooks/useUpdateTask'
 import { TodoUtil } from '@/lib/todo-util'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Edit2 } from 'lucide-react'
 import { useState } from 'react'
-import { toast } from 'sonner'
-import { CreateEditTodoDialog } from './create-edit-todo-dialog'
-import { TTodoFormData } from './create-edit-todo-form'
 import { Button } from '../ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+import { TodoDialog } from './todo-dialog'
+import { TTodoFormData } from './todo-form'
 
 type EditTodoButtonProps = {
   todo: TTask
   teamId?: string
 }
 
 export const EditTodoButton = ({ todo, teamId }: EditTodoButtonProps) => {
-  const queryClient = useQueryClient()
-
   const [showEditTaskForm, setShowEditTaskForm] = useState(false)
 
-  const updateTaskMutation = useMutation({
-    mutationFn: TasksApi.updateTask.fn,
-    onSuccess: (res) => {
-      void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key() })
-      void queryClient.invalidateQueries({ queryKey: TasksApi.getWatchListTasks.key })
-      void queryClient.invalidateQueries({
-        queryKey: TasksApi.getTasks.key({ status: 'DEFERRED' }),
-      })
-
-      if (res.assignee?.user_type === USER_TYPE_ENUM.TEAM) {
-        void queryClient.invalidateQueries({
-          queryKey: TasksApi.getTasks.key({ teamId: res.assignee.assignee_id }),
-        })
-      }
-
-      // invalidate a task on the teams page if the task edited
-      if (teamId) {
-        void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key({ teamId }) })
-      }
-
-      toast.success('Todo updated successfully')
-      setShowEditTaskForm(false)
-    },
-    onError: () => {
-      toast.error('Failed to update todo, please try again')
-    },
+  const { mutation, handleSubmission } = useUpdateTask({
+    todo,
+    teamId,
   })
 
-  const handleSubmission = async (todoDetails: TTodoFormData) => {
-    const updateDetails = TodoUtil.getUpdateTodoDetails(todoDetails, todo)
-
-    if (Object.keys(updateDetails).length > 0) {
-      updateTaskMutation.mutate({
-        id: todo.id,
-        ...updateDetails,
-      })
-    }
+  const handleSubmit = (todoDetails: TTodoFormData) => {
+    handleSubmission(todoDetails, () => {
+      setShowEditTaskForm(false)
+    })
   }
 
   return (
-    <CreateEditTodoDialog
+    <TodoDialog
       mode="edit"
       open={showEditTaskForm}
-      onSubmit={handleSubmission}
+      onSubmit={handleSubmit}
       onOpenChange={setShowEditTaskForm}
-      isMutationPending={updateTaskMutation.isPending}
+      isMutationPending={mutation.isPending}
       defaultData={TodoUtil.getDefaultTodoFormData(todo)}
     >
       <Tooltip>
@@ -82,6 +49,6 @@ export const EditTodoButton = ({ todo, teamId }: EditTodoButtonProps) => {
         </TooltipTrigger>
         <TooltipContent>Edit Todo</TooltipContent>
       </Tooltip>
-    </CreateEditTodoDialog>
+    </TodoDialog>
   )
 }

src/components/todos/todo-dialog.tsx

@@ -0,0 +1,86 @@
+import { TodoForm, TTodoFormData } from '@/components/todos/todo-form'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { type ReactNode } from 'react'
+
+type BaseProps = {
+  open: boolean
+  children: ReactNode
+  onOpenChange: (open: boolean) => void
+}
+
+type CreateModeProps = BaseProps & {
+  mode: 'create'
+  defaultData?: Partial<TTodoFormData>
+  onSubmit: (data: TTodoFormData) => void
+  isMutationPending?: boolean
+}
+
+type EditModeProps = BaseProps & {
+  mode: 'edit'
+  defaultData: Partial<TTodoFormData>
+  onSubmit: (data: TTodoFormData) => void
+  isMutationPending?: boolean
+}
+
+type ViewModeProps = BaseProps & {
+  mode: 'view'
+  defaultData: Partial<TTodoFormData>
+  onSubmit?: undefined
+  isMutationPending?: undefined
+}
+
+export type TodoDialogProps = CreateModeProps | EditModeProps | ViewModeProps
+
+export type DialogMode = TodoDialogProps['mode']
+
+const TITLE_BY_MODE: Record<DialogMode, string> = {
+  create: 'Create Todo',
+  edit: 'Edit Todo',
+  view: 'View Todo',
+}
+
+export const TodoDialog = ({
+  mode,
+  open,
+  children,
+  defaultData,
+  onOpenChange,
+  onSubmit,
+  isMutationPending,
+}: TodoDialogProps) => {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="h-max text-xl">{TITLE_BY_MODE[mode]}</AlertDialogTitle>
+        </AlertDialogHeader>
+
+        {mode === 'view' ? (
+          <TodoForm
+            mode={mode}
+            initialData={defaultData}
+            onCancel={() => onOpenChange(false)}
+            disabled={true}
+          />
+        ) : (
+          <TodoForm
+            mode={mode}
+            initialData={defaultData}
+            onCancel={() => onOpenChange(false)}
+            disabled={false}
+            onSubmit={onSubmit}
+            isSubmitting={isMutationPending}
+          />
+        )}
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}