248 lines
9.6 KiB
JavaScript
248 lines
9.6 KiB
JavaScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { useSocket } from '../contexts/SocketContext.jsx';
|
|
import { useAuth } from '../contexts/AuthContext.jsx';
|
|
import { useToast } from '../contexts/ToastContext.jsx';
|
|
import { api } from '../utils/api.js';
|
|
import Sidebar from '../components/Sidebar.jsx';
|
|
import ChatWindow from '../components/ChatWindow.jsx';
|
|
import ProfileModal from '../components/ProfileModal.jsx';
|
|
import UserManagerModal from '../components/UserManagerModal.jsx';
|
|
import SettingsModal from '../components/SettingsModal.jsx';
|
|
import NewChatModal from '../components/NewChatModal.jsx';
|
|
import GlobalBar from '../components/GlobalBar.jsx';
|
|
import AboutModal from '../components/AboutModal.jsx';
|
|
import HelpModal from '../components/HelpModal.jsx';
|
|
import './Chat.css';
|
|
|
|
function urlBase64ToUint8Array(base64String) {
|
|
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
|
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
|
|
const rawData = window.atob(base64);
|
|
const outputArray = new Uint8Array(rawData.length);
|
|
for (let i = 0; i < rawData.length; ++i) outputArray[i] = rawData.charCodeAt(i);
|
|
return outputArray;
|
|
}
|
|
|
|
export default function Chat() {
|
|
const { socket } = useSocket();
|
|
const { user } = useAuth();
|
|
const toast = useToast();
|
|
|
|
const [groups, setGroups] = useState({ publicGroups: [], privateGroups: [] });
|
|
const [activeGroupId, setActiveGroupId] = useState(null);
|
|
const [notifications, setNotifications] = useState([]);
|
|
const [unreadGroups, setUnreadGroups] = useState(new Map());
|
|
const [modal, setModal] = useState(null); // 'profile' | 'users' | 'settings' | 'newchat' | 'help'
|
|
const [helpDismissed, setHelpDismissed] = useState(true); // true until status loaded
|
|
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
|
const [showSidebar, setShowSidebar] = useState(true);
|
|
|
|
// Check if help should be shown on login
|
|
useEffect(() => {
|
|
api.getHelpStatus()
|
|
.then(({ dismissed }) => {
|
|
setHelpDismissed(dismissed);
|
|
if (!dismissed) setModal('help');
|
|
})
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handle = () => {
|
|
const mobile = window.innerWidth < 768;
|
|
setIsMobile(mobile);
|
|
if (!mobile) setShowSidebar(true);
|
|
};
|
|
window.addEventListener('resize', handle);
|
|
return () => window.removeEventListener('resize', handle);
|
|
}, []);
|
|
|
|
const loadGroups = useCallback(() => {
|
|
api.getGroups().then(setGroups).catch(() => {});
|
|
}, []);
|
|
|
|
useEffect(() => { loadGroups(); }, [loadGroups]);
|
|
|
|
// Register push subscription
|
|
useEffect(() => {
|
|
if (!('serviceWorker' in navigator) || !('PushManager' in window)) return;
|
|
(async () => {
|
|
try {
|
|
const reg = await navigator.serviceWorker.ready;
|
|
const { publicKey } = await fetch('/api/push/vapid-public').then(r => r.json());
|
|
const existing = await reg.pushManager.getSubscription();
|
|
if (existing) {
|
|
// Re-register to keep subscription fresh
|
|
await fetch('/api/push/subscribe', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('tc_token') || sessionStorage.getItem('tc_token')}` },
|
|
body: JSON.stringify(existing.toJSON())
|
|
});
|
|
return;
|
|
}
|
|
const permission = await Notification.requestPermission();
|
|
if (permission !== 'granted') return;
|
|
const sub = await reg.pushManager.subscribe({
|
|
userVisibleOnly: true,
|
|
applicationServerKey: urlBase64ToUint8Array(publicKey)
|
|
});
|
|
await fetch('/api/push/subscribe', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('tc_token') || sessionStorage.getItem('tc_token')}` },
|
|
body: JSON.stringify(sub.toJSON())
|
|
});
|
|
console.log('[Push] Subscribed');
|
|
} catch (e) {
|
|
console.warn('[Push] Subscription failed:', e.message);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
// Socket message events to update group previews
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
|
|
const handleNewMsg = (msg) => {
|
|
// Update group preview text
|
|
setGroups(prev => {
|
|
const updateGroup = (g) => g.id === msg.group_id
|
|
? { ...g, last_message: msg.content || (msg.image_url ? '📷 Image' : ''), last_message_at: msg.created_at }
|
|
: g;
|
|
return {
|
|
publicGroups: prev.publicGroups.map(updateGroup),
|
|
privateGroups: prev.privateGroups.map(updateGroup),
|
|
};
|
|
});
|
|
// Don't badge: message is from this user, or group is currently open
|
|
if (msg.user_id === user?.id) return;
|
|
setUnreadGroups(prev => {
|
|
if (msg.group_id === activeGroupId) return prev;
|
|
const next = new Map(prev);
|
|
next.set(msg.group_id, (next.get(msg.group_id) || 0) + 1);
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleNotification = (notif) => {
|
|
if (notif.type === 'private_message') {
|
|
// Badge is already handled by handleNewMsg via message:new socket event.
|
|
// Nothing to do here for the socket path.
|
|
} else {
|
|
setNotifications(prev => [notif, ...prev]);
|
|
toast(`${notif.fromUser?.display_name || notif.fromUser?.name || 'Someone'} mentioned you`, 'default', 4000);
|
|
}
|
|
};
|
|
|
|
socket.on('message:new', handleNewMsg);
|
|
socket.on('notification:new', handleNotification);
|
|
|
|
// Group list real-time updates
|
|
const handleGroupNew = ({ group }) => {
|
|
// Join the socket room for this new group
|
|
socket.emit('group:join-room', { groupId: group.id });
|
|
// Reload the full group list so name/metadata is correct
|
|
loadGroups();
|
|
};
|
|
const handleGroupDeleted = ({ groupId }) => {
|
|
// Leave the socket room so we stop receiving events for this group
|
|
socket.emit('group:leave-room', { groupId });
|
|
setGroups(prev => ({
|
|
publicGroups: prev.publicGroups.filter(g => g.id !== groupId),
|
|
privateGroups: prev.privateGroups.filter(g => g.id !== groupId),
|
|
}));
|
|
setActiveGroupId(prev => {
|
|
if (prev === groupId) {
|
|
if (isMobile) setShowSidebar(true);
|
|
return null;
|
|
}
|
|
return prev;
|
|
});
|
|
setUnreadGroups(prev => { const next = new Map(prev); next.delete(groupId); return next; });
|
|
};
|
|
const handleGroupUpdated = ({ group }) => {
|
|
setGroups(prev => {
|
|
const update = g => g.id === group.id ? { ...g, ...group } : g;
|
|
return {
|
|
publicGroups: prev.publicGroups.map(update),
|
|
privateGroups: prev.privateGroups.map(update),
|
|
};
|
|
});
|
|
};
|
|
|
|
socket.on('group:new', handleGroupNew);
|
|
socket.on('group:deleted', handleGroupDeleted);
|
|
socket.on('group:updated', handleGroupUpdated);
|
|
|
|
return () => {
|
|
socket.off('message:new', handleNewMsg);
|
|
socket.off('notification:new', handleNotification);
|
|
socket.off('group:new', handleGroupNew);
|
|
socket.off('group:deleted', handleGroupDeleted);
|
|
socket.off('group:updated', handleGroupUpdated);
|
|
};
|
|
}, [socket, toast, activeGroupId, user, isMobile, loadGroups]);
|
|
|
|
const selectGroup = (id) => {
|
|
setActiveGroupId(id);
|
|
if (isMobile) setShowSidebar(false);
|
|
// Clear notifications and unread count for this group
|
|
setNotifications(prev => prev.filter(n => n.groupId !== id));
|
|
setUnreadGroups(prev => { const next = new Map(prev); next.delete(id); return next; });
|
|
};
|
|
|
|
// Update page title with total unread badge count
|
|
useEffect(() => {
|
|
const totalUnread = [...unreadGroups.values()].reduce((a, b) => a + b, 0);
|
|
const base = document.title.replace(/^\(\d+\)\s*/, '');
|
|
document.title = totalUnread > 0 ? `(${totalUnread}) ${base}` : base;
|
|
}, [unreadGroups]);
|
|
|
|
const activeGroup = [
|
|
...(groups.publicGroups || []),
|
|
...(groups.privateGroups || [])
|
|
].find(g => g.id === activeGroupId);
|
|
|
|
return (
|
|
<div className="chat-layout">
|
|
{/* Global top bar — spans full width on desktop, visible on mobile sidebar view */}
|
|
<GlobalBar isMobile={isMobile} showSidebar={showSidebar} />
|
|
|
|
<div className="chat-body">
|
|
{(!isMobile || showSidebar) && (
|
|
<Sidebar
|
|
groups={groups}
|
|
activeGroupId={activeGroupId}
|
|
onSelectGroup={selectGroup}
|
|
notifications={notifications}
|
|
unreadGroups={unreadGroups}
|
|
onNewChat={() => setModal('newchat')}
|
|
onProfile={() => setModal('profile')}
|
|
onUsers={() => setModal('users')}
|
|
onSettings={() => setModal('settings')}
|
|
onGroupsUpdated={loadGroups}
|
|
isMobile={isMobile}
|
|
onAbout={() => setModal('about')}
|
|
onHelp={() => setModal('help')}
|
|
/>
|
|
)}
|
|
|
|
{(!isMobile || !showSidebar) && (
|
|
<ChatWindow
|
|
group={activeGroup}
|
|
onBack={isMobile ? () => { setShowSidebar(true); setActiveGroupId(null); } : null}
|
|
onGroupUpdated={loadGroups}
|
|
onDirectMessage={(g) => { loadGroups(); selectGroup(g.id); }}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
|
|
{modal === 'users' && <UserManagerModal onClose={() => setModal(null)} />}
|
|
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} />}
|
|
{modal === 'newchat' && <NewChatModal onClose={() => setModal(null)} onCreated={(g) => { loadGroups(); setModal(null); setActiveGroupId(g.id); }} />}
|
|
{modal === 'about' && <AboutModal onClose={() => setModal(null)} />}
|
|
{modal === 'help' && <HelpModal onClose={() => setModal(null)} dismissed={helpDismissed} />}
|
|
</div>
|
|
);
|
|
}
|