polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix popup

This commit is contained in:
Guillaume Dorce 2022-09-28 22:29:27 +02:00
parent d10f0e7b9a
commit 85f8330b7d
2 changed files with 56 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Modal.tsx
View File

@ -8,7 +8,7 @@ const Modal = ({ children, show }: { children: ReactNode; show: boolean }) => {
(show ? '' : ' hidden')
}
>
<div className="absolute w-full h-full top-0 left-0 bg-grey opacity-40"></div>
<div className="absolute w-full h-full top-0 left-0 bg-gray-900 opacity-70"></div>
<div className="relative rounded-lg shadow dark:bg-grey-dark p-4">{children}</div>
</div>
);

76
client/src/components/PopupMessage.tsx
View File

@ -2,6 +2,50 @@ import { useEffect, useState } from 'react';
import { FaEllipsisH } from 'react-icons/fa';
import Modal from './Modal';
const DeleteModal = ({
id,
showDelete,
setShowDelete,
}: {
id: string;
showDelete: boolean;
setShowDelete: (showDelete: boolean) => void;
}) => {
return (
<Modal show={showDelete}>
<div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
<button
className="popup-item bg-red text-white border-red border-2 rounded-xl p-2 mr-2 transition-all hover:cursor-pointer hover:bg-white hover:text-red"
onClick={() => setShowDelete(!showDelete)}
>
Supprimer
</button>
<button
className="popup-item text-grey-light rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
onClick={() => setShowDelete(!showDelete)}
>
Annuler
</button>
</Modal>
);
};
const EditModal = ({
id,
showEdit,
setShowEdit,
}: {
id: string;
showEdit: boolean;
setShowEdit: (showEdit: boolean) => void;
}) => {
return (
<Modal show={showEdit}>
<div className="text-white">Modifier</div>
</Modal>
);
};
const PopupMessage = ({ id }: { id: string }) => {
const [show, setShow] = useState(false);
const [showEdit, setShowEdit] = useState(false);
@ -9,7 +53,7 @@ const PopupMessage = ({ id }: { id: string }) => {
useEffect(() => {
const handleClick = (e: any) => {
if ((e.target.closest('.popup-btn') === null) || (e.target.closest('#messageId' + id) === null)) {
if (e.target.closest('#messageId' + id) === null) {
setShow(false);
}
};
@ -36,36 +80,26 @@ const PopupMessage = ({ id }: { id: string }) => {
<div className="popup-content space-y-2">
<button
className="popup-item block text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
onClick={() => setShowEdit(!showEdit)}
onClick={() => {
setShowEdit(!showEdit);
setShow(!show);
}}
>
Modifier
</button>
<button
className="popup-item block text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red"
onClick={() => setShowDelete(!showDelete)}
onClick={() => {
setShowDelete(!showDelete);
setShow(!show);
}}
>
Supprimer
</button>
</div>
</div>
<Modal show={showEdit}>
<div className="text-white">Modifier</div>
</Modal>
<Modal show={showDelete}>
<div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
<button
className="popup-item bg-red text-white border-red border-2 rounded-xl p-2 mr-2 transition-all hover:cursor-pointer hover:bg-white hover:text-red"
onClick={() => setShowDelete(!showDelete)}
>
Supprimer
</button>
<button
className="popup-item text-grey-light rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
onClick={() => setShowDelete(!showDelete)}
>
Annuler
</button>
</Modal>
<EditModal id={id} showEdit={showEdit} setShowEdit={setShowEdit} />
<DeleteModal id={id} showDelete={showDelete} setShowDelete={setShowDelete} />
</>
);
};