feat: update ui

ui/src/hooks/useContact.ts

@@ -0,0 +1,23 @@
+import { useWAClient } from "@/app/context";
+import { getId } from "@/lib/utils";
+import type { ContactDTO } from "@shared/dto";
+import { useQuery } from "@tanstack/react-query";
+
+export function useContacts() {
+  const { client, isReady } = useWAClient();
+
+  const res = useQuery({
+    queryKey: ["contacts"],
+    queryFn: () => client.listContacts(),
+    refetchOnWindowFocus: false,
+    enabled: isReady,
+  });
+
+  return {
+    ...res,
+    findById(id: ContactDTO["id"]) {
+      if (!id) return null;
+      return res.data?.find((i) => getId(i.id) === getId(id));
+    },
+  };
+}

ui/src/hooks/useMessageEvent.ts

@@ -0,0 +1,10 @@
+import { useWAClient } from "@/app/context";
+import type { MessageDTO } from "@shared/dto";
+import { useEffect } from "react";
+
+export function useMessageEvent(callback: (msg: MessageDTO) => any) {
+  const { addListener } = useWAClient();
+  useEffect(() => {
+    return addListener("message", callback);
+  }, [callback]);
+}