mirror of
https://github.com/janishutz/fundamentals-of-webengineering.git
synced 2025-11-25 05:44:24 +00:00
[Task 3] SSE complete
This commit is contained in:
RobinB27
@@ -4,7 +4,8 @@ import {
|
||||
CSV_Data, fileInfo, responseObject
|
||||
} from './types';
|
||||
import React, {
|
||||
useEffect, useRef, useState
|
||||
useEffect,
|
||||
useRef, useState
|
||||
} from 'react';
|
||||
import {
|
||||
convertCSVtoJSON, readCSV
|
||||
@@ -14,6 +15,7 @@ import DataTable from './components/DataTable';
|
||||
import FileCard from './components/FileCard';
|
||||
import InfoCard from './components/InfoCard';
|
||||
import Layout from './components/Layout';
|
||||
import "./sse"
|
||||
|
||||
function App () {
|
||||
const [
|
||||
@@ -34,15 +36,37 @@ function App () {
|
||||
setFileList
|
||||
] = useState( null as responseObject | null );
|
||||
|
||||
// Effect has to be in top level of the component
|
||||
useEffect( () => {
|
||||
fetch( '/status', {
|
||||
'method': 'GET'
|
||||
} )
|
||||
.then( response => response.json() )
|
||||
.then( response => setFileList( response ) )
|
||||
.catch( error => console.log( error ) );
|
||||
} );
|
||||
// Add evenbt listener for server-sent events on first render
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
useEffect( ()=> {
|
||||
if (!active) {
|
||||
document.addEventListener("sse:uploaded", async _ev => {
|
||||
await fetch( '/status', {
|
||||
'method': 'GET'
|
||||
} )
|
||||
.then( response => response.json() )
|
||||
.then( response => setFileList( response ) )
|
||||
.catch( error => console.log( error ) );
|
||||
});
|
||||
document.addEventListener("sse:deleted", async _ev => {
|
||||
await fetch( '/status', {
|
||||
'method': 'GET'
|
||||
} )
|
||||
.then( response => response.json() )
|
||||
.then( response => setFileList( response ) )
|
||||
.catch( error => console.log( error ) );
|
||||
});
|
||||
setActive(true);
|
||||
// Initial fetch of file list at first component render
|
||||
fetch( '/status', {
|
||||
'method': 'GET'
|
||||
} )
|
||||
.then( response => response.json() )
|
||||
.then( response => setFileList( response ) )
|
||||
.catch( error => console.log( error ) );
|
||||
}
|
||||
})
|
||||
|
||||
const formRef = useRef( null );
|
||||
|
||||
|
||||
101
task_3_react/src/server/uploads/dataFile-1763323028890-110
Normal file
101
task_3_react/src/server/uploads/dataFile-1763323028890-110
Normal file
@@ -0,0 +1,101 @@
|
||||
ID,Name,Age,Country,Email
|
||||
1,Name_1,62,Country_1,email_1@example.com
|
||||
2,Name_2,48,Country_2,email_2@example.com
|
||||
3,Name_3,61,Country_3,email_3@example.com
|
||||
4,Name_4,32,Country_4,email_4@example.com
|
||||
5,Name_5,69,Country_5,email_5@example.com
|
||||
6,Name_6,32,Country_6,email_6@example.com
|
||||
7,Name_7,62,Country_7,email_7@example.com
|
||||
8,Name_8,39,Country_8,email_8@example.com
|
||||
9,Name_9,40,Country_9,email_9@example.com
|
||||
10,Name_10,32,Country_0,email_10@example.com
|
||||
11,Name_11,24,Country_1,email_11@example.com
|
||||
12,Name_12,45,Country_2,email_12@example.com
|
||||
13,Name_13,39,Country_3,email_13@example.com
|
||||
14,Name_14,18,Country_4,email_14@example.com
|
||||
15,Name_15,66,Country_5,email_15@example.com
|
||||
16,Name_16,48,Country_6,email_16@example.com
|
||||
17,Name_17,60,Country_7,email_17@example.com
|
||||
18,Name_18,31,Country_8,email_18@example.com
|
||||
19,Name_19,43,Country_9,email_19@example.com
|
||||
20,Name_20,33,Country_0,email_20@example.com
|
||||
21,Name_21,32,Country_1,email_21@example.com
|
||||
22,Name_22,68,Country_2,email_22@example.com
|
||||
23,Name_23,44,Country_3,email_23@example.com
|
||||
24,Name_24,32,Country_4,email_24@example.com
|
||||
25,Name_25,33,Country_5,email_25@example.com
|
||||
26,Name_26,46,Country_6,email_26@example.com
|
||||
27,Name_27,38,Country_7,email_27@example.com
|
||||
28,Name_28,50,Country_8,email_28@example.com
|
||||
29,Name_29,68,Country_9,email_29@example.com
|
||||
30,Name_30,66,Country_0,email_30@example.com
|
||||
31,Name_31,60,Country_1,email_31@example.com
|
||||
32,Name_32,53,Country_2,email_32@example.com
|
||||
33,Name_33,30,Country_3,email_33@example.com
|
||||
34,Name_34,30,Country_4,email_34@example.com
|
||||
35,Name_35,43,Country_5,email_35@example.com
|
||||
36,Name_36,44,Country_6,email_36@example.com
|
||||
37,Name_37,31,Country_7,email_37@example.com
|
||||
38,Name_38,35,Country_8,email_38@example.com
|
||||
39,Name_39,56,Country_9,email_39@example.com
|
||||
40,Name_40,35,Country_0,email_40@example.com
|
||||
41,Name_41,62,Country_1,email_41@example.com
|
||||
42,Name_42,63,Country_2,email_42@example.com
|
||||
43,Name_43,51,Country_3,email_43@example.com
|
||||
44,Name_44,52,Country_4,email_44@example.com
|
||||
45,Name_45,66,Country_5,email_45@example.com
|
||||
46,Name_46,69,Country_6,email_46@example.com
|
||||
47,Name_47,68,Country_7,email_47@example.com
|
||||
48,Name_48,68,Country_8,email_48@example.com
|
||||
49,Name_49,69,Country_9,email_49@example.com
|
||||
50,Name_50,46,Country_0,email_50@example.com
|
||||
51,Name_51,34,Country_1,email_51@example.com
|
||||
52,Name_52,40,Country_2,email_52@example.com
|
||||
53,Name_53,28,Country_3,email_53@example.com
|
||||
54,Name_54,61,Country_4,email_54@example.com
|
||||
55,Name_55,39,Country_5,email_55@example.com
|
||||
56,Name_56,59,Country_6,email_56@example.com
|
||||
57,Name_57,45,Country_7,email_57@example.com
|
||||
58,Name_58,19,Country_8,email_58@example.com
|
||||
59,Name_59,38,Country_9,email_59@example.com
|
||||
60,Name_60,68,Country_0,email_60@example.com
|
||||
61,Name_61,31,Country_1,email_61@example.com
|
||||
62,Name_62,33,Country_2,email_62@example.com
|
||||
63,Name_63,21,Country_3,email_63@example.com
|
||||
64,Name_64,67,Country_4,email_64@example.com
|
||||
65,Name_65,50,Country_5,email_65@example.com
|
||||
66,Name_66,18,Country_6,email_66@example.com
|
||||
67,Name_67,20,Country_7,email_67@example.com
|
||||
68,Name_68,19,Country_8,email_68@example.com
|
||||
69,Name_69,55,Country_9,email_69@example.com
|
||||
70,Name_70,43,Country_0,email_70@example.com
|
||||
71,Name_71,38,Country_1,email_71@example.com
|
||||
72,Name_72,66,Country_2,email_72@example.com
|
||||
73,Name_73,55,Country_3,email_73@example.com
|
||||
74,Name_74,49,Country_4,email_74@example.com
|
||||
75,Name_75,31,Country_5,email_75@example.com
|
||||
76,Name_76,62,Country_6,email_76@example.com
|
||||
77,Name_77,25,Country_7,email_77@example.com
|
||||
78,Name_78,38,Country_8,email_78@example.com
|
||||
79,Name_79,28,Country_9,email_79@example.com
|
||||
80,Name_80,40,Country_0,email_80@example.com
|
||||
81,Name_81,67,Country_1,email_81@example.com
|
||||
82,Name_82,47,Country_2,email_82@example.com
|
||||
83,Name_83,32,Country_3,email_83@example.com
|
||||
84,Name_84,61,Country_4,email_84@example.com
|
||||
85,Name_85,58,Country_5,email_85@example.com
|
||||
86,Name_86,35,Country_6,email_86@example.com
|
||||
87,Name_87,36,Country_7,email_87@example.com
|
||||
88,Name_88,54,Country_8,email_88@example.com
|
||||
89,Name_89,50,Country_9,email_89@example.com
|
||||
90,Name_90,19,Country_0,email_90@example.com
|
||||
91,Name_91,28,Country_1,email_91@example.com
|
||||
92,Name_92,47,Country_2,email_92@example.com
|
||||
93,Name_93,21,Country_3,email_93@example.com
|
||||
94,Name_94,41,Country_4,email_94@example.com
|
||||
95,Name_95,28,Country_5,email_95@example.com
|
||||
96,Name_96,60,Country_6,email_96@example.com
|
||||
97,Name_97,26,Country_7,email_97@example.com
|
||||
98,Name_98,52,Country_8,email_98@example.com
|
||||
99,Name_99,24,Country_9,email_99@example.com
|
||||
100,Name_100,55,Country_0,email_100@example.com
|
||||
Reference in New Issue
Block a user