イベント削除完了ページの実装

[oumelab]

概要

イベント削除後に発生する 404 Not Found エラーを解決するため、イベント詳細ページや編集ページから削除が完了した際のリダイレクト先をイベント一覧ページではなく、専用の「イベント削除完了ページ」に変更する。

問題の背景

現在、イベント詳細ページや編集ページからイベントを削除すると、バックエンドの処理自体は成功するものの、ブラウザのコンソールに 404 Not Found エラーが発生している。

このエラーは以下の理由で発生していると特定済み。

1. イベント詳細ページ（または編集ページ）からイベント削除を実行する。
2. useMutation の onSuccess フック内でキャッシュを削除し、すぐに Maps('/events') でイベント一覧ページへリダイレクトする。
3. この際、削除されたイベントの情報を取得するための useQuery フックが、コンポーネントがアンマウントされるまでのわずかな時間差で再フェッチを試みてしまう。
4. すでにイベントは存在しないため、APIが 404 を返し、エラーログが表示される。

解決策

上記の問題を解決するため、以下の手順で「イベント削除完了ページ」を実装する。

1. 新しいコンポーネントの作成:

   • src/pages/EventDeleteCompletePage.tsx という新しいコンポーネントを作成する。
   • このページは、イベント削除が成功したことをユーザーに知らせるシンプルな UI を持つ。
   • UIには「イベントの削除が完了しました」というメッセージと、イベント一覧ページに戻るためのリンクボタンを配置する。
   • イベントキャンセル完了ページ src/pages/EventCancelCompletePage.tsx のUIと揃える、もしくはコンポーネント化して再利用する（キャンセルと削除で動的にメッセージなどを変更）

2. ルーティングの追加:

   • App.tsx またはルーティングを定義しているファイルに、新しいページへのルーティングを追加する。
   • 例: /events/delete/success

3. 既存の削除ロジックの修正:

   • useEventDelete フック内の useMutation の onSuccess フックを修正する。
   • 現在の Maps('/events') を、新しい削除完了ページへのナビゲーションに変更する。
   • 例: Maps('/events/delete/success', { replace: true });

4. キャッシュの無効化:

   • 削除完了ページに遷移することで、404 エラーの原因となる再フェッチは発生しなくなる。
   • ただし、イベント一覧のデータを最新の状態にするため、onSuccess フック内で queryClient.invalidateQueries({ queryKey: queryKeys.events }) は引き続き必要。

期待される結果

• イベント詳細ページや編集ページからイベントを削除しても、404 エラーが発生しなくなる。
• ユーザーは削除が完了したことを明確に認識できる。
• コードの責務が分離され、より堅牢なアプリケーション構造になる。

関連するファイル

• src/hooks/useEvents.ts (useMutation の onSuccess フックを修正)
• src/pages/EventDeleteSuccessPage.tsx (新規作成)
• src/App.tsx (ルーティングの追加)
• src/pages/EventCancelCompletePage.tsx （UI統一、または再利用）