chore: create use resource actions to remove duplicate code (#46)

src/hooks/use-resource-actions.ts

@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+export function useResourceActions<ResourceName, Actions>() {
+  const [action, setAction] = useState<Actions | null>(null);
+  const [selected, setSelected] = useState<ResourceName | null>(null);
+
+  const handleOpen = (resource: ResourceName, action: Actions) => {
+    setSelected(resource);
+    setAction(action);
+  };
+
+  const handleClose = () => {
+    setSelected(null);
+    setAction(null);
+  };
+
+  return {
+    action,
+    selected,
+    handleOpen,
+    handleClose,
+  };
+}

src/queries/invoke.ts → src/hooks/use-resource-list.ts

@@ -11,7 +11,7 @@ type Commands =
   | "get_replica_sets"
   | "get_stateful_sets";
 
-export function useGetResourceList<T>(command: Commands) {
+export function useResourceList<T>(command: Commands) {
   const { namespace } = useCurrentNamespace();
   const result = useQuery(
     [command, namespace],

src/workloads/cron-jobs.tsx

@@ -2,12 +2,12 @@ import { V1CronJob } from "@kubernetes/client-node";
 import { formatDistance } from "date-fns";
 
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useGetResourceList } from "../queries/invoke";
+import { useResourceList } from "../hooks/use-resource-list";
 
 export function CronJobs() {
   const {
     data: { items },
-  } = useGetResourceList<V1CronJob>("get_cron_jobs");
+  } = useResourceList<V1CronJob>("get_cron_jobs");
 
   return (
     <div>

src/workloads/deployments.tsx

@@ -1,12 +1,13 @@
-import type { V1Deployment } from "@kubernetes/client-node";
+import { V1Deployment } from "@kubernetes/client-node";
 import { useMutation } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api";
 import { lazy, Suspense, useState } from "react";
 
 import { ActionButton, ActionGroup } from "../components/action-group";
 import { ScaleModal } from "../components/scale-modal";
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useGetResourceList } from "../queries/invoke";
+import { useResourceActions } from "../hooks/use-resource-actions";
+import { useResourceList } from "../hooks/use-resource-list";
 
 const ResourceEditDrawer = lazy(() =>
   import("../components/resource-edit-drawer").then((module) => ({
@@ -17,7 +18,12 @@ const ResourceEditDrawer = lazy(() =>
 export function Deployments() {
   const {
     data: { items },
-  } = useGetResourceList<V1Deployment>("get_deployments");
+  } = useResourceList<V1Deployment>("get_deployments");
+
+  const { selected, handleOpen, handleClose, action } = useResourceActions<
+    V1Deployment,
+    "edit" | "scale"
+  >();
 
   const restartMutation = useMutation({
     mutationFn: (deployment: V1Deployment) => {
@@ -31,19 +37,6 @@ export function Deployments() {
     },
   });
 
-  const [action, setAction] = useState<"edit" | "scale" | null>(null);
-  const [selected, setSelected] = useState<V1Deployment | null>(null);
-
-  const handleOpen = (deployment: V1Deployment, action: "edit" | "scale") => {
-    setSelected(deployment);
-    setAction(action);
-  };
-
-  const handleClose = () => {
-    setSelected(null);
-    setAction(null);
-  };
-
   return (
     <div>
       <Table>

src/workloads/jobs.tsx

@@ -2,12 +2,12 @@ import type { V1Job } from "@kubernetes/client-node";
 import { formatDistance } from "date-fns";
 
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useGetResourceList } from "../queries/invoke";
+import { useResourceList } from "../hooks/use-resource-list";
 
 export function Jobs() {
   const {
     data: { items },
-  } = useGetResourceList<V1Job>("get_jobs");
+  } = useResourceList<V1Job>("get_jobs");
 
   return (
     <div>

src/workloads/pods.tsx

@@ -3,7 +3,8 @@ import { useState, lazy, Suspense } from "react";
 
 import { ActionButton, ActionGroup } from "../components/action-group";
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useGetResourceList } from "../queries/invoke";
+import { useResourceActions } from "../hooks/use-resource-actions";
+import { useResourceList } from "../hooks/use-resource-list";
 
 const PodLogs = lazy(() => import("./pod-logs").then((module) => ({ default: module.PodLogs })));
 
@@ -15,19 +16,12 @@ const ResourceEditDrawer = lazy(() =>
 export function Pods() {
   const {
     data: { items },
-  } = useGetResourceList<V1Pod>("get_pods");
+  } = useResourceList<V1Pod>("get_pods");
 
-  const [podAction, setPodAction] = useState<"logs" | "edit" | null>(null);
-  const [selectedPod, setSelectedPod] = useState<V1Pod | null>(null);
-
-  const handleOpen = (pod: V1Pod, action: "logs" | "edit") => {
-    setSelectedPod(pod);
-    setPodAction(action);
-  };
-  const handleClose = () => {
-    setSelectedPod(null);
-    setPodAction(null);
-  };
+  const { selected, handleOpen, handleClose, action } = useResourceActions<
+    V1Pod,
+    "logs" | "edit"
+  >();
 
   return (
     <div>
@@ -57,17 +51,13 @@ export function Pods() {
         </TableBody>
       </Table>
       <Suspense fallback={<div>Loading Logs</div>}>
-        <PodLogs
-          isOpen={podAction === "logs"}
-          handleClose={handleClose}
-          selectedPod={selectedPod}
-        />
+        <PodLogs isOpen={action === "logs"} handleClose={handleClose} selectedPod={selected} />
       </Suspense>
       <Suspense fallback={<div>Loading Form</div>}>
         <ResourceEditDrawer
-          isOpen={podAction === "edit"}
+          isOpen={action === "edit"}
           handleClose={handleClose}
-          selectedResource={selectedPod}
+          selectedResource={selected}
         />
       </Suspense>
     </div>

src/workloads/replica-sets.tsx

@@ -1,12 +1,12 @@
 import type { V1ReplicaSet } from "@kubernetes/client-node";
 
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useGetResourceList } from "../queries/invoke";
+import { useResourceList } from "../hooks/use-resource-list";
 
 export function ReplicaSets() {
   const {
     data: { items },
-  } = useGetResourceList<V1ReplicaSet>("get_replica_sets");
+  } = useResourceList<V1ReplicaSet>("get_replica_sets");
 
   return (
     <div>

src/workloads/stateful-sets.tsx

@@ -1,49 +1,27 @@
 import type { V1StatefulSet } from "@kubernetes/client-node";
-import { useQuery } from "@tanstack/react-query";
-import { invoke } from "@tauri-apps/api";
 import { lazy, Suspense, useState } from "react";
 
 import { ActionButton, ActionGroup } from "../components/action-group";
 import { ScaleModal } from "../components/scale-modal";
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useCurrentNamespace } from "../namespaces/namespaces";
-import { useGetResourceList } from "../queries/invoke";
+import { useResourceActions } from "../hooks/use-resource-actions";
+import { useResourceList } from "../hooks/use-resource-list";
 
 const ResourceEditDrawer = lazy(() =>
   import("../components/resource-edit-drawer").then((module) => ({
     default: module.ResourceEditDrawer,
   }))
 );
 
-type Actions = "edit" | "logs" | "scale";
-
 export function StatefulSets() {
-  const { namespace } = useCurrentNamespace();
-
-  const result = useQuery(
-    ["deployments", namespace],
-    () => {
-      return invoke<{ items: V1StatefulSet[] }>(`get_stateful_sets`, { namespace });
-    },
-    { refetchInterval: 1000 }
-  );
-
   const {
     data: { items },
-  } = useGetResourceList<V1StatefulSet>("get_stateful_sets");
-
-  const [action, setAction] = useState<Actions | null>(null);
-  const [selected, setSelected] = useState<V1StatefulSet | null>(null);
-
-  const handleOpen = (deployment: V1StatefulSet, action: Actions) => {
-    setSelected(deployment);
-    setAction(action);
-  };
+  } = useResourceList<V1StatefulSet>("get_stateful_sets");
 
-  const handleClose = () => {
-    setSelected(null);
-    setAction(null);
-  };
+  const { selected, handleOpen, handleClose, action } = useResourceActions<
+    V1StatefulSet,
+    "edit" | "logs" | "scale"
+  >();
 
   return (
     <div>