chore: create useInvoke hook to reduce repetition (#45)

src/queries/invoke.ts

@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import { invoke } from "@tauri-apps/api";
+
+import { useCurrentNamespace } from "../namespaces/namespaces";
+
+type Commands =
+  | "get_cron_jobs"
+  | "get_deployments"
+  | "get_jobs"
+  | "get_pods"
+  | "get_replica_sets"
+  | "get_stateful_sets";
+
+export function useGetResourceList<T>(command: Commands) {
+  const { namespace } = useCurrentNamespace();
+  const result = useQuery(
+    [command, namespace],
+    () => {
+      return invoke<{ items: T[] }>(command, { namespace });
+    },
+    // TODO: maybe make this configurable?
+    { refetchInterval: 2000 }
+  );
+
+  return { ...result, data: result.data ?? { items: [] } };
+}

src/workloads/cron-jobs.tsx

@@ -1,39 +1,20 @@
-import type { V1CronJob } from "@kubernetes/client-node";
-import { useQuery } from "@tanstack/react-query";
-import { invoke } from "@tauri-apps/api";
-import { format, formatDistance, formatRelative, subDays } from "date-fns";
+import { V1CronJob } from "@kubernetes/client-node";
+import { formatDistance } from "date-fns";
 
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useCurrentNamespace } from "../namespaces/namespaces";
-
-const noData = {
-  metadata: {
-    uid: "no-cron-jobs-found",
-    name: "No CronJobs found",
-  },
-  spec: {
-    schedule: "---",
-  },
-  status: {
-    lastScheduleTime: null,
-  },
-};
+import { useGetResourceList } from "../queries/invoke";
 
 export function CronJobs() {
-  const { namespace } = useCurrentNamespace();
-
-  const result = useQuery(["cron-jobs", namespace], () => {
-    return invoke<{ items: V1CronJob[] }>(`get_cron_jobs`, { namespace });
-  });
-
-  const data = result.data?.items?.length ? result.data?.items : [noData];
+  const {
+    data: { items },
+  } = useGetResourceList<V1CronJob>("get_cron_jobs");
 
   return (
     <div>
       <Table>
         <TableHeader headers={["Name", "Schedule", "Last Run"]} />
         <TableBody>
-          {data.map((item) => (
+          {items.map((item) => (
             <tr key={item.metadata?.uid}>
               <TableCell>{item.metadata?.name}</TableCell>
               <TableCell>{item.spec?.schedule}</TableCell>

src/workloads/deployments.tsx

@@ -1,13 +1,12 @@
-import { ArrowPathIcon, PencilIcon, ArrowsUpDownIcon } from "@heroicons/react/20/solid";
 import type { V1Deployment } from "@kubernetes/client-node";
-import { useMutation, useQuery } from "@tanstack/react-query";
+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 { useCurrentNamespace } from "../namespaces/namespaces";
+import { useGetResourceList } from "../queries/invoke";
 
 const ResourceEditDrawer = lazy(() =>
   import("../components/resource-edit-drawer").then((module) => ({
@@ -16,17 +15,9 @@ const ResourceEditDrawer = lazy(() =>
 );
 
 export function Deployments() {
-  const { namespace } = useCurrentNamespace();
-
-  const result = useQuery(
-    ["deployments", namespace],
-    () => {
-      return invoke<{ items: V1Deployment[] }>(`get_deployments`, { namespace });
-    },
-    { refetchInterval: 1000 }
-  );
-
-  const data = result.data?.items ?? [];
+  const {
+    data: { items },
+  } = useGetResourceList<V1Deployment>("get_deployments");
 
   const restartMutation = useMutation({
     mutationFn: (deployment: V1Deployment) => {
@@ -58,7 +49,7 @@ export function Deployments() {
       <Table>
         <TableHeader headers={["Name", "Image", "Pods", "Actions"]} />
         <TableBody>
-          {data.map((item) => (
+          {items.map((item) => (
             <tr key={item.metadata?.uid}>
               <TableCell>{item.metadata?.name}</TableCell>
               <TableCell>{item.spec?.template.spec?.containers[0].image}</TableCell>

src/workloads/jobs.tsx

@@ -1,26 +1,20 @@
 import type { V1Job } from "@kubernetes/client-node";
-import { useQuery } from "@tanstack/react-query";
-import { invoke } from "@tauri-apps/api";
 import { formatDistance } from "date-fns";
 
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useCurrentNamespace } from "../namespaces/namespaces";
+import { useGetResourceList } from "../queries/invoke";
 
 export function Jobs() {
-  const { namespace } = useCurrentNamespace();
-
-  const result = useQuery(["jobs", namespace], () => {
-    return invoke<{ items: V1Job[] }>(`get_jobs`, { namespace });
-  });
-
-  const data = result.data?.items ?? [];
+  const {
+    data: { items },
+  } = useGetResourceList<V1Job>("get_jobs");
 
   return (
     <div>
       <Table>
         <TableHeader headers={["Name", "Schedule", "Last Run"]} />
         <TableBody>
-          {data.map((item) => (
+          {items.map((item) => (
             <tr key={item.metadata?.uid}>
               <TableCell>{item.metadata?.name}</TableCell>
               <TableCell>{item.spec?.template.spec?.containers[0].image}</TableCell>

src/workloads/pods.tsx

@@ -1,12 +1,9 @@
-import { BarsArrowDownIcon, PencilIcon } from "@heroicons/react/20/solid";
 import type { V1Pod } from "@kubernetes/client-node";
-import { useQuery } from "@tanstack/react-query";
-import { invoke } from "@tauri-apps/api";
 import { useState, lazy, Suspense } from "react";
 
 import { ActionButton, ActionGroup } from "../components/action-group";
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useCurrentNamespace } from "../namespaces/namespaces";
+import { useGetResourceList } from "../queries/invoke";
 
 const PodLogs = lazy(() => import("./pod-logs").then((module) => ({ default: module.PodLogs })));
 
@@ -16,13 +13,9 @@ const ResourceEditDrawer = lazy(() =>
   }))
 );
 export function Pods() {
-  const { namespace } = useCurrentNamespace();
-
-  const result = useQuery(["pods", namespace], () => {
-    return invoke<{ items: V1Pod[] }>("get_pods", { namespace });
-  });
-
-  const pods = result.data?.items ?? [];
+  const {
+    data: { items },
+  } = useGetResourceList<V1Pod>("get_pods");
 
   const [podAction, setPodAction] = useState<"logs" | "edit" | null>(null);
   const [selectedPod, setSelectedPod] = useState<V1Pod | null>(null);
@@ -41,7 +34,7 @@ export function Pods() {
       <Table>
         <TableHeader headers={["Name", "Status", "Actions"]} />
         <TableBody>
-          {pods.map((pod) => (
+          {items.map((pod) => (
             <tr key={pod.metadata?.uid}>
               <TableCell>{pod.metadata?.name}</TableCell>
               <TableCell>{pod.status?.phase}</TableCell>

src/workloads/replica-sets.tsx

@@ -1,25 +1,19 @@
 import type { V1ReplicaSet } from "@kubernetes/client-node";
-import { useQuery } from "@tanstack/react-query";
-import { invoke } from "@tauri-apps/api";
 
 import { Table, TableHeader, TableBody, TableCell } from "../components/table";
-import { useCurrentNamespace } from "../namespaces/namespaces";
+import { useGetResourceList } from "../queries/invoke";
 
 export function ReplicaSets() {
-  const { namespace } = useCurrentNamespace();
-
-  const result = useQuery(["replica-sets", namespace], () => {
-    return invoke<{ items: V1ReplicaSet[] }>(`get_replica_sets`, { namespace });
-  });
-
-  const data = result.data?.items ?? [];
+  const {
+    data: { items },
+  } = useGetResourceList<V1ReplicaSet>("get_replica_sets");
 
   return (
     <div>
       <Table>
         <TableHeader headers={["Name", "Images", "Pods"]} />
         <TableBody>
-          {data.map((item) => (
+          {items.map((item) => (
             <tr key={item.metadata?.uid}>
               <TableCell>{item.metadata?.name}</TableCell>
               <TableCell>{item.spec?.template?.spec?.containers[0].image}</TableCell>

src/workloads/stateful-sets.tsx

@@ -7,6 +7,7 @@ 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";
 
 const ResourceEditDrawer = lazy(() =>
   import("../components/resource-edit-drawer").then((module) => ({
@@ -27,7 +28,9 @@ export function StatefulSets() {
     { refetchInterval: 1000 }
   );
 
-  const data = result.data?.items ?? [];
+  const {
+    data: { items },
+  } = useGetResourceList<V1StatefulSet>("get_stateful_sets");
 
   const [action, setAction] = useState<Actions | null>(null);
   const [selected, setSelected] = useState<V1StatefulSet | null>(null);
@@ -47,7 +50,7 @@ export function StatefulSets() {
       <Table>
         <TableHeader headers={["Name", "Image", "Pods", "Actions"]} />
         <TableBody>
-          {data.map((item) => (
+          {items.map((item) => (
             <tr key={item.metadata?.uid}>
               <TableCell>{item.metadata?.name}</TableCell>
               <TableCell>{item.spec?.template.spec?.containers[0].image}</TableCell>