import { useState, useRef, useEffect, useCallback } from 'react'; import { router, usePage } from '@inertiajs/react'; import { AppLayout } from '@/Components/Layout/AppLayout'; import { getEcho } from '@/lib/echo'; type ChatMessage = { id: number; body: string; sender: string; isOwn: boolean; createdAt: string }; type Thread = { id: number; subject: string; unread: number; lastBody: string; lastSender: string; lastAt: string; lastIsOwn: boolean; messages: ChatMessage[]; }; type User = { id: number; name: string; role: string }; type Classroom = { id: number; name: string }; type Props = { threads: Thread[]; users: User[]; classrooms: Classroom[]; classroomStudentIds: Record; }; function csrf(): string { return (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content ?? ''; } export default function SchoolMessages({ threads: initialThreads, users, classrooms, classroomStudentIds }: Props) { const { props: pageProps } = usePage<{ auth?: { user?: { id: number } | null }; realtime?: { key?: string } }>(); const myId = pageProps.auth?.user?.id ?? null; const [threads, setThreads] = useState(initialThreads); const [activeId, setActiveId] = useState(initialThreads[0]?.id ?? null); const [live, setLive] = useState(false); const [composing, setComposing] = useState(false); const [replyBody, setReplyBody] = useState(''); const [sending, setSending] = useState(false); // compose form state const [recipientIds, setRecipientIds] = useState([]); const [subject, setSubject] = useState(''); const [composeBody, setComposeBody] = useState(''); const [composeProcessing, setComposeProcessing] = useState(false); const [searchUser, setSearchUser] = useState(''); const chatEndRef = useRef(null); const replyRef = useRef(null); const activeThread = threads.find(t => t.id === activeId) ?? null; const totalUnread = threads.reduce((s, t) => s + t.unread, 0); useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [activeId, activeThread?.messages.length]); // Props are the source of truth. Without this, local state keeps the threads // from first render and anything sent afterwards only shows up on a refresh. useEffect(() => { setThreads(initialThreads); setActiveId((current) => current !== null && initialThreads.some((t) => t.id === current) ? current : initialThreads[0]?.id ?? null ); }, [initialThreads]); /** Merge an incoming message into its thread, ignoring duplicates. */ const appendMessage = useCallback((threadId: number, msg: ChatMessage, bumpUnread: boolean) => { setThreads((prev) => prev.map((t) => { if (t.id !== threadId) return t; if (t.messages.some((m) => m.id === msg.id)) return t; return { ...t, messages: [...t.messages, msg], lastBody: msg.body, lastSender: msg.sender, lastAt: msg.createdAt, lastIsOwn: msg.isOwn, unread: bumpUnread ? t.unread + 1 : t.unread, }; })); }, []); // Live delivery over Reverb; falls back to polling when the socket is absent. useEffect(() => { if (!myId) return; const echo = getEcho(pageProps.realtime?.key); if (echo) { const channel = echo.private(`chat.${myId}`); channel.listen('.message.sent', (payload: { threadId: number; message: ChatMessage }) => { setLive(true); setActiveId((current) => { appendMessage(payload.threadId, payload.message, payload.threadId !== current); return current; }); // A brand-new thread isn't in local state yet — pull the list fresh. setThreads((prev) => { if (!prev.some((t) => t.id === payload.threadId)) { router.reload({ only: ['threads'] }); } return prev; }); }); const pusher = (echo.connector as unknown as { pusher?: { connection?: { bind: (e: string, cb: () => void) => void } } }).pusher; pusher?.connection?.bind('connected', () => setLive(true)); pusher?.connection?.bind('unavailable', () => setLive(false)); pusher?.connection?.bind('failed', () => setLive(false)); return () => { echo.leave(`chat.${myId}`); }; } // No socket: poll for new threads/messages. const timer = window.setInterval(() => { router.reload({ only: ['threads'] }); }, 5000); return () => window.clearInterval(timer); }, [myId, appendMessage, pageProps.realtime?.key]); // Select thread + mark unread as read const selectThread = useCallback((t: Thread) => { setActiveId(t.id); setComposing(false); if (t.unread > 0) { const unreadIds = t.messages.filter(m => !m.isOwn).map(m => m.id); unreadIds.forEach(id => { fetch(`/school/messages/${id}/read`, { method: 'PATCH', headers: { 'X-CSRF-TOKEN': csrf() } }); }); setThreads(prev => prev.map(x => x.id === t.id ? { ...x, unread: 0 } : x)); } setTimeout(() => replyRef.current?.focus(), 100); }, []); const sendReply = useCallback(() => { if (!replyBody.trim() || !activeId || sending) return; setSending(true); router.post( `/school/messages/${activeId}/reply`, { body: replyBody }, { preserveScroll: true, onSuccess: () => setReplyBody(''), // onFinish always runs — without it any unexpected error (a 500, a // dropped connection) leaves the button spinning forever. onFinish: () => setSending(false), } ); }, [replyBody, activeId, sending]); const sendCompose = useCallback((e: React.FormEvent) => { e.preventDefault(); if (!composeBody.trim() || recipientIds.length === 0 || composeProcessing) return; setComposeProcessing(true); router.post( '/school/messages', { recipient_ids: recipientIds, subject, body: composeBody }, { onSuccess: () => { setComposing(false); setRecipientIds([]); setSubject(''); setComposeBody(''); }, // onFinish always runs, even on a 500 — otherwise the button spins forever. onFinish: () => setComposeProcessing(false), } ); }, [composeBody, recipientIds, subject, composeProcessing]); const toggleRecipient = (id: number) => { setRecipientIds(prev => prev.includes(id) ? prev.filter(r => r !== id) : [...prev, id]); }; const addClassroom = (cid: string) => { const ids = classroomStudentIds[Number(cid)] ?? []; setRecipientIds(prev => Array.from(new Set([...prev, ...ids]))); }; const filteredUsers = searchUser.trim() ? users.filter(u => u.name.includes(searchUser) || u.role.includes(searchUser)) : users; const handleReplyKey = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) sendReply(); }; return (
{/* ── Left: Thread list ── */}
{/* header */}
گفتگوها {totalUnread > 0 && ( {totalUnread} )}
{/* list */}
{threads.length === 0 ? (
هیچ گفتگویی وجود ندارد
) : ( threads.map(t => ( )) )}
{/* ── Right: Chat view ── */}
{composing ? ( // Compose new thread
گفتگوی جدید
{/* Subject */}
setSubject(e.target.value)} placeholder="موضوع گفتگو..." />
{/* Classroom shortcut */} {classrooms.length > 0 && (
)} {/* User search + chips */}
{recipientIds.length > 0 && ( )}
setSearchUser(e.target.value)} placeholder="جستجو در کاربران..." style={{ marginBottom: '0.5rem' }} />
{filteredUsers.map(u => { const sel = recipientIds.includes(u.id); return ( ); })}
{/* Body */}