icmp pinging + deleting

components/app-card.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { motion, AnimatePresence } from "motion/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import ActionMenu from "./action-menu";
+import { invoke } from "@tauri-apps/api/core";
 
 type App = {
   id: string;
@@ -16,11 +17,53 @@ interface Props {
   app: App;
 }
 
-export default function AppCard({ app }: Props) {
-  let pingStatus = true;
+type PingStatus = "success" | "error" | "loading";
 
+export default function AppCard({ app }: Props) {
+  const [pingStatus, setPingStatus] = useState<PingStatus>("loading");
   const [hovered, setHovered] = useState(false);
 
+  let pingColor =
+    pingStatus === "success"
+      ? "bg-green-500"
+      : pingStatus === "error"
+        ? "bg-red-500"
+        : "bg-gray-500";
+
+  const pingApp = async (): Promise<boolean> => {
+    let status: boolean = await invoke("ping", { address: app.address });
+    return status;
+  };
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const performPing = async () => {
+      setPingStatus("loading");
+      try {
+        // Since we simplified the Rust command to return a bool, we just read the result
+        const success = await invoke<boolean>("ping", { address: app.address });
+        if (isMounted) {
+          setPingStatus(success ? "success" : "error");
+        }
+      } catch (err) {
+        if (isMounted) {
+          setPingStatus("error");
+        }
+      }
+    };
+
+    performPing();
+
+    // Optional: Set up an interval if you want it to poll periodically
+    const interval = setInterval(performPing, 10000); // Poll every 10 seconds
+
+    return () => {
+      isMounted = false;
+      clearInterval(interval);
+    };
+  }, [app.address]);
+
   return (
     <div
       onMouseEnter={() => setHovered(true)}
@@ -37,8 +80,12 @@ export default function AppCard({ app }: Props) {
     >
       <div className="absolute top-4 right-4">
         <div className="relative">
-          <div className="absolute inset-0 rounded-full bg-green-500 animate-ping opacity-30" />
-          <div className="relative h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white" />
+          <div
+            className={`absolute inset-0 rounded-full ${pingColor} animate-ping opacity-30`}
+          />
+          <div
+            className={`relative h-2.5 w-2.5 rounded-full ${pingColor} ring-2 ring-white`}
+          />
         </div>
       </div>
 
@@ -50,19 +97,6 @@ export default function AppCard({ app }: Props) {
       >
         {app.address}
       </a>
-      {/*<AnimatePresence>
-        {hovered && (
-          <motion.div
-            initial={{ opacity: 0, y: -8 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -8 }}
-            transition={{ duration: 0.2 }}
-          >
-            {app.description && <span>{app.description}</span>}
-            <ActionMenu id={app.id} />
-          </motion.div>
-        )}
-      </AnimatePresence>*/}
 
       <AnimatePresence>
         {hovered && (

components/delete-dialog.tsx

@@ -12,6 +12,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { invoke } from "@tauri-apps/api/core";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 
 type DeleteDialogProps = {
   id: string;
@@ -25,11 +28,29 @@ export default function DeleteDialog({
   onOpenChange,
 }: DeleteDialogProps) {
   const formRef = useRef<HTMLFormElement>(null);
+  const queryClient = useQueryClient();
+
+  const delete_app = async (id: string) => {
+    await invoke("delete_apps", { id });
+  };
+
+  const { mutate: deleteApp } = useMutation({
+    mutationKey: ["delete_app"],
+    mutationFn: delete_app,
+    onSuccess: () => {
+      console.log("App deleted successfully");
+      queryClient.invalidateQueries({ queryKey: ["apps"] });
+    },
+    onError: (error) => {
+      toast.error("Error deleting app");
+      console.error("Error deleting app:", error);
+    },
+  });
 
   const handleDelete = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log(`Deleting app with id: ${id}`);
-    onOpenChange(false); // Close dialog after deleting
+    deleteApp(id);
+    onOpenChange(false);
   };
 
   const handleHoldComplete = () => {