CreateModal にタイトルとTaskEditorを表示

itizawa · Dec 17, 2023 · 758d6f5 · 758d6f5
1 parent 4c5baa9
commit 758d6f5
Showing 1 changed file with 8 additions and 69 deletions.
diff --git a/src/app/_components/domains/Task/CreateTaskModal/CreateTaskModal.tsx b/src/app/_components/domains/Task/CreateTaskModal/CreateTaskModal.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { FC, useCallback, useState } from 'react';
-import { Button, Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, Textarea } from '@nextui-org/react';
-import { Controller, SubmitHandler, useForm } from 'react-hook-form';
+import { FC, useCallback } from 'react';
+import { Input, Modal, ModalBody, ModalContent } from '@nextui-org/react';
+import { TaskEditor } from '../TaskEditor';
 import { Task } from '~/domains/Task';
 
 type Props = {
@@ -11,79 +11,18 @@ type Props = {
   currentTask?: Task;
 };
 
-interface IFormInput {
-  title: string;
-  body: string;
-}
-
 export const CreateModal: FC<Props> = ({ isOpen, onOpenChange, currentTask }) => {
-  const [isLoading, setIsLoading] = useState(false);
-
-  const { control, handleSubmit, reset } = useForm<IFormInput>({
-    defaultValues: {
-      title: currentTask?.title,
-      body: currentTask?.body,
-    },
-  });
-
   const handleOpenChange = useCallback(() => {
-    reset();
     onOpenChange();
-  }, [onOpenChange, reset]);
-
-  const onSubmit: SubmitHandler<IFormInput> = useCallback(async () => {
-    if (isLoading) return;
-    setIsLoading(true);
-    new Promise((resolve) => setTimeout(resolve, 1000))
-      .catch((error) => {
-        // TODO: 本来はコンソールに出すのではなく、ユーザーにエラーを通知する
-        console.error(error);
-      })
-      .then(() => {
-        handleOpenChange();
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
-  }, [handleOpenChange, isLoading]);
+  }, [onOpenChange]);
 
   return (
     <Modal isOpen={isOpen} onOpenChange={handleOpenChange} placement="center" hideCloseButton size="xl">
       <ModalContent>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <ModalHeader>タスクを{currentTask ? '編集' : '作成'}する</ModalHeader>
-          <ModalBody>
-            <Controller
-              name="title"
-              control={control}
-              render={({ field, fieldState }) => (
-                <Input
-                  {...field}
-                  label="タイトル"
-                  isInvalid={fieldState.isDirty && field.value.length === 0}
-                  errorMessage={fieldState.isDirty && field.value.length === 0 && 'タイトルを入力してください'}
-                />
-              )}
-            />
-            <Controller
-              name="body"
-              control={control}
-              render={({ field, fieldState }) => (
-                <Textarea
-                  {...field}
-                  label="説明"
-                  isInvalid={fieldState.isDirty && field.value.length === 0}
-                  errorMessage={fieldState.isDirty && field.value.length === 0 && 'タイトルを入力してください'}
-                />
-              )}
-            />
-          </ModalBody>
-          <ModalFooter>
-            <Button color="primary" onClick={handleSubmit(onSubmit)} isLoading={isLoading}>
-              タスクを作成
-            </Button>
-          </ModalFooter>
-        </form>
+        <ModalBody className="my-[8px]">
+          <Input defaultValue={currentTask?.title} placeholder="タスクの名前" variant="underlined" size="lg" />
+          <TaskEditor task={currentTask} />
+        </ModalBody>
       </ModalContent>
     </Modal>
   );