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}
         />

frontend/src/pages/HomePage.tsx

@@ -14,7 +14,6 @@ function HomePage() {
     const [loader, setLoader] = useState(true);
     const navigator = useNavigate()
     const [open, setOpen] = useState(false);
-    const closeModal = () => {setOpen(false);}
     
     const updateInfo = async () => {
         await servicelist().then(res => {
@@ -31,8 +30,8 @@ function HomePage() {
         return () => { clearInterval(updater) }
     }, []);
 
+    const closeModal = () => {setOpen(false);updateInfo();}
 
-    
     return <div id="service-list" className="center-flex-row">
         <LoadingOverlay visible={loader} />
         {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{

frontend/src/pages/ServiceDetails.tsx

@@ -24,13 +24,6 @@ function ServiceDetails() {
         status:"🤔"
     })
 
-    const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
-    const [loader, setLoader] = useState(true);
-    const [open, setOpen] = useState(false);
-    const closeModal = () => {setOpen(false);}
-
-    const navigator = useNavigate()
-
     const updateInfo = async () => {
         if (!srv_id) return
         let error = false;
@@ -50,6 +43,14 @@ function ServiceDetails() {
         setLoader(false)
     }
 
+    const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
+    const [loader, setLoader] = useState(true);
+    const [open, setOpen] = useState(false);
+    const closeModal = () => {setOpen(false);updateInfo();}
+
+    const navigator = useNavigate()
+
+    
     useEffect(()=>{
         updateInfo()
         const updater = setInterval(updateInfo, update_freq)
@@ -68,6 +69,7 @@ function ServiceDetails() {
         }).catch(err => {
             errorNotify("An error occurred while deleting a service",`Error: ${err}`)
         })
+        updateInfo();
     }
 
     const changePort = () => {
@@ -79,6 +81,7 @@ function ServiceDetails() {
         }).catch(err => {
             errorNotify("An error occurred while changing the internal service port",`Error: ${err}`)
         })
+        updateInfo();
     }
 
     return <div>
@@ -114,7 +117,7 @@ function ServiceDetails() {
         <YesNoModal
             title='Are you sure to delete this service?'
             description={`You are going to delete the service '${serviceInfo.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service ⚠️!`}
-            onClose={()=>setDeleteModal(false)}
+            onClose={()=>setDeleteModal(false) }
             action={deleteService}
             opened={deleteModal}
         />