# Business Events Grid React

import React, { useState, useEffect } from 'react';
import { Grid, Paper } from '@material-ui/core';

const DataGrid = ({ endpoint, token, limit = 1000, requestBody }) => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify(requestBody),
    });

    eventSource.onmessage = (event) => {
      const newItem = JSON.parse(event.data);
      setItems((prevItems) => {
        const updatedItems = [...prevItems, newItem];
        if (updatedItems.length > limit) {
          return updatedItems.slice(-limit);
        }
        return updatedItems;
      });
    };

    eventSource.onerror = (error) => {
      console.error('SSE error:', error);
    };

    return () => {
      eventSource.close();
    };
  }, [endpoint, token, limit, requestBody]);

  return (
    <Grid container spacing={2}>
      {items.map((item) => (
        <Grid item xs={12} sm={6} md={4} key={item.id}>
          <Paper elevation={3} className="grid-item">
            {/* Render your item data */}
            <h3>{item.name}</h3>
            <p>{item.description}</p>
          </Paper>
        </Grid>
      ))}
    </Grid>
  );
};

export default DataGrid;

import DataGrid from './DataGrid';

const App = () => {
  const token = 'your_jwt_token';
  const requestBody = {
    // Your request body data
  };

  return (
    <div>
      <DataGrid
        endpoint="https://example.com/sse"
        token={token}
        limit={1000}
        requestBody={requestBody}
      />
    </div>
  );
};