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 ( return (
<main className="messages-wrapper flex flex-col p-4 gap-4 overflow-scroll w-full max-w-3xl"> <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) => ( {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> </main>
); );

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

@ -9,10 +9,7 @@ const PopupMessage = ({ id }: { id: string }) => {
useEffect(() => { useEffect(() => {
const handleClick = (e: any) => { const handleClick = (e: any) => {
if ( if ((e.target.closest('.popup-btn') === null) || (e.target.closest('#messageId' + id) === null)) {
(show && !e.target.closest('.popup-btn')) ||
(e.target.closest('.popup') && !e.target.closest('.popup-btn'))
) {
setShow(false); setShow(false);
} }
}; };
@ -57,17 +54,17 @@ const PopupMessage = ({ id }: { id: string }) => {
<Modal show={showDelete}> <Modal show={showDelete}>
<div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div> <div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
<button <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" 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)} onClick={() => setShowDelete(!showDelete)}
> >
Supprimer Supprimer
</button> </button>
<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" 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)} onClick={() => setShowDelete(!showDelete)}
> >
Annuler Annuler
</button> </button>
</Modal> </Modal>
</> </>
); );