fetch data as soon as the client connects to the websocket server

This commit is contained in:
Mose Müller 2023-11-02 15:43:11 +01:00
parent 7f402b45e7
commit 69c5e0397b

View File

@ -126,11 +126,6 @@ const App = () => {
}, [state]);
useEffect(() => {
// Fetch data from the API when the component mounts
fetch(`http://${hostname}:${port}/service-properties`)
.then((response) => response.json())
.then((data: DataServiceJSON) => dispatch({ type: 'SET_DATA', data }));
// Allow the user to add a custom css file
fetch(`http://${hostname}:${port}/custom.css`)
.then((response) => {
@ -145,7 +140,13 @@ const App = () => {
})
.catch(console.error); // Handle the error appropriately
socket.on('connect', () => setConnectionStatus('connected'));
socket.on('connect', () => {
// Fetch data from the API when the client connects
fetch(`http://${hostname}:${port}/service-properties`)
.then((response) => response.json())
.then((data: DataServiceJSON) => dispatch({ type: 'SET_DATA', data }));
setConnectionStatus('connected');
});
socket.on('disconnect', () => {
setConnectionStatus('disconnected');
setTimeout(() => {
@ -222,7 +223,7 @@ const App = () => {
// While the data is loading
if (!state) {
return <p>Loading...</p>;
return <ConnectionToast connectionStatus={connectionStatus} />;
}
return (
<>