import React, { useState, useEffect } from 'react';
import { useSSE, SSEProvider } from 'react-hooks-sse';
import './App.css';
import EventList from '../eventList/EventList.js';


import './App.css';


const Component = () => {
  const event = useSSE('log-entry')
  const [events, setEvents] = useState([])

  useEffect(() =>{
    console.info(event);
    if (event) {
        for (var j = 0; j < events.length; j++) {
            if (events[j].timestamp <= event.timestamp) {
                if (events[j]._id == event._id) {
                    setEvents([...events.slice(0, j), event, ...events.slice(j+1)]);
                    return;
                } else {
                    setEvents([...events.slice(0, j), event, ...events.slice(j)]);
                    return;
                }
            }
        }

        setEvents([event, ...events]);
    }
  }, [event])
  return <EventList data={events} />
}

function App() {
  return (

    <SSEProvider endpoint="/events" >
        <Component />


    </SSEProvider>

  )
}

export default App;