react-query + enable/disable firewall

frontend/src/pages/RegexProxy/ServiceDetails.tsx

@@ -1,64 +1,27 @@
 import { ActionIcon, Grid, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useState } from 'react';
+import { Navigate, useParams } from 'react-router-dom';
 import { BsPlusLg } from "react-icons/bs";
-import { useWindowEvent } from '@mantine/hooks';
-import { regexproxy, Service } from '../../components/RegexProxy/utils';
-import { RegexFilter } from '../../js/models';
-import { errorNotify, eventUpdateName, fireUpdateRequest } from '../../js/utils';
+import { regexproxyServiceQuery, regexproxyServiceRegexesQuery } from '../../components/RegexProxy/utils';
 import ServiceRow from '../../components/RegexProxy/ServiceRow';
 import AddNewRegex from '../../components/AddNewRegex';
 import RegexView from '../../components/RegexView';
 
 function ServiceDetailsProxyRegex() {
+
     const {srv} = useParams()
+    const [open, setOpen] = useState(false)
+    const services = regexproxyServiceQuery()
+    const serviceInfo = services.data?.find(s => s.id == srv)
+    const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false)
+    const regexesList = regexproxyServiceRegexesQuery(srv??"")
 
-    const [serviceInfo, setServiceInfo] = useState<Service>({
-        id:srv?srv:"",
-        internal_port:0,
-        n_packets:0,
-        n_regex:0,
-        name:srv?srv:"",
-        public_port:0,
-        status:"🤔"
-    })
-
-    const [regexesList, setRegexesList] = useState<RegexFilter[]>([])
-    const [loader, setLoader] = useState(true);
-    const [open, setOpen] = useState(false);
-    const closeModal = () => {setOpen(false);updateInfo();}
-
-    const updateInfo = async () => {
-        if (!srv) return
-        let error = false;
-        await regexproxy.serviceinfo(srv).then(res => {
-            setServiceInfo(res)
-        }).catch(
-          err =>{
-            error = true;
-            navigator("/")
-        })
-        if (error) return
-        await regexproxy.serviceregexes(srv).then(res => {
-            setRegexesList(res)
-        }).catch(
-          err => errorNotify(`Updater for ${srv} service failed [Regex list]!`, err.toString())
-        )
-        setLoader(false)
-    }
-
-    useWindowEvent(eventUpdateName, updateInfo)
-    useEffect(fireUpdateRequest,[])
-
-    const navigator = useNavigate()
-
-
-    const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
+    if (!srv || !serviceInfo || regexesList.isError) return <Navigate to="/" replace />
 
     return <div>
-        <LoadingOverlay visible={loader} />
+        <LoadingOverlay visible={regexesList.isLoading} />
         <ServiceRow service={serviceInfo} />
-        {regexesList.length === 0?<>
+        {(!regexesList.data || regexesList.data.length == 0)?<>
                 <Space h="xl" />
                 <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" buttons</Title>
                 <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
@@ -72,11 +35,11 @@ function ServiceDetailsProxyRegex() {
                 </div>
             </>:
             <Grid>
-                {regexesList.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
+                {regexesList.data.map( (regexInfo) => <Grid.Col key={regexInfo.id} lg={6} xs={12}><RegexView regexInfo={regexInfo} /></Grid.Col>)}
             </Grid>
         }
 
-        {srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
+        {srv?<AddNewRegex opened={open} onClose={() => {setOpen(false)}} service={srv} />:null}
 
 
     </div>