k-space/log-viewer
11
0
Fork 0
Code Issues 6 Pull Requests Projects Activity

Implement react-hooks-sse library

Browse Source
This commit is contained in:
Léo Carpentier
2022-02-15 18:34:10 +02:00
parent 4c77fb127d
commit 2977247193
7 changed files with 62 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hooks-sse": "^2.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
}
@@ -12952,6 +12953,17 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"node_modules/react-hooks-sse": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-hooks-sse/-/react-hooks-sse-2.0.0.tgz",
"integrity": "sha512-Bv/KYK+QUVS6UWwCyx6nyaOYIvaTMTCjmlXuBK9nATH2DOz+g4PGiIxi5q71ljUTmSPn/q9Cod7xwDA3/gqVQA==",
"dependencies": {
"@babel/runtime": "^7.1.5"
},
"peerDependencies": {
"react": ">= 16.7.0"
}
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -25025,6 +25037,14 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
"integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
},
"react-hooks-sse": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-hooks-sse/-/react-hooks-sse-2.0.0.tgz",
"integrity": "sha512-Bv/KYK+QUVS6UWwCyx6nyaOYIvaTMTCjmlXuBK9nATH2DOz+g4PGiIxi5q71ljUTmSPn/q9Cod7xwDA3/gqVQA==",
"requires": {
"@babel/runtime": "^7.1.5"
}
},
"react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

1
frontend/package.json
View File

@@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hooks-sse": "^2.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},

37
frontend/src/components/app/App.js
View File

@@ -1,28 +1,29 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { useSSE, SSEProvider, createCustomSource } from 'react-hooks-sse';
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 in state
function SSE() {
const state = useSSE('events');
const [events, setEvents] = useState([]); // initialises Event state
sse.onerror = (e) => {
console.error();
sse.close();
}
useEffect(() => {
console.log('render');
if (state) {
setEvents([JSON.parse(state.data), ...events]);
}
}, [state])
sse.onmessage = (e) => {
// parses received data from string to JSON
const message = JSON.parse(e.data);
return events;
}
// initialises a new array with updated server-side event array
const newEvents = [...message, ...events];
function App() {
// sets the updated event array as state
setEvents(newEvents);
};
return <EventList data={events} />
return (
<SSEProvider endpoint="/events">
<SSE/>
</SSEProvider>
)
}

16
frontend/src/components/eventList/EventList.js
View File

@@ -3,15 +3,13 @@ import Event from '../event/Event.js';
import './EventList.css';
function EventList(props) {
console.log(`FROM LIST: ${props.data}`);
return (
<ul className="eventListUl">
{props.data.map((event) => {
return <li className="eventListLi"><Event data={event} /></li>
})}
</ul>
)
return ;
// <ul className="eventListUl">
// {props.data.map((event) => {
// return <li className="eventListLi"><Event data={event} /></li>
// })}
// </ul>
}