# 予定をカレンダーに反映させる3

ここで、`CalendarPage.tsx`のロジック部分をhooksに切り出しましょう。

`src`配下にhooksディレクトリを作成し、その中に`useCalendar.ts`を作成しましょう。

この中に、`dateList`のstateと、`useEffect`の処理を移行します。

また、propsとして、`currentDate`を受け取れるようにして、`today`の部分を`currentDate`に修正します。

`return`としては、`dateList`を返却します。

{% code title="src/hooks/useCalendar.tsx◎" %}

```typescript
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>([]);

    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 = 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
    }
}
```

{% endcode %}

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

`useCalendar`の引数には、`today`を渡しましょう。

<pre class="language-tsx" data-title="pages/CalendarPage.tsx◎"><code class="lang-tsx">import { getMonth} from "date-fns";
import { CalendarHeader } from "../organisms/CalendarHeader";
import { CalendarBody } from "../organisms/CalendarBody";
<strong>import { useCalendar } from "../../hooks/useCalendar";
</strong>
export const CalendarPage = () => {
<strong>  const today = new Date()
</strong><strong>  const { dateList } = useCalendar({ currentDate: today })
</strong>
  return (
    &#x3C;>
      &#x3C;h1 className=" font-bold text-3xl mb-5">{`${getMonth(today) + 1}月`}&#x3C;/h1>
      &#x3C;table className="w-[80%] border-collapse border-2 border-solid border-lime-800 table-fixed">
        &#x3C;CalendarHeader />
        &#x3C;CalendarBody currentDate={today} dateList={dateList} />
      &#x3C;/table>
    &#x3C;/>
  )
}
</code></pre>

ここまでの作業をcommitしましょう。

```bash
git add .
```

```bash
git commit
```

commitメッセージは

```
refactor: カレンダーページのロジックをuseCalendarに切り出した
```

としましょう。

では予定をカレンダーに反映させることができましたので、GitHubにpushしましょう。

```basic
git push origin feature/insert-schedule
```

これでGitHubのリポジトリのページにいき、main <- feature/insert-scheduleのPRを作成しましょう。

PRのタイトルは

```
feat: 予定をカレンダーに表示するようにした
```

としましょう。

作成したら自身で`Merge pull request`を押してmergeしましょう。

mergeが完了したらWarpに戻り、mainをpullしましょう。

```bash
git switch main
```

```bash
git pull origin main
```