react-query + enable/disable firewall

frontend/src/components/RegexProxy/AddNewService.tsx

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

frontend/src/components/RegexProxy/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 { regexproxy, Service } from '../utils';

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

@@ -1,5 +1,5 @@
 import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
 import { MdOutlineArrowForwardIos } from "react-icons/md"
 import style from "./ServiceRow.module.scss";

frontend/src/components/RegexProxy/utils.ts

@@ -1,12 +1,7 @@
+import { useQuery } from "@tanstack/react-query"
 import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
 import { getapi, postapi } from "../../js/utils"
 
-export type GeneralStats = {
-    services:number,
-    closed:number,
-    regexes:number
-}
-
 export type Service = {
     id:string,
     name:string,
@@ -33,10 +28,16 @@ export type ChangePort = {
     internalPort?: number
 }
 
+export const serviceQueryKey = ["regexproxy","services"]
+
+export const regexproxyServiceQuery = () => useQuery({queryKey:serviceQueryKey, queryFn:regexproxy.services})
+export const regexproxyServiceRegexesQuery = (service_id:string) => useQuery({
+    queryKey:[...serviceQueryKey,service_id,"regexes"],
+    queryFn:() => regexproxy.serviceregexes(service_id)
+})
+
+
 export const regexproxy = {
-    stats: async () => {
-        return await getapi("regexproxy/stats") as GeneralStats;
-    },
     services: async() => {
         return await getapi("regexproxy/services") as Service[];
     },