react-query + enable/disable firewall

frontend/src/components/AddNewRegex.tsx

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

frontend/src/components/Firewall/utils.ts

@@ -1,10 +1,7 @@
-import { RegexAddForm, RegexFilter, ServerResponse } from "../../js/models"
+import { useQuery } from "@tanstack/react-query"
+import { ServerResponse } from "../../js/models"
 import { getapi, postapi } from "../../js/utils"
 
-export type GeneralStats = {
-    rules:number,
-}
-
 export enum Protocol {
     TCP = "tcp",
     UDP = "udp",
@@ -37,6 +34,12 @@ export type Rule = {
 }
 
 export type RuleInfo = {
+    rules: Rule[]
+    policy: ActionType,
+    enabled: boolean
+}
+
+export type RuleAddForm = {
     rules: Rule[]
     policy: ActionType
 }
@@ -46,14 +49,19 @@ export type ServerResponseListed = {
     status:(ServerResponse & {rule_id:number})[]|string,
 }
 
+export const rulesQueryKey = ["firewall","rules"]
+export const firewallRulesQuery = () => useQuery({queryKey:rulesQueryKey, queryFn:firewall.rules})
 
 export const firewall = {
-    stats: async () => {
-        return await getapi("firewall/stats") as GeneralStats;
-    },
     rules: async() => {
         return await getapi("firewall/rules") as RuleInfo;
     },
+    enable: async() => {
+        return await getapi("firewall/enable") as ServerResponse;
+    },
+    disable: async() => {
+        return await getapi("firewall/disable") as ServerResponse;
+    },
     rulenable: async (rule_id:number) => {
         return await getapi(`firewall/rule/${rule_id}/enable`) as ServerResponse;
     },
@@ -64,7 +72,7 @@ export const firewall = {
         const { status } = await postapi(`firewall/rule/${rule_id}/rename`,{ name }) as ServerResponse;
         return status === "ok"?undefined:status
     },
-    servicesadd: async (data:RuleInfo) => {
+    servicesadd: async (data:RuleAddForm) => {
         return await postapi("firewall/rules/set", data) as ServerResponseListed;
     }
 }

frontend/src/components/Header/ResetModal.tsx

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

frontend/src/components/Header/ResetPasswordModal.tsx

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

frontend/src/components/MainLayout.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { ActionIcon, Container, Menu, Space, ThemeIcon } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { ActionIcon, Container, Menu, Space } from '@mantine/core';
 import { AppShell } from '@mantine/core';
 import NavBar from './NavBar';
 import FooterPage from './Footer';

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[];
     },

frontend/src/components/NavBar/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Collapse, Divider, Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
+import { Collapse, Divider, Group, MantineColor, Navbar, ScrollArea, Text, ThemeIcon, Title, UnstyledButton } from "@mantine/core";
 import { useState } from "react";
 import { IoMdGitNetwork } from "react-icons/io";
 import { MdOutlineExpandLess, MdOutlineExpandMore, MdTransform } from "react-icons/md";
@@ -37,10 +37,8 @@ function NavBarButton({ navigate, closeNav, name, icon, color, disabled, onClick
 } 
 
 export default function NavBar({ closeNav, opened }: {closeNav: () => void, opened: boolean}) {
-    const [toggleState, setToggleState] = useState(false);
-    const advancedPaths = ["regexproxy"]
-    const advancedSelected = advancedPaths.includes(getmainpath())
-    const toggle = (toggleState||advancedSelected)
+    const [toggle, setToggleState] = useState(false);
+
     
     return <Navbar p="md" hiddenBreakpoint="md" hidden={!opened} width={{ md: 300 }}>
         <Navbar.Section px="xs" mt="xs">
@@ -53,7 +51,7 @@ export default function NavBar({ closeNav, opened }: {closeNav: () => void, open
             <NavBarButton navigate="nfregex" closeNav={closeNav} name="Netfilter Regex" color="lime" icon={<IoMdGitNetwork />} />
             <NavBarButton navigate="porthijack" closeNav={closeNav} name="Hijack Port to Proxy" color="blue" icon={<GrDirections />} />
             <Divider my="xs" label="Advanced" labelPosition="center" />
-            <NavBarButton closeNav={closeNav} name="Deprecated options" color="gray" icon={toggle ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />} onClick={()=>setToggleState(!toggleState)} disabled={advancedSelected}/>
+            <NavBarButton closeNav={closeNav} name="Deprecated options" color="gray" icon={toggle ? <MdOutlineExpandLess /> : <MdOutlineExpandMore />} onClick={()=>setToggleState(!toggle)}/>
             <Collapse in={toggle}>
                 <NavBarButton navigate="regexproxy" closeNav={closeNav} name="TCP Proxy Regex Filter" color="grape" icon={<MdTransform />} />
             </Collapse>

frontend/src/components/PortAndInterface.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, AutocompleteItem, Select, Space, Title } from "@mantine/core"
+import { AutocompleteItem, Select, Space, Title } from "@mantine/core"
 import React, { useEffect, useState } from "react"
 import { getipinterfaces } from "../js/utils";
 import PortInput from "./PortInput";

frontend/src/components/PortHijack/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_ipv6_no_cidr, regex_ipv4_no_cidr } from '../../js/utils';
 import { ImCross } from "react-icons/im"
 import { porthijack } from './utils';

frontend/src/components/PortHijack/ServiceRow/ChangeDestination.tsx

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

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

frontend/src/components/PortHijack/utils.ts

@@ -1,5 +1,6 @@
 import { ServerResponse } from "../../js/models"
 import { getapi, postapi } from "../../js/utils"
+import { UseQueryOptions, useQuery } from "@tanstack/react-query"
 
 export type GeneralStats = {
     services:number
@@ -27,11 +28,12 @@ export type ServiceAddForm = {
 
 export type ServiceAddResponse = ServerResponse & { service_id: string }
 
+export const queryKey = ["porthijack","services"]
+
+export const porthijackServiceQuery = () => useQuery({queryKey, queryFn:porthijack.services})
+
 export const porthijack = {
-    stats: async () => {
-        return await getapi("porthijack/stats") as GeneralStats;
-    },
-    services: async () => {
+    services: async () : Promise<Service[]>  => {
         return await getapi("porthijack/services") as Service[];
     },
     serviceinfo: async (service_id:string) => {

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[];
     },

frontend/src/components/RegexView/index.tsx

@@ -1,5 +1,5 @@
 import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { RegexFilter } from '../../js/models';
 import { b64decode, errorNotify, getapiobject, okNotify } from '../../js/utils';
 import style from "./index.module.scss";