# カレンダーの予定作成機能3 では実際にカレンダーに予定を追加しましょう。そのため、`dateList`を更新する必要があるので、新しい予定を引数として受け取り、`dateList`を更新する関数を作成しましょう。 `useCalendar`に`addSchedule`という関数を定義します。まず、`newDateList`という`dateList`のコピーを作成します。次に`newDateList`から引数で受け取った`schedule`の日付のインデックスを取得し、そのインデックスの`schedules`に`schedule`を格納するようにします。そして、setDdateListにてnewDateListをセットするようにします。こちらの関数を`return`にて返却するようにしましょう。

import { useEffect, useState } from "react"
import {
  eachDayOfInterval,
  eachWeekOfInterval,
  endOfMonth,
  endOfWeek,
  isSameDay,
  startOfMonth,
} from "date-fns"
import { DateList, Schedule } from "../types/calendar"
import { getScheduleList } from "../api/calendar"

type PropsType = {
  currentDate: Date
}

export const useCalendar = ({ currentDate }: PropsType) => {
    const [dateList, setDateList] = useState<DateList>([])

    const addSchedule = (schedule: Schedule) => {
      const newDateList = [...dateList]
      const firstIndex = newDateList.findIndex((oneWeek) =>
        oneWeek.some((item) => isSameDay(item.date, schedule.date))
      )
      if (firstIndex === -1) return
      const secondIndex = newDateList[firstIndex].findIndex((item) =>
        isSameDay(item.date, schedule.date)
      )
      newDateList[firstIndex][secondIndex].schedules = [
        ...newDateList[firstIndex][secondIndex].schedules,
        schedule,
      ]
      setDateList(newDateList)
    }
...
    return {
      dateList,
      addSchedule,
    }
...

ここで、firstIndexとsecondIndexを取得する処理がuseEffect内の処理と同じですので、その部分を関数として切り出しましょう。`getDateListIndex`という関数にて`currentDateList`と`schedule`を受け取り、`firstIndex`、`secondIndex`を配列の形で返却します。

...
  const getDateListIndex = (
    currentDateList: DateList,
    schedule: Schedule
  ): number[] => {
    const firstIndex = currentDateList.findIndex((oneWeek) => {
      return oneWeek.some((item) => isSameDay(item.date, schedule.date));
    });
    if (firstIndex === -1) return [-1, -1];
    const secondIndex = currentDateList[firstIndex].findIndex((item) => {
      return isSameDay(item.date, schedule.date);
    });
    return [firstIndex, secondIndex];
  };

  const addSchedule = (schedule: Schedule) => {
    const newDateList = [...dateList];

    const [firstIndex, secondIndex] = getDateListIndex(newDateList, schedule);
    if (firstIndex === -1) return;

    newDateList[firstIndex][secondIndex].schedules = [
      ...newDateList[firstIndex][secondIndex].schedules,
      schedule,
    ];
    setDateList(newDateList);
  };

  useEffect(() => {
    const monthOfSundayList = eachWeekOfInterval({
      start: startOfMonth(currentDate),
      end: endOfMonth(currentDate),
    });
    const newDateList: DateList = monthOfSundayList.map((date) => {
      return eachDayOfInterval({
        start: date,
        end: endOfWeek(date),
      }).map((date) => ({ date, schedules: [] as Schedule[] }));
    });

    const scheduleList = getScheduleList();
    scheduleList.forEach((schedule) => {
      const [firstIndex, secondIndex] = getDateListIndex(newDateList, schedule);
      if (firstIndex === -1) return;

      newDateList[firstIndex][secondIndex].schedules = [
        ...newDateList[firstIndex][secondIndex].schedules,
        schedule,
      ];
    });

    setDateList(newDateList);
  }, [currentDate]);

そして、`CalendarPage`の`useCalendar`にて、`addSchedule`を受け取ります。それを`CalendarNav`に渡します。

import { getMonth} from "date-fns";
import { CalendarHeader } from "../organisms/CalendarHeader";
import { CalendarBody } from "../organisms/CalendarBody";
import { useCalendar } from "../../hooks/useCalendar";
import { useState } from "react";
import { CalendarNav } from "../organisms/CalendarNav";

export const CalendarPage = () => {
  const [currentDate, setCurrentDate] = useState(new Date())
  const { dateList, addSchedule } = useCalendar({ currentDate: currentDate });

  return (
    <>
      <h1 className=" font-bold text-3xl mb-5">{`${
        getMonth(currentDate) + 1
      }月`}</h1>
      <CalendarNav setCurrentDate={setCurrentDate} addSchedule={addSchedule} />
      <table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        <CalendarHeader />
        <CalendarBody currentDate={currentDate} dateList={dateList} />
      </table>
    </>
  );
}

それを`CalendarNav`にて受け取れるようにし、`CreateScheduleModal`にて渡し、 `CreateScheduleModal`でも受け取れるようにします。

import { Dispatch, SetStateAction, useState } from "react"
import { addMonths } from "date-fns"
import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from "react-icons/fa"
import { PrimaryBtn } from "../atoms/PrimaryBtn"
import { CreateScheduleModal } from "./CreateScheduleModal"
import { Schedule } from "../../types/calendar"

type PropsType = {
  setCurrentDate: Dispatch<SetStateAction<Date>>;
  addSchedule: (schedule: Schedule) => void;
};

export const CalendarNav = ({ setCurrentDate, addSchedule }: PropsType) => {
...
      <CreateScheduleModal
        isOpen={isOpen}
        closeModal={closeModal}
        addSchedule={addSchedule}
      />
...

import Modal from "react-modal";
import { ChangeEvent, FormEvent, useState } from "react";
import { format } from "date-fns";
import { Input } from "../atoms/Input";
import { PrimaryBtn } from "../atoms/PrimaryBtn";
import { NewSchedule, Schedule } from "../../types/calendar";
import { Textarea } from "../atoms/Textarea";

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) => {
...

では、予定を作成する関数を作成します。formタグのonSubmitにセットしますので、デフォルトの挙動をキャンセルするため、`event.preventDefault()`を実行します。次に`addSchedule`を実行するのですが、渡す引数の型が`Schedule型`で、`newSchedule`は`NewSchedule型`なので型が異なります。そのため、`newSchedule`を`Schedule型`に変換する必要があるので、`newSchedule`から新しいオブジェクトを生成します。idは固定値として、`date`は`newSchedule.date`を文字列型からDate型に変換する必要があり、その場合は`parse`という関数にて変換することができます。parseは第一引数に文字列を渡し、第二引数にその文字列の形式を渡すことで変換することができます。そして作成したオブジェクトを`addSchedule`に渡して実行することで、新しい予定がカレンダーに追加されるかと思います。次に`setNewSchedule`にて`newSchedule`を初期化します。最後に`closeModal()`にてモーダルを閉じるようにしましょう。 formタグの`onSubmit`にこの関数を渡しましょう。

...
  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
    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()
  }
...
       <form className="flex flex-col gap-8" onSubmit={handleCreateSchedule}>
...

こちらを画面にて確認すると、新しい予定を追加することができるかと思います。

ここまでの作業をcommitしましょう。 ```bash git add . ``` ```bash git commit ``` commitメッセージは ``` feat: 予定作成フォームに入力した内容をカレンダーの予定に追加する機能を作成 ``` としましょう。