Create context for task drawer

web/components/layout/layout-navbar/sections/actions.section.tsx

@@ -1,13 +1,13 @@
 import { Navbar, Title } from "@mantine/core";
 import React from "react";
-import { FolderPlus, Home, Note } from "tabler-icons-react";
+import { FolderPlus, Note } from "tabler-icons-react";
 import useCreateProjectModal from "../../../../hooks/useCreateProjectModal";
-import CreateTaskDrawer from "../../../tasks/create-task-drawer";
+import useTaskContext from "../../../../hooks/useTaskContext";
 
 import NavbarButton from "../navbar.button";
 
 const ActionsSection: React.FC = () => {
-  const [opened, setOpened] = React.useState(false);
+  const { setOpened } = useTaskContext();
   const { openCreateProjectModal } = useCreateProjectModal();
 
   const onClick = () => setOpened(true);
@@ -26,8 +26,6 @@ const ActionsSection: React.FC = () => {
         color={"grape"}
         label={"Create a new project"}
       />
-
-      <CreateTaskDrawer opened={opened} setOpened={setOpened} />
     </Navbar.Section>
   );
 };

web/components/tasks/create-task-drawer.tsx → web/components/tasks/task-drawer.tsx

@@ -3,9 +3,10 @@ import React from "react";
 
 import { useForm, zodResolver } from "@mantine/form";
 import { z } from "zod";
-import { Button, Drawer, Stack, TextInput } from "@mantine/core";
+import { Button, Drawer, Stack, TextInput, Text } from "@mantine/core";
 import { CreateTaskRequest } from "../../api/dto";
 import RichTextEditor from "../RichTextEditor";
+import useTaskContext from "../../hooks/useTaskContext";
 
 const initialValues: CreateTaskRequest = {
   title: "",
@@ -21,16 +22,9 @@ const schema = z.object({
   label: z.string(),
 });
 
-interface CreateTaskDrawerProps {
-  opened: boolean;
-  setOpened: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const CreateTaskDrawer: React.FC<CreateTaskDrawerProps> = ({
-  opened,
-  setOpened,
-}) => {
+const TaskDrawer: React.FC = () => {
   const { mutate, isLoading, isSuccess, isError, error } = useCreateTask();
+  const { opened, setOpened } = useTaskContext();
 
   const form = useForm({
     schema: zodResolver(schema),
@@ -49,19 +43,19 @@ const CreateTaskDrawer: React.FC<CreateTaskDrawerProps> = ({
     <Drawer
       opened={opened}
       position="right"
-      size="30%"
+      size="40%"
       onClose={() => setOpened(false)}
       padding="xl"
     >
       <form onSubmit={form.onSubmit((v) => mutate(v))}>
         <Stack>
           <TextInput
-            label="Name"
+            label="Task Name"
             placeholder="Rule the world!"
             disabled={isLoading}
             {...form.getInputProps("title")}
           />
-
+          <Text>Description</Text>
           <RichTextEditor {...form.getInputProps("description")} />
           <Button mt="md" type="submit" loading={isLoading}>
             Create a new task!
@@ -72,4 +66,4 @@ const CreateTaskDrawer: React.FC<CreateTaskDrawerProps> = ({
   );
 };
 
-export default CreateTaskDrawer;
+export default TaskDrawer;

web/hooks/useTaskContext.tsx

@@ -0,0 +1,8 @@
+import TaskContext, {
+  TaskContextInterface,
+} from "../providers/task.context.provider";
+import { useContext } from "react";
+
+const useTaskContext = () => useContext(TaskContext) as TaskContextInterface;
+
+export default useTaskContext;

web/pages/_app.tsx

@@ -1,12 +1,14 @@
 import type { AppProps } from "next/app";
 import Layout from "../components/layout";
 import Providers from "../providers";
+import TaskDrawer from "../components/tasks/task-drawer";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Providers>
       <Layout>
         <Component {...pageProps} />
+        <TaskDrawer />
       </Layout>
     </Providers>
   );

web/providers/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ModalsProvider from "./modal.provider";
 import QueryProvider from "./query.provider";
 import ThemeProvider from "./theme.provider";
+import { TaskProvider } from "./task.context.provider";
 
 type ProvidersProps = {
   children: React.ReactNode;
@@ -11,7 +12,9 @@ const Providers: React.FC<ProvidersProps> = ({ children }) => {
   return (
     <QueryProvider>
       <ThemeProvider>
-        <ModalsProvider>{children}</ModalsProvider>
+        <ModalsProvider>
+          <TaskProvider>{children}</TaskProvider>
+        </ModalsProvider>
       </ThemeProvider>
     </QueryProvider>
   );

web/providers/task.context.provider.tsx

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