react-query + enable/disable firewall

frontend/src/components/NFRegex/AddNewService.tsx

@@ -1,6 +1,6 @@
 import { Button, Group, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { okNotify, regex_ipv4, regex_ipv6 } from '../../js/utils';
 import { ImCross } from "react-icons/im"
 import { nfregex } from './utils';

frontend/src/components/NFRegex/ServiceRow/RenameForm.tsx

@@ -1,6 +1,6 @@
 import { Button, Group, Space, TextInput, Notification, Modal } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { okNotify } from '../../../js/utils';
 import { ImCross } from "react-icons/im"
 import { nfregex, Service } from '../utils';

frontend/src/components/NFRegex/ServiceRow/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FaPlay, FaStop } from 'react-icons/fa';
-import { nfregex, Service } from '../utils';
+import { nfregex, Service, serviceQueryKey } from '../utils';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./index.module.scss";
 import YesNoModal from '../../YesNoModal';
@@ -10,6 +10,7 @@ import { BsTrashFill } from 'react-icons/bs';
 import { BiRename } from 'react-icons/bi'
 import RenameForm from './RenameForm';
 import { MenuDropDownWithButton } from '../../MainLayout';
+import { useQueryClient } from '@tanstack/react-query';
 
 function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
 
@@ -19,6 +20,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         case "active": status_color = "teal"; break;
     }
 
+    const queryClient = useQueryClient()
     const [buttonLoading, setButtonLoading] = useState(false)
     const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
     const [deleteModal, setDeleteModal] = useState(false)
@@ -30,6 +32,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         await nfregex.servicestop(service.service_id).then(res => {
             if(!res){
                 okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.port} has been stopped!`)
+                queryClient.invalidateQueries(serviceQueryKey)
             }else{
                 errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
             }
@@ -44,6 +47,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         await nfregex.servicestart(service.service_id).then(res => {
             if(!res){
                 okNotify(`Service ${service.name} started successfully!`,`The service on ${service.port} has been started!`)
+                queryClient.invalidateQueries(serviceQueryKey)
             }else{
                 errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
             }
@@ -57,6 +61,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
         nfregex.servicedelete(service.service_id).then(res => {
             if (!res){
                 okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
+                queryClient.invalidateQueries(serviceQueryKey)
             }else
                 errorNotify("An error occurred while deleting a service",`Error: ${res}`)
         }).catch(err => {

frontend/src/components/NFRegex/utils.ts

@@ -1,12 +1,7 @@
 import { RegexFilter, ServerResponse } from "../../js/models"
 import { getapi, postapi } from "../../js/utils"
 import { RegexAddForm } from "../../js/models"
-
-export type GeneralStats = {
-    services:number,
-    closed:number,
-    regexes:number
-}
+import { useQuery, useQueryClient } from "@tanstack/react-query"
 
 export type Service = {
     name:string,
@@ -31,12 +26,16 @@ export type ServiceAddResponse = {
     service_id?: string,
 }
 
+export const serviceQueryKey = ["nfregex","services"]
+export const statsQueryKey = ["nfregex","stats"]
 
+export const nfregexServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:nfregex.services})
+export const nfregexServiceRegexesQuery = (service_id:string) => useQuery({
+    queryKey:[...serviceQueryKey,service_id,"regexes"],
+    queryFn:() => nfregex.serviceregexes(service_id)
+})
 
 export const nfregex = {
-    stats: async () => {
-        return await getapi("nfregex/stats") as GeneralStats;
-    },
     services: async () => {
         return await getapi("nfregex/services") as Service[];
     },