32 lines
878 B
TypeScript
32 lines
878 B
TypeScript
|
import {useState} from "react";
|
||
|
|
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;
|
||
|
|
|
||
|
|
return (<div>
|
||
|
|
{donations.map((item) => ( <Box name={item.name} amount={item.amount} message={item.message} /> ))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Donations
|