# カレンダーの予定作成機能5 では`CreateScheduleModal.tsx`をリファクタしていきます。`CreateScheduleModal.tsx`のロジックをhooksに切り出しましょう。`hooks`配下に`useCreateSchedule.ts`を作成しましょう。 propsとして、`closeModal`と`addSchedule`を受け取れるようにしましょう。そして、`newSchedule`と`errorMessage`のstateと、`changeNewSchedule`、`handleCreateSchedule`の関数を移行して、これらを返却するようにしましょう。

import { ChangeEvent, FormEvent, useState } from "react"
import { format, parse } from "date-fns"

import { NewSchedule, Schedule } from "../types/calendar"

type PropsType = {
  closeModal: () => void
  addSchedule: (schedule: Schedule) => void
}

export const useCreateSchedule = ({ closeModal, addSchedule }: PropsType) => {
  const [newSchedule, setNewSchedule] = useState<NewSchedule>({
    title: "",
    date: format(new Date(), "yyyy-MM-dd"),
    description: "",
  })
  const [errorMessage, setErrorMessage] = useState("")

  const changeNewSchedule = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = event.target
    setNewSchedule({ ...newSchedule, [name]: value })
  };

  const handleCreateSchedule = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const { title, date, description } = newSchedule
    if (title === "") {
      setErrorMessage("タイトルを入力してください")
      return;
    } else {
      setErrorMessage("")
    }
    const schedule: Schedule = {
      id: 100001,
      title,
      date: parse(date, "yyyy-MM-dd", new Date()),
      description: description,
    };
    addSchedule(schedule)
    setNewSchedule({
      title: "",
      date: format(new Date(), "yyyy-MM-dd"),
      description: "",
    });
    closeModal()
  }

  return {
    errorMessage,
    newSchedule,
    changeNewSchedule,
    handleCreateSchedule,
  }
}

また、`newSchedule`の初期値に関してですが、`handleCreateSchedule`にて再度セットするので、定数として定義して呼び出すようにしましょう。

import { ChangeEvent, FormEvent, useState } from "react"
import { format, parse } from "date-fns"

import { NewSchedule, Schedule } from "../types/calendar"

const INIT_SCHEDULE: NewSchedule = {
  title: "",
  date: format(new Date(), "yyyy-MM-dd"),
  description: "",
}

type PropsType = {
  closeModal: () => void
  addSchedule: (schedule: Schedule) => void
}

export const useCreateSchedule = ({ closeModal, addSchedule }: PropsType) => {
  const [newSchedule, setNewSchedule] = useState<NewSchedule>(INIT_SCHEDULE)
  const [errorMessage, setErrorMessage] = useState("")

  const changeNewSchedule = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = event.target
    setNewSchedule({ ...newSchedule, [name]: value })
  };

  const handleCreateSchedule = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const { title, date, description } = newSchedule
    if (title === "") {
      setErrorMessage("タイトルを入力してください")
      return;
    } else {
      setErrorMessage("")
    }
    const schedule: Schedule = {
      id: 100001,
      title,
      date: parse(date, "yyyy-MM-dd", new Date()),
      description: description,
    }
    addSchedule(schedule)
    setNewSchedule(INIT_SCHEDULE);
    closeModal()
  }

こちらを`CreateScheduleModal.tsx`にて呼び出すようにしましょう。

import Modal from "react-modal"
import { format } from "date-fns"
import { Input } from "../atoms/Input"
import { PrimaryBtn } from "../atoms/PrimaryBtn"
import { Schedule } from "../../types/calendar"
import { Textarea } from "../atoms/Textarea"
import { useCreateSchedule } from "../../hooks/useCreateSchedule"

type PropsType = {
  isOpen: boolean
  closeModal: () => void
  addSchedule: (schedule: Schedule) => void
};

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    width: "30%",
    height: "50vh",
    transform: "translate(-50%, -50%)",
  },
};

export const CreateScheduleModal = ({
  isOpen,
  closeModal,
  addSchedule,
}: PropsType) => {
  const { newSchedule, errorMessage, changeNewSchedule, handleCreateSchedule } =  useCreateSchedule({ closeModal, addSchedule })

  return (
    <Modal isOpen={isOpen} style={customStyles} onRequestClose={closeModal}>
      <div>
        <h3 className="text-center text-3xl text-lime-800 font-bold pb-5">
          予定作成
        </h3>
        {errorMessage !== "" && (
          <div className="p-5 mb-5 bg-red-500 text-white text-center rounded-lg">
            {errorMessage}
          </div>
        )}
        <form className="flex flex-col gap-8" onSubmit={handleCreateSchedule}>
          <div className="w-[100%] flex items-center">
            <label className="w-[30%] text-lime-800">タイトル</label>
            <Input
              name="title"
              type="text"
              value={newSchedule.title}
              onChange={changeNewSchedule}
            />
          </div>
          <div className="w-[100%] flex items-center">
            <label className="w-[30%] text-lime-800">日付</label>
            <Input
              name="date"
              type="date"
              value={format(newSchedule.date, "yyyy-MM-dd")}
              onChange={changeNewSchedule}
            />
          </div>
          <div className="w-[100%] flex items-center">
            <label className="w-[30%] text-lime-800">内容</label>
            <Textarea
              name="description"
              value={newSchedule.description}
              onChange={changeNewSchedule}
            />
          </div>
          <div className="flex justify-center">
            <PrimaryBtn size="lg" onClick={() => null}>
              作成
            </PrimaryBtn>
          </div>
        </form>
      </div>
    </Modal>
  )
}

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` refactor: CreateScheduleModalのロジックをuseCreateScheduleに切り出した ``` としましょう。では予定作成機能の実装が完了したので、GitHubにpushしましょう。 ```basic git push origin feature/add-schedule-func ``` これでGitHubのリポジトリのページにいき、main <- feature/add-schedule-funcのPRを作成しましょう。 PRのタイトルは ``` feat: カレンダーの予定を作成できるようにした ``` としましょう。作成したら自身で`Merge pull request`を押してmergeしましょう。 mergeが完了したらWarpに戻り、mainをpullしましょう。 ```bash git switch main ``` ```bash git pull origin main ```