Angular

front-end/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@angular/cli": "^17.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

front-end/src/App.tsx

@@ -3,16 +3,21 @@ import {Route , Routes} from 'react-router-dom'
 import Donations from './Pages/Donations'
 import Total from './Pages/Total'
 import Home from './Pages/Home'
+import {WebSocketProvider} from './Context/Webscoket'
 import './App.css';
 function App() {
   return (
     <div className="App">
     <>
+    <WebSocketProvider>
+
     <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/donations" element={<Donations />} />
         <Route path="/total" element={<Total />} />
     </Routes>
+
+    </WebSocketProvider>
     </>
     </div>
   );

front-end/src/Context/Webscoket.tsx

@@ -0,0 +1,45 @@
+import React, {Children, PropsWithChildren} from "react";
+import {BooleanLiteral} from "typescript";
+
+
+
+export type WebSocketInfo  = {
+    isReady : Boolean;
+    data : any;
+}
+
+export interface WebSocketProps {
+    readonly data : WebSocketInfo | null
+    readonly setData : (data : WebSocketInfo) => void;
+    readonly loadData: () => Promise<void>;
+}
+
+export const WebSocketContext = React.createContext<WebSocketProps>({ data : null, 
+                                                               setData: () => null,
+                                                               loadData: async () => {} });
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export const WebSocketProvider : React.FC<Props> = ({ children }) => {
+    const [data, setData] = React.useState<WebSocketInfo|null>(null);
+
+    const loadData = async () => {
+        console.log("data");
+    }
+    const value = {
+        data,
+        setData,
+        loadData
+    }
+
+    return (
+    <WebSocketContext.Provider value = {value}>
+        { children }
+    </WebSocketContext.Provider>
+    );
+
+};
+
+

front-end/src/Pages/Donations.tsx

@@ -1,31 +1,40 @@
-import {useState} from "react";
+import {Component, useState} from "react";
+import {WebSocketContext} from "../Context/Webscoket";
 import Box from './Box'
-function Donations(){
-    const [donations,setDonations] = useState([{name:"",amount:0.,message:""}]);
-    const ws = new WebSocket('ws://localhost:5000/notify');
-    ws.onopen = (event) => {
-        console.log(event);
-    }
-    ws.onmessage = (event) => {
-        const json = JSON.parse(event.data);
-        try{
-            setDonations([...donations.slice(-4),json]);
-        }
-        catch(err)
-        {
-            console.log(err);
-        }
-    }
-    const setError = (ev:any) =>{
-        setDonations([{name:"error",amount:0,message:"We lost connection"}]);
-    }
-    ws.onclose = setError;
-    ws.onerror = setError;
+class Donations extends Component {
+ static contextType = WebSocketContext;
 
-    return (<div>
-            {donations.map((item) => ( <Box name={item.name} amount={item.amount} message={item.message} /> ))}
+    
+ //   const [donations,setDonations] = useState([{name:"",amount:0.,message:""}]);
+//    const ws = new WebSocket('ws://localhost:5000/notify');
+//    ws.onopen = (event) => {
+//        console.log(event);
+//    }
+//    ws.onmessage = (event) => {
+//        const json = JSON.parse(event.data);
+//        try{
+//            console.log(json);
+//            setDonations((d) => {return [...d.slice(-4),json]});
+//        }
+//        catch(err)
+//        {
+//            console.log(err);
+//        }
+//    }
+//    const setError = (ev:any) =>{
+//        setDonations([{name:"error",amount:0,message:"We lost connection"}]);
+//    }
+//    ws.onclose = setError;
+//    ws.onerror = setError;
+//           {donations.map((item) => ( <Box name={item.name} amount={item.amount} message={item.message} /> ))}
+// 
+    render(){
+    let data = this.context;
+    console.log(data?.data);
+    return (<div> 
             </div>
            );
+        }
 }
 
 export default Donations