eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Task 3] SSE complete

Browse Source
This commit is contained in:
RobinB27
2025-11-16 21:17:12 +01:00
parent 2d8ac9a33e
commit 6fd4db5520
2 changed files with 135 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
task_3_react/src/client/App.tsx
View File

@@ -4,7 +4,8 @@ import {
CSV_Data, fileInfo, responseObject CSV_Data, fileInfo, responseObject
} from './types'; } from './types';
import React, { import React, {
useEffect, useRef, useState useEffect,
useRef, useState
} from 'react'; } from 'react';
import { import {
convertCSVtoJSON, readCSV convertCSVtoJSON, readCSV
@@ -14,6 +15,7 @@ import DataTable from './components/DataTable';
import FileCard from './components/FileCard'; import FileCard from './components/FileCard';
import InfoCard from './components/InfoCard'; import InfoCard from './components/InfoCard';
import Layout from './components/Layout'; import Layout from './components/Layout';
import "./sse"
function App () { function App () {
const [ const [
@@ -34,15 +36,37 @@ function App () {
setFileList setFileList
] = useState( null as responseObject | null ); ] = useState( null as responseObject | null );
// Effect has to be in top level of the component // Add evenbt listener for server-sent events on first render
const [active, setActive] = useState(false);
useEffect( ()=> { useEffect( ()=> {
fetch( '/status', { if (!active) {
document.addEventListener("sse:uploaded", async _ev => {
await fetch( '/status', {
'method': 'GET' 'method': 'GET'
} ) } )
.then( response => response.json() ) .then( response => response.json() )
.then( response => setFileList( response ) ) .then( response => setFileList( response ) )
.catch( error => console.log( error ) ); .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 ); const formRef = useRef( null );

101
task_3_react/src/server/uploads/dataFile-1763323028890-110 Normal file
View 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