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

only one popup

This commit is contained in:
Guillaume Dorce 2022-09-28 21:32:19 +02:00
parent e0837928a3
commit d10f0e7b9a
2 changed files with 13 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,7 +28,7 @@ const MessageWrapper = () => {
return (
<main className="messages-wrapper flex flex-col p-4 gap-4 overflow-scroll w-full max-w-3xl">
{messages.isLoading ? '' : messages.data?.map((message: any) => (
<Message user={message.author} text={message.content} image={message.image} date={message.createdAt} id={message.id}/>
<Message user={message.author} text={message.content} image={message.image} date={message.createdAt} id={message.id} key={message.id}/>
))}
</main>
);

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

@ -9,10 +9,7 @@ const PopupMessage = ({ id }: { id: string }) => {
useEffect(() => {
const handleClick = (e: any) => {
if (
(show && !e.target.closest('.popup-btn')) ||
(e.target.closest('.popup') && !e.target.closest('.popup-btn'))
) {
if ((e.target.closest('.popup-btn') === null) || (e.target.closest('#messageId' + id) === null)) {
setShow(false);
}
};
@ -57,17 +54,17 @@ const PopupMessage = ({ id }: { id: string }) => {
<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>
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>
</>
);