import React, { useState, useEffect } from 'react';
import './App.css';
import EventList from '../eventList/EventList.js';

function App(props) {
  const [events, setEvents] = useState(['EventLog']); // initialises Event state
  const [sse, setSse] = useState(new EventSource('/events', { withCredentials: true})) // creates eventSource listener
  
  useEffect(() => {
    
    sse.onerror = (e) => {
      console.error();
      sse.close();
    }
    
    sse.onmessage = (e) => {
      // parses received data from string to JSON
      const message = JSON.parse(e.data);

      // initialises a new array with updated server-side event array
      const newEvents = [...message];

      // sets the updated event array as state
      setEvents(newEvents);
    };
  });

  return <EventList data={events} />
    
}

export default App;