カレンダーアプリを作る(フロントエンド編③)

こちらの記事は前回の続きになります。
機能要件最後の

• 削除ボタンを押すと予定が削除される

を実装していきます。

実装

実装1　削除ボタンを作成する。

まず、どのタイミングで削除するかですが、このアプリケーションでは、編集フォームを開くと、そこに削除ボタンがあり、編集OR削除ができるようにしたいと思います。
そうすることで、編集フォームを開く(=カレンダー上で登録済みのスケジュールを選択する)時にスケジュールのIDを取得することができます。

export const EditScheduleForm = (props: any) => {
  ...

  const onDeleteEvent = () =>{
   console.log(eventsId)
  }
  return (
    <div>
      <ScheduleForm
        allDay={{ isAllDay, setIsAllDay }}
        title={{ eventsTitle, setEventsTitle }}
        startDate={{ eventsStartDate, setEventsStartDate }}
        startTime={{ eventsStartTime, setEventsStartTime }}
        endDate={{ eventsEndDate, setEventsEndDate }}
        endTime={{ eventsEndTime, setEventsEndTime }}
        format={format}
        clickEvent={onEditEvent}
      />
      <Button onClick={onDeleteEvent}>削除</Button>
    </div>
  );
};

削除ボタンを押すと選択しているスケジュールのIDを取得できるようになりました。

実装2　スケジュールを削除する機能を実装する

最後にスケジュールをカレンダーから削除する機能を実装します。
こちらは簡単で、filterメソッドを使い、消したいスケジュールのIDと一致しないものを残してらたな配列を作成し、setMyEventsを更新します。

export const EditScheduleForm = (props: any) => {
  ...

  const onDeleteEvent = () =>{
    setMyEvents((prevEvent: any) =>
      prevEvent.filter((event: any) => event.id !== eventsId)
    );
  }
  return (
    <div>
      <ScheduleForm
      ...
  );
};

これで要件にあった機能は全て実装しました。

実装3　型定義

最後に型を定義していきます。
カスタムフック内で使う型と、フォームコンポーネント内で使う型を定義しました。
それぞれの型をセットすれば完了です。

// /src/components/Calendar/types/hooks.ts
import { EventImpl } from "@fullcalendar/core/internal";

export type MyEventsType = {
  id: string;
  title: string;
  allDay: boolean;
  start: Date | undefined;
  end: Date | undefined;
};

export type SelectEventType = {
  start: Date;
  end: Date;
  startStr: string;
  endStr: string;
  allDay: boolean;
  jsEvent: MouseEvent | null;
  view: unknown;
};

export type EventClickArg = {
  el: HTMLElement;
  event: EventImpl;
  jsEvent: MouseEvent;
  view: unknown;
};

// /src/components/Calendar/types/form.ts

import { Dispatch, SetStateAction } from "react";

export type ScheduleFormProps = {
  clickEvent: () => void;
  title: {
    eventsTitle: string;
    setEventsTitle: Dispatch<SetStateAction<string>>;
  };
  allDay: {
    isAllDay: boolean;
    setIsAllDay: Dispatch<SetStateAction<boolean>>;
  };
  startDate: {
    eventsStartDate: Date | undefined;
    setEventsStartDate: Dispatch<SetStateAction<Date | undefined>>;
  };
  startTime: {
    eventsStartTime: string;
    setEventsStartTime: Dispatch<SetStateAction<string>>;
  };
  endDate: {
    eventsEndDate: Date | undefined;
    setEventsEndDate: Dispatch<SetStateAction<Date | undefined>>;
  };
  endTime: {
    eventsEndTime: string;
    setEventsEndTime: Dispatch<SetStateAction<string>>;
  };
  format: (date: Date | undefined) => string | undefined;
};

export type EditScheduleFormProps = {
  title: {
    eventsTitle: string;
    setEventsTitle: Dispatch<SetStateAction<string>>;
  };
  allDay: {
    isAllDay: boolean;
    setIsAllDay: Dispatch<SetStateAction<boolean>>;
  };
  startDate: {
    eventsStartDate: Date | undefined;
    setEventsStartDate: Dispatch<SetStateAction<Date | undefined>>;
  };
  startTime: {
    eventsStartTime: string;
    setEventsStartTime: Dispatch<SetStateAction<string>>;
  };
  endDate: {
    eventsEndDate: Date | undefined;
    setEventsEndDate: Dispatch<SetStateAction<Date | undefined>>;
  };
  endTime: {
    eventsEndTime: string;
    setEventsEndTime: Dispatch<SetStateAction<string>>;
  };
  format: (date: Date | undefined) => string | undefined;
  onEditEvent: () => void;
  onDeleteEvent: () => void;
};

完成

デザイン等を整えて最終的には以下のようになりました。

これにてフロントエンドの実装は一旦以上になります。
ですが、現状のままだとデータを保持しておくことができないため、バックエンドを構築し、データCRUD処理をできるようにしていきます。
カレンダーアプリを作る(バックエンド編)では、DockerでNest.js+Prisma+MySQLの環境構築をし、カレンダーデータの保存をできるようにしたいと思います。