js frontend

import { useEffect, useState } from "react";
import { Container, Typography, List, ListItem, Paper } from "@mui/material";
import MainLayout from '@/Layouts/MainLayout';

export default function DocumentExtract({document}) {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const eventSource = new EventSource(route('extraction.extract', {document: document.id}));

        eventSource.onmessage = (event) => {
            const newMessage = JSON.parse(event.data);
            setMessages((prev) => [...prev, newMessage]);
            console.log(newMessage);
        };

        eventSource.onerror = (error) => {
            console.error("SSE Error:", error);
            eventSource.close();
        };

        return () => {
            eventSource.close();
        };
    }, []);

    return (
        <MainLayout>
            <Container maxWidth="sm" sx={{ mt: 4 }}>
                <Paper elevation={3} sx={{ p: 3, textAlign: "center" }}>
                    <Typography variant="h5" gutterBottom>
                        Live Server Updates
                    </Typography>
                    <List>
                        {messages.map((msg, index) => (
                            <ListItem key={index}>{msg.counter} {msg.time} {msg.document.file_name}</ListItem>
                        ))}
                    </List>
                </Paper>
            </Container>
        </MainLayout>
    );
}