issue with formModal

[loggy7]

Unhandled Runtime Error
TypeError: forms[table] is not a function

Source
src\components\FormModal.tsx (151:20) @ setOpen

149 |
150 | ) : type === "create" || type === "update" ? (

151 | forms[table](setOpen, type, data, relatedData)
| ^
152 | ) : (
153 | "Form not found!"
154 | );

[loggy7]

the correct code
"use client";

import {
deleteClass,
deleteExam,
deleteStudent,
deleteSubject,
deleteTeacher,
} from "@/lib/actions";
import dynamic from "next/dynamic";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { useFormState } from "react-dom";
import { toast } from "react-toastify";

// Définition des types pour les fonctions de suppression
type DeleteFunction = typeof deleteSubject;

const deleteActionMap: Record<string, DeleteFunction> = {
subject: deleteSubject,
class: deleteClass,
teacher: deleteTeacher,
student: deleteStudent,
exam: deleteExam,
// Placeholders pour les futures implémentations
parent: deleteSubject,
lesson: deleteSubject,
assignment: deleteSubject,
result: deleteSubject,
attendance: deleteSubject,
event: deleteSubject,
announcement: deleteSubject,
};

// Chargement dynamique des formulaires
const TeacherForm = dynamic(() => import("./forms/TeacherForm"), {
loading: () =>

Loading...

,
});
const StudentForm = dynamic(() => import("./forms/StudentForm"), {
loading: () =>

Loading...

,
});
const SubjectForm = dynamic(() => import("./forms/SubjectForm"), {
loading: () =>

Loading...

,
});
const ClassForm = dynamic(() => import("./forms/ClassForm"), {
loading: () =>

Loading...

,
});
const ExamForm = dynamic(() => import("./forms/ExamForm"), {
loading: () =>

Loading...

,
});

// Définition des types pour les fonctions de formulaire
type FormFunction = (
setOpen: Dispatch<SetStateAction>,
type: "create" | "update",
data?: any,
relatedData?: any
) => JSX.Element;

// Objet contenant les fonctions de formulaire
const forms: Record<string, FormFunction> = {
subject: (setOpen, type, data, relatedData) => (

),
class: (setOpen, type, data, relatedData) => (

),
teacher: (setOpen, type, data, relatedData) => (

),
student: (setOpen, type, data, relatedData) => (

),
exam: (setOpen, type, data, relatedData) => (

),
};

// Type pour les tables valides
type ValidTableType = keyof typeof forms;

// Props pour le composant FormModal
interface FormModalProps {
table: ValidTableType;
type: "create" | "update" | "delete";
data?: any;
id?: string | number;
relatedData?: any;
}

const FormModal = ({
table,
type,
data,
id,
relatedData,
}: FormModalProps) => {
const size = type === "create" ? "w-8 h-8" : "w-7 h-7";
const bgColor =
type === "create"
? "bg-lamaYellow"
: type === "update"
? "bg-lamaSky"
: "bg-lamaPurple";

const [open, setOpen] = useState(false);

const Form = () => {
const [state, formAction] = useFormState(deleteActionMap[table], {
success: false,
error: false,
});

const router = useRouter();

useEffect(() => {
  if (state.success) {
    toast(`${table} has been deleted!`);
    setOpen(false);
    router.refresh();
  }
}, [state, router]);

if (type === "delete" && id) {
  return (
    <form action={formAction} className="p-4 flex flex-col gap-4">
      <input type="text" name="id" value={id} hidden readOnly />
      <span className="text-center font-medium">
        All data will be lost. Are you sure you want to delete this {table}?
      </span>
      <button className="bg-red-700 text-white py-2 px-4 rounded-md border-none w-max self-center">
        Delete
      </button>
    </form>
  );
}

if (type === "create" || type === "update") {
  const FormComponent = forms[table];
  return FormComponent ? (
    FormComponent(setOpen, type, data, relatedData)
  ) : (
    <p>Form not yet implemented for {table}</p>
  );
}

return <p>Invalid form type</p>;

};

return (
<>
<button
className={${size} flex items-center justify-center rounded-full ${bgColor}}
onClick={() => setOpen(true)}
>
<Image src={/${type}.png} alt="" width={16} height={16} />

{open && (

<div
className="absolute top-4 right-4 cursor-pointer"
onClick={() => setOpen(false)}
>

)}
</>
);
};

export default FormModal;

[arbi-jridi]

you have to create a parentForm and call it