109 lines
3.1 KiB
JavaScript
109 lines
3.1 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useSocket } from "../../../hooks/useSocket";
|
|
import "./styles/NotificationsTab.css";
|
|
|
|
const NotificationsTab = () => {
|
|
const { socket } = useSocket();
|
|
const [notifications, setNotifications] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
|
|
socket.emit("notifications:get_all");
|
|
|
|
const handleNewNotify = (notify) => {
|
|
console.log(notify);
|
|
setNotifications((prev) => [notify, ...prev]);
|
|
};
|
|
|
|
const handleInitialNotify = (data) => {
|
|
setNotifications(data);
|
|
};
|
|
|
|
socket.on("notification:new", handleNewNotify);
|
|
socket.on("notifications:list", handleInitialNotify);
|
|
|
|
return () => {
|
|
socket.off("notification:new", handleNewNotify);
|
|
socket.off("notifications:list", handleInitialNotify);
|
|
};
|
|
}, [socket]);
|
|
|
|
const handleAction = (id, action, data) => {
|
|
if (action === "accept_friend") {
|
|
socket.emit("friend:add", { friendId: data.fromId });
|
|
}
|
|
socket.emit("notification:read", { id });
|
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
};
|
|
|
|
const getIcon = (type) => {
|
|
switch (type) {
|
|
case "friend_request":
|
|
return "fas fa-user-plus";
|
|
case "crafting":
|
|
return "fas fa-hammer";
|
|
case "system":
|
|
return "fas fa-robot";
|
|
default:
|
|
return "fas fa-bell";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="notifications-container">
|
|
<div className="notifications-header">
|
|
<div className="card-tag">SYSTEM_ALERTS</div>
|
|
<h2>NOTIFICATIONS</h2>
|
|
</div>
|
|
|
|
<div className="notifications-list">
|
|
{notifications.length === 0 && (
|
|
<div className="no-notifications">
|
|
<i className="fas fa-satellite-dish"></i>
|
|
<span>NO_ACTIVE_ALERTS_FOUND</span>
|
|
</div>
|
|
)}
|
|
|
|
{notifications.map((n) => (
|
|
<div key={n.id} className={`notify-card ${n.type}`}>
|
|
<div className="notify-icon">
|
|
<i className={getIcon(n.type)}></i>
|
|
</div>
|
|
<div className="notify-content">
|
|
<div className="notify-title-row">
|
|
<h4>{n.title}</h4>
|
|
<span className="notify-time">
|
|
{new Date(n.createdAt).toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</span>
|
|
</div>
|
|
<p>{n.message}</p>
|
|
</div>
|
|
<div className="notify-actions">
|
|
{n.type === "friend_request" && (
|
|
<button
|
|
className="action-btn accept"
|
|
onClick={() => handleAction(n.id, "accept_friend", n.data)}
|
|
>
|
|
ACCEPT
|
|
</button>
|
|
)}
|
|
<button
|
|
className="action-btn dismiss"
|
|
onClick={() => handleAction(n.id, "dismiss")}
|
|
>
|
|
<i className="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotificationsTab;
|