Task Dialog context successfully implemented

web/api/dto.ts

@@ -26,7 +26,7 @@ export type CreateProjectRequest = {
   description: string;
 };
 
-export type CreateTaskRequest = {
+export type TaskRequest = {
   title: string;
   description: string;
   status: string;

web/components/tasks/task-cards.tsx

@@ -1,16 +1,19 @@
-import { Grid, Card, Title, Text, Stack } from "@mantine/core";
+import { Grid, Card, Title, Text, Stack, Button } from "@mantine/core";
 import { Task, Tasks } from "../../api/dto";
-import RichTextEditor from "../RichTextEditor";
+import useTaskContext from "../../hooks/useTaskContext";
 
 interface TaskCardProps {
   task: Task;
 }
 const TaskCard: React.FC<TaskCardProps> = ({ task }) => {
+  const { receiveTask } = useTaskContext();
+  const onClick = () => receiveTask(task);
   return (
     <Grid.Col sm={12} md={4} lg={2}>
       <Card shadow="lg" p="lg" sx={{ height: 150 }}>
         <Stack>
           <Title order={4}> {task.title}</Title>
+          <Button onClick={onClick}>Open</Button>
         </Stack>
       </Card>
     </Grid.Col>

web/components/tasks/task-drawer.tsx

@@ -4,11 +4,11 @@ import React from "react";
 import { useForm, zodResolver } from "@mantine/form";
 import { z } from "zod";
 import { Button, Drawer, Stack, TextInput, Text } from "@mantine/core";
-import { CreateTaskRequest } from "../../api/dto";
+import { TaskRequest } from "../../api/dto";
 import RichTextEditor from "../RichTextEditor";
 import useTaskContext from "../../hooks/useTaskContext";
 
-const initialValues: CreateTaskRequest = {
+const initialValues: TaskRequest = {
   title: "",
   description: "",
   status: "",
@@ -24,20 +24,21 @@ const schema = z.object({
 
 const TaskDrawer: React.FC = () => {
   const { mutate, isLoading, isSuccess, isError, error } = useCreateTask();
-  const { opened, setOpened } = useTaskContext();
+  const { opened, setOpened, currentTask } = useTaskContext();
 
   const form = useForm({
     schema: zodResolver(schema),
     initialValues,
   });
 
   React.useEffect(() => {
+    currentTask && form.setValues(currentTask);
     if (isSuccess) {
       setOpened(false);
     }
     if (isError) console.log(error);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSuccess, isError]);
+  }, [isSuccess, isError, currentTask]);
 
   return (
     <Drawer

web/providers/task.context.provider.tsx

@@ -1,12 +1,12 @@
 import { useDisclosure } from "@mantine/hooks";
 import { createContext, Dispatch, SetStateAction, useState } from "react";
-import { Task } from "../api/dto";
+import { TaskRequest, Task } from "../api/dto";
 
 export interface TaskContextInterface {
-  currentTask: Partial<Task> | null;
-  setCurrentTask: Dispatch<SetStateAction<Partial<Task> | null>>;
   opened: boolean;
   setOpened: Dispatch<SetStateAction<boolean>>;
+  currentTask: TaskRequest | null;
+  receiveTask: (task: TaskRequest) => void;
 }
 // Context of current viewed task for Dialog
 const TaskContext = createContext<TaskContextInterface | null>(null);
@@ -17,13 +17,18 @@ interface TaskProviderProps {
 
 export const TaskProvider: React.FC<TaskProviderProps> = ({ children }) => {
   const [opened, setOpened] = useState(false);
-  const [currentTask, setCurrentTask] = useState<Partial<Task> | null>(null);
+  const [currentTask, setCurrentTask] = useState<TaskRequest | null>(null);
 
-  const value = {
-    currentTask,
-    setCurrentTask,
+  const receiveTask = (task: TaskRequest) => {
+    setCurrentTask(task);
+    setOpened(true);
+  };
+
+  const value: TaskContextInterface = {
     opened,
+    currentTask,
     setOpened,
+    receiveTask,
   };
   return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
 };