improved speed and response to change in frontend

frontend/src/components/Header/index.tsx

@@ -74,7 +74,7 @@ function Header() {
 
   const {srv_id} = useParams()
   const [open, setOpen] = useState(false);
-  const closeModal = () => {setOpen(false);}
+  const closeModal = () => {setOpen(false);updateInfo();}
 
   return <div id="header-page" className={style.header}>
         <FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >

frontend/src/components/ServiceRow/index.tsx

@@ -5,7 +5,7 @@ import { Service } from '../../js/models';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";
 import YesNoModal from '../YesNoModal';
-import { errorNotify, okNotify, pauseservice, startservice, stopservice } from '../../js/utils';
+import { errorNotify, okNotify, pauseservice, startservice, stopservice, servicelist } from '../../js/utils';
 
 //"status":"stop"/"wait"/"active"/"pause",
 function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) {
@@ -18,6 +18,18 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
         case "pause": status_color = "cyan"; break;
     }
 
+    
+    const [services, setServices] = useState<Service[]>([]);
+    const [loader, setLoader] = useState(true);
+    const updateInfo = async () => {
+        await servicelist().then(res => {
+            setServices(res)    
+        }).catch(err => {
+            errorNotify("Home Page Auto-Update failed!", err.toString())
+        })
+        setLoader(false)
+    }
+
     const [stopModal, setStopModal] = useState(false);
     const [buttonLoading, setButtonLoading] = useState(false)
 
@@ -32,7 +44,8 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
         }).catch(err => {
             errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${err}`)
         })
-        setButtonLoading(false)
+        setButtonLoading(false);
+        updateInfo();
     }
 
     const startService = async () => {
@@ -47,6 +60,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
             errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${err}`)
         })
         setButtonLoading(false)
+        updateInfo();
     }
 
     const pauseService = async () => {
@@ -61,6 +75,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
             errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${err}`)
         })
         setButtonLoading(false)
+        updateInfo();
     }
 
     return <>
@@ -146,7 +161,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
         <YesNoModal
             title='Are you sure to stop this service?'
             description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service ⚠️!`}
-            onClose={()=>setStopModal(false)}
+            onClose={()=>{setStopModal(false);updateInfo();}}
             action={stopService}
             opened={stopModal}
         />