From 3c992d5df7da0ef2dd60c9065c18b362c7078645 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Fri, 6 Feb 2026 15:11:03 +0100 Subject: [PATCH] Convert Modal component to Typescript --- src/components/Footer/Footer.jsx | 2 +- src/components/createEventBtn/CreateEventBtn.jsx | 2 +- src/components/ui/modal/{modal.jsx => modal.tsx} | 13 ++++++++++--- .../components/pendingMembers/PendingMembers.jsx | 2 +- src/pages/Login/components/loginform/loginForm.jsx | 2 +- .../components/SettingsModal/SettingsModal.jsx | 2 +- src/pages/Register/RegisterPage.jsx | 2 +- .../components/manageMember/ManageMember.jsx | 2 +- .../deactivateMember/deactivateMemberBtn.jsx | 2 +- .../manageMember/modifyrole/ModifyRole.jsx | 2 +- .../eventDetail/components/EventTask/EventTask.jsx | 2 +- .../components/createTaskBtn/createTaskBtn.jsx | 2 +- .../components/deleteEventBtn/deleteEventBtn.jsx | 2 +- .../components/deleteTaskBtn/deleteTaskBtn.jsx | 2 +- src/stories/Modal.stories.jsx | 2 +- 15 files changed, 24 insertions(+), 17 deletions(-) rename src/components/ui/modal/{modal.jsx => modal.tsx} (67%) diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 754f071..d5ded57 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -1,7 +1,7 @@ import styles from "./Footer.module.css" import {Link} from "react-router"; import {useState} from "react"; -import Modal from "../ui/modal/modal.jsx"; +import Modal from "../ui/modal/modal.tsx"; import Button from "../ui/button/button.tsx"; import scrollToTop from "../../utils/scrollToTop.js"; diff --git a/src/components/createEventBtn/CreateEventBtn.jsx b/src/components/createEventBtn/CreateEventBtn.jsx index becbc76..019b836 100644 --- a/src/components/createEventBtn/CreateEventBtn.jsx +++ b/src/components/createEventBtn/CreateEventBtn.jsx @@ -1,6 +1,6 @@ import styles from "./createEventBtn.module.css" import { useState, useContext } from "react"; -import Modal from "../ui/modal/modal.jsx"; +import Modal from "../ui/modal/modal.tsx"; import Button from "../ui/button/button.tsx"; import TextInput from "../ui/input/input.tsx"; import { EventContext } from "../../contexts/events/EventContext.js"; diff --git a/src/components/ui/modal/modal.jsx b/src/components/ui/modal/modal.tsx similarity index 67% rename from src/components/ui/modal/modal.jsx rename to src/components/ui/modal/modal.tsx index 82d60a2..46db76f 100644 --- a/src/components/ui/modal/modal.jsx +++ b/src/components/ui/modal/modal.tsx @@ -1,16 +1,23 @@ +import { ReactNode, MouseEvent } from "react"; import { createPortal } from "react-dom"; import styles from "./modal.module.css"; -import Button from "../button/button.tsx"; +import Button from "../button/button"; -const Modal = ({ open, onClose, children, title }) => { +interface ModalProps { + open: boolean; + onClose: () => void; + children: ReactNode; + title?: string; +} +const Modal = ({ open, onClose, children, title }: ModalProps) => { if (!open) return null; const handleOverlayClick = () => { onClose(); }; - const handleModalClick = (e) => { + const handleModalClick = (e: MouseEvent) => { e.stopPropagation(); }; diff --git a/src/pages/Admin/components/pendingMembers/PendingMembers.jsx b/src/pages/Admin/components/pendingMembers/PendingMembers.jsx index 151856e..19b1a1a 100644 --- a/src/pages/Admin/components/pendingMembers/PendingMembers.jsx +++ b/src/pages/Admin/components/pendingMembers/PendingMembers.jsx @@ -1,7 +1,7 @@ import React, {useState, useEffect} from "react"; import Button from "../../../../components/ui/button/button.tsx"; import styles from "./PendingMembers.module.css"; -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import getUserToValidate from "../../../../utils/users/getUserToValidate.js"; import getUserById from "../../../../utils/users/getUserById.js"; import validateUser from "../../../../utils/users/validateUser.js"; diff --git a/src/pages/Login/components/loginform/loginForm.jsx b/src/pages/Login/components/loginform/loginForm.jsx index 80654f3..b4b3338 100644 --- a/src/pages/Login/components/loginform/loginForm.jsx +++ b/src/pages/Login/components/loginform/loginForm.jsx @@ -2,7 +2,7 @@ import { useState, useContext } from "react"; import styles from "./loginForm.module.css"; import Button from "../../../../components/ui/button/button.tsx"; import Input from "../../../../components/ui/input/input.tsx"; -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import { useNavigate } from "react-router"; import { AuthContext } from "../../../../contexts/auth/AuthContext.js"; diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.jsx b/src/pages/Profile/components/SettingsModal/SettingsModal.jsx index a831fba..c5e0ff3 100644 --- a/src/pages/Profile/components/SettingsModal/SettingsModal.jsx +++ b/src/pages/Profile/components/SettingsModal/SettingsModal.jsx @@ -1,4 +1,4 @@ -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import Button from "../../../../components/ui/button/button.tsx"; import styles from "./SettingsModal.module.css" import { useContext, useState } from "react"; diff --git a/src/pages/Register/RegisterPage.jsx b/src/pages/Register/RegisterPage.jsx index f3bebaa..48c9751 100644 --- a/src/pages/Register/RegisterPage.jsx +++ b/src/pages/Register/RegisterPage.jsx @@ -6,7 +6,7 @@ import {useContext, useEffect, useState} from "react"; import register from "../../utils/register.js"; import { useNavigate } from "react-router"; import { AuthContext } from "../../contexts/auth/AuthContext.js"; -import Modal from "../../components/ui/modal/modal.jsx"; +import Modal from "../../components/ui/modal/modal.tsx"; function RegisterPage() { diff --git a/src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx b/src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx index 2ee7fc0..46f8ac2 100644 --- a/src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx +++ b/src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx @@ -1,5 +1,5 @@ import Button from "../../../../components/ui/button/button.tsx"; -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import {useContext, useState} from "react"; import styles from "./manageMember.module.css" import DeactivateMemberBtn from "./deactivateMember/deactivateMemberBtn.jsx"; diff --git a/src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx b/src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx index af6c7af..2f586f6 100644 --- a/src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx +++ b/src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx @@ -1,5 +1,5 @@ import Button from "../../../../../components/ui/button/button.tsx"; -import Modal from "../../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../../components/ui/modal/modal.tsx"; import { useState } from "react"; import deactivateUser from "../../../../../utils/users/deactivateUser.js" import { useNavigate } from "react-router"; diff --git a/src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx b/src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx index b5ac70b..9f847f4 100644 --- a/src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx +++ b/src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx @@ -3,7 +3,7 @@ import Button from "../../../../../components/ui/button/button.tsx"; import modifyRole from "../../../../../utils/users/modifyRole.js"; import { useState, useEffect } from "react"; import getRoles from "../../../../../utils/getRoles.js"; -import Modal from "../../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../../components/ui/modal/modal.tsx"; export default function ModifyRole({ user }) { diff --git a/src/pages/eventDetail/components/EventTask/EventTask.jsx b/src/pages/eventDetail/components/EventTask/EventTask.jsx index 2c60a79..ff10dbb 100644 --- a/src/pages/eventDetail/components/EventTask/EventTask.jsx +++ b/src/pages/eventDetail/components/EventTask/EventTask.jsx @@ -5,7 +5,7 @@ import assign from "../../../../utils/tasks/assign.js"; import unAssign from "../../../../utils/tasks/unAssign.js"; import { useContext, useEffect, useState } from "react"; import isAssigned from "../../../../utils/tasks/isAssigned.js"; -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import { AuthContext } from "../../../../contexts/auth/AuthContext.js"; import DeleteTaskBtn from "../deleteTaskBtn/deleteTaskBtn.jsx"; diff --git a/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx index a6bdb89..6ad9d4b 100644 --- a/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx +++ b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx @@ -2,7 +2,7 @@ import styles from "../../eventDetail.module.css"; import Button from "../../../../components/ui/button/button.tsx"; import {useContext, useState} from "react"; import TextInput from "../../../../components/ui/input/input.tsx"; -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import createTaskApi from "../../../../utils/tasks/createTask.js"; import {EventDetailContext} from "../../../../contexts/eventDetail/eventDetail.js"; diff --git a/src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx b/src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx index 92eb5c3..c3b4383 100644 --- a/src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx +++ b/src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx @@ -1,6 +1,6 @@ import styles from "../../eventDetail.module.css"; import Button from "../../../../components/ui/button/button.tsx"; -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import { useContext, useState } from "react"; import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js"; import { EventContext } from "../../../../contexts/events/EventContext.js"; diff --git a/src/pages/eventDetail/components/deleteTaskBtn/deleteTaskBtn.jsx b/src/pages/eventDetail/components/deleteTaskBtn/deleteTaskBtn.jsx index 28f507a..90a749b 100644 --- a/src/pages/eventDetail/components/deleteTaskBtn/deleteTaskBtn.jsx +++ b/src/pages/eventDetail/components/deleteTaskBtn/deleteTaskBtn.jsx @@ -3,7 +3,7 @@ import { AuthContext } from "../../../../contexts/auth/AuthContext.js"; import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js"; import Button from "../../../../components/ui/button/button.tsx"; import { useState } from "react"; -import Modal from "../../../../components/ui/modal/modal.jsx"; +import Modal from "../../../../components/ui/modal/modal.tsx"; import styles from "../../eventDetail.module.css"; export default function DeleteTaskBtn({ taskId, eventId, taskName }) { diff --git a/src/stories/Modal.stories.jsx b/src/stories/Modal.stories.jsx index eb0b6ec..0983105 100644 --- a/src/stories/Modal.stories.jsx +++ b/src/stories/Modal.stories.jsx @@ -1,4 +1,4 @@ -import Modal from "../components/ui/modal/modal.jsx"; +import Modal from "../components/ui/modal/modal.tsx"; import Button from "../components/ui/button/button.tsx"; import { useState } from "react";