diff --git a/task_3_react/src/client/App.tsx b/task_3_react/src/client/App.tsx index f3f1be4..5508782 100644 --- a/task_3_react/src/client/App.tsx +++ b/task_3_react/src/client/App.tsx @@ -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 ); diff --git a/task_3_react/src/server/uploads/dataFile-1763323028890-110 b/task_3_react/src/server/uploads/dataFile-1763323028890-110 new file mode 100644 index 0000000..0c09efd --- /dev/null +++ b/task_3_react/src/server/uploads/dataFile-1763323028890-110 @@ -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