chore(rx): implement setPortRole mutation

libremesh · Nov 4, 2024 · 76c0165 · 76c0165
1 parent 583b07d
commit 76c0165
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 15 deletions.
diff --git a/plugins/lime-plugin-rx/src/rxApi.ts b/plugins/lime-plugin-rx/src/rxApi.ts
@@ -1,6 +1,8 @@
 import {
     IGetInternetStatus,
     StatusResponse,
+    SupportedPortRoles,
+    SwitchStatus,
 } from "plugins/lime-plugin-rx/src/rxTypes";
 
 import api from "utils/uhttpd.service";
@@ -10,3 +12,16 @@ export const getNodeStatus = (): Promise<StatusResponse> =>
 
 export const getInternetStatus = (): Promise<IGetInternetStatus> =>
     api.call("lime-metrics", "get_internet_status", {});
+
+export type SetPortRoleArgs = { role: SupportedPortRoles } & Omit<
+    SwitchStatus,
+    "role"
+>;
+
+export const setPortRole = async (
+    newStatus: SetPortRoleArgs
+): Promise<boolean> => {
+    console.log("Setting port role", newStatus);
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    return true;
+};
diff --git a/plugins/lime-plugin-rx/src/rxQueries.ts b/plugins/lime-plugin-rx/src/rxQueries.ts
@@ -1,6 +1,18 @@
-import { useQuery } from "@tanstack/react-query";
+import { MutationKey } from "@tanstack/query-core/src/types";
+import {
+    UseMutationOptions,
+    useMutation,
+    useQuery,
+} from "@tanstack/react-query";
 
-import { getInternetStatus, getNodeStatus } from "./rxApi";
+import { SupportedPortRoles } from "plugins/lime-plugin-rx/src/rxTypes";
+
+import {
+    SetPortRoleArgs,
+    getInternetStatus,
+    getNodeStatus,
+    setPortRole,
+} from "./rxApi";
 
 const refetchInterval = 2000;
 
@@ -24,3 +36,16 @@ export function useInternetStatus(params?) {
         ...params,
     });
 }
+
+export const useSetPortRole = (
+    options?: Omit<
+        UseMutationOptions<boolean, Error, SetPortRoleArgs>,
+        "mutationFn" | "mutationKey"
+    >
+) => {
+    return useMutation<boolean, Error, SetPortRoleArgs>({
+        mutationFn: setPortRole,
+        mutationKey: ["useSetPortRole"] as MutationKey,
+        ...options,
+    });
+};
diff --git a/plugins/lime-plugin-rx/src/rxTypes.ts b/plugins/lime-plugin-rx/src/rxTypes.ts
@@ -53,3 +53,9 @@ export interface IGetInternetStatus {
     IPv4: { working: boolean };
     status: string;
 }
+
+export enum SupportedPortRoles {
+    WAN = "wan",
+    LAN = "lan",
+    MESH = "mesh",
+}
diff --git a/plugins/lime-plugin-rx/src/sections/wired.tsx b/plugins/lime-plugin-rx/src/sections/wired.tsx
@@ -10,8 +10,16 @@ import {
     SectionTitle,
 } from "plugins/lime-plugin-rx/src/components/components";
 import { PortsIcon } from "plugins/lime-plugin-rx/src/icons/portsIcon";
-import { useNodeStatus } from "plugins/lime-plugin-rx/src/rxQueries";
-import { SwitchStatus } from "plugins/lime-plugin-rx/src/rxTypes";
+import {
+    useNodeStatus,
+    useSetPortRole,
+} from "plugins/lime-plugin-rx/src/rxQueries";
+import {
+    SupportedPortRoles,
+    SwitchStatus,
+} from "plugins/lime-plugin-rx/src/rxTypes";
+
+import queryCache from "utils/queryCache";
 
 const liro1 = [
     {
@@ -136,12 +144,6 @@ type PortsByDevice = {
     [device: string]: SwitchStatus[];
 };
 
-enum SupportedPortRoles {
-    WAN = "wan",
-    LAN = "lan",
-    MESH = "mesh",
-}
-
 const ChangeRoleConfirmationModal = ({
     newRole,
     ...rest
@@ -161,16 +163,23 @@ const ChangeRoleConfirmationModal = ({
 };
 
 const PortRoleSelector = ({ port }: { port: SwitchStatus }) => {
-    const [newRole, setNewRole] = useState("");
+    const { mutateAsync } = useSetPortRole({
+        onSettled: () => {
+            queryCache.invalidateQueries({
+                queryKey: ["lime-rx", "node-status"],
+            });
+        },
+    });
+    const [newRole, setNewRole] = useState<SupportedPortRoles>();
     const { open, onOpen, onClose } = useDisclosure({
         onClose() {
-            setNewRole("");
+            setNewRole(null);
         },
     });
 
     const changeRole = async () => {
-        // await two seconds and then resolve
-        return new Promise((resolve) => setTimeout(resolve, 2000));
+        await mutateAsync({ ...port, role: newRole });
+        onClose();
     };
 
     useEffect(() => {
@@ -192,7 +201,10 @@ const PortRoleSelector = ({ port }: { port: SwitchStatus }) => {
                 className={"pl-2 text-center"}
                 value={role}
                 onChange={(e) => {
-                    setNewRole((e.target as HTMLSelectElement).value);
+                    setNewRole(
+                        (e.target as HTMLSelectElement)
+                            .value as SupportedPortRoles
+                    );
                 }}
             >
                 <option value={role}>{role}</option>