public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed pbms found during demo

Browse Source
This commit is contained in:
Quentin Roussel
2024-04-26 14:34:36 +02:00
parent edc1c4baa8
commit 4d62a99f80
12 changed files with 153 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
traque-front/components/team/notification.jsx
View File

@@ -1,34 +1,36 @@
import { useSocketListener } from "@/hook/useSocketListener";
import { useEffect, useState } from "react";
export function Notification({socket }) {
export function Notification({ socket }) {
const [visible, setVisible] = useState(false);
const [timeoutId, setTimeoutId] = useState(null);
const [notification, setNotification] = useState(null);
useSocketListener(socket, "error", (notification) => {
console.log("error", notification);
setNotification({type: "error", text: notification});
setNotification({ type: "error", text: notification });
setVisible(true);
});
useSocketListener(socket, "success", (notification) => {
console.log("success", notification);
setNotification({type: "success", text: notification});
setNotification({ type: "success", text: notification });
setVisible(true);
});
useSocketListener(socket, "warning", (notification) => {
console.log("warning", notification);
setNotification({type: "warning", text: notification});
setNotification({ type: "warning", text: notification });
setVisible(true);
});
// Hide the notification after 5 seconds
useEffect(() => {
console.log({visible});
console.log({ visible });
if (visible && notification?.text != undefined) {
clearTimeout(timeoutId);
setTimeoutId(setTimeout(() => {
setVisible(false);
}, 3000));
if (notification?.type == "success") {
setTimeoutId(setTimeout(() => {
setVisible(false);
}, 3000));
}
}
}, [visible]);
@@ -38,11 +40,11 @@ export function Notification({socket }) {
warning: "bg-yellow-500"
}
const classNames = 'fixed w-11/12 p-5 z-30 mx-auto inset-x-0 flex justify-center rounded-xl transition-all shadow-xl ' + (visible ? "top-5 " : "-translate-y-full ");
return (
return (
Object.keys(bgColorMap).map((key) =>
notification?.type == key &&
notification?.type == key &&
<div key={key} className={classNames + bgColorMap[key]} onClick={() => setVisible(false)}>
<p className='text-center text-xl'>{notification?.text}</p>
</div>
));
));
}