【Next.js】登録したイベント情報の削除方法について

サンプルイメージ

サンプルイメージは下記のようになっています。
一覧画面で削除対象のイベントを選択します。(赤枠の箇所)

削除画面で削除ボタンをクリックします。

自動遷移して一覧画面で削除対象のイベント以外が表示されます。

ER図

ER図は、下記のようになっています。

画面側のコード

app/auth/eventDelete/page.tsx

'use client'

import deleteTargetEvent from "@/app/pages/api/deleteEvent";
import SelectEvent from "@/app/pages/api/selectEvent";
import { useRouter,useSearchParams } from "next/navigation"
import { useCallback, useEffect, useId,useState } from "react";

export default function EventDelete(){
    //ルーティングの設定
    const router = useRouter();
    //クライアントコンポーネントフックであるuseSearchParamsを使用する
    const searchParams = useSearchParams();

    //GETパラメータからユーザーIDとイベントIDを取得する
    const userId = searchParams.get("userId");
    const eventId = searchParams.get("eventId");

    console.log("GETパラメーターのユーザIDは、" + userId);
    console.log("GETパラメーターのイベントIDは、" + eventId);

    //ダッシュボードに戻るボタン押下時の処理
    const backToMyDashboard = ()=>{
        router.push("/auth/login/dashboard");
    }

    //削除対象のイベントの状態を保持する
    const [targetDeleteEvent,setTargetDeleteEvent] = useState<any[]>([]);
    //イベントサムネイルが無いい場合の画像イメージパス
    const defaultImage = '/uploads/default.png';
    const [imageSrc,setImageSrc] = useState(defaultImage);
    const [error,setError] = useState<string | null>(null);
    const [loading,setLoading] = useState(false);

    useEffect(()=>{
        const fetchEvent = async()=>{
            try{
                const event = await SelectEvent(Number(userId),Number(eventId));
                console.log("削除対象のデータは、" + event[0]);
                console.log("削除対象のデータは、" + event[0].userId);
                console.log("削除対象のデータは、" + JSON.stringify(event[0]));
                setTargetDeleteEvent(event[0]);
                if(event[0].eventthumbnailpath){
                    setImageSrc(event[0].eventthumbnailpath);
                }else{
                    setImageSrc(defaultImage);
                }
            }catch(error){
                console.log("削除対象データの取得に失敗しました。");
            }
        };
        fetchEvent();
    },[userId,eventId]);

    const handleSubmit = useCallback(async(e:React.FormEvent<HTMLFormElement>)=>{
        e.preventDefault();
        const formData = new FormData(e.target as HTMLFormElement);
        console.log("削除対象のフォームイベントは、" + formData);
        const success = await deleteTargetEvent(formData);
        if(success){
            router.push("/auth/login/dashboard");
        }else{
            setError("イベント削除に失敗しました");
        }
        setLoading(false)
    },[router]);

    return (
        <div>
            削除ページ
            <form onSubmit={handleSubmit} encType="multipart/form-data">
                <div className="userIdArea">
                    <input type="hidden" name="userId" value={targetDeleteEvent.userid || ''}/>                   
                </div>
                <div className="eventIdArea">
                    <input type="hidden" name="eventId" value={targetDeleteEvent.eventid || ''}/>
                </div>
                <div className="eventTitleArea">
                    <input
                        type="text"
                        name="eventTitle" 
                        defaultValue={targetDeleteEvent.eventtitle}
                        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight"
                        readOnly                                           
                    />                   
                </div>
                <div className="eventDetailArea">
                    <textarea
                        name="eventDetail"
                        defaultValue={targetDeleteEvent.eventdetail}
                        className="block p-2.5 w-full text-sm text^gray-900 border border-gray-300"
                        readOnly
                    ></textarea>
                </div>
                <div className="eventThumbnailArea">                     
                    <img src={imageSrc} alt="Event Thumbnail" className="w-full h-auto" />
                    
                    <input type="hidden" name="eventThumbnailPath" defaultValue={targetDeleteEvent.eventthumbnailpath} />
                </div>
                <div className="eventDeleteArea">
                    <button type="submit" className="btn btn-primary" disabled={loading}>
                        {loading ? "削除中...":"削除する"}
                    </button>
                    {/*<button className="btn btn-accent">クリアする</button>*/}
                    {/*<button className="btn btn-secondary" onClick={backToMyDashboard}>戻る</button>*/}
                </div>
            </form>
            <div className="eventDeleteArea">
                <button className="btn btn-secondary" onClick={backToMyDashboard}>戻る</button>
            </div>
        </div>
    )
}

サーバ側のコード

app/pages/api/deleteEvent.ts

'use server'
import { getDB } from "@/app/lib/db";

export default async function deleteTargetEvent(formData:FormData){
    //削除フラグを用意する
    let deleteFlag = false;
    const userId = formData.get('userId');
    const eventId = formData.get('eventId');
    const eventTitle = formData.get('eventTitle');
    const eventDetail = formData.get('eventDetail');
    const eventThumbnailPath = formData.get('eventThumbnailPath') as File;

    console.log("削除対象のユーザIDは、" + userId);
    console.log("削除対象のイベントIDは、" + eventId);
    console.log("削除対象のイベントタイトルは、" + eventTitle);
    console.log("削除対象のイベント詳細は、" + eventDetail);
    console.log("削除対象のイベントサムネイルは、" + eventThumbnailPath);

    //データベースと接続する
    const connection = await getDB();
    try{
        await connection.execute('DELETE FROM eventInfo WHERE userid = ? AND eventid = ?',[userId,eventId]);
        const deletedEvent = await connection.query('SELECT * FROM eventinfo WHERE userid = ?',[userId]);
        /*
        if(deleteTargetEvent[0].length == 0){
            console.log("対象のイベントを削除しました。");
            deleteFlag = true;
        }else{
            console.log("対象のイベントをデータベースから削除できていません。");
        }
        */
        deleteFlag = true;
        return deleteFlag;
    }catch(error){
        console.log("対象のイベントの削除に失敗しました");
    }finally{
        connection.end();
    }
}

以上です。

参考にしたサイト

ER図作成でdraw.ioを使ったサイトです↓