add useBlock hook

src/shared/notes/actions.tsx

@@ -1,7 +1,4 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import { createBlock } from '@libs/storage';
 
 import { ThreadIcon } from '@shared/icons';
 import { NoteReaction } from '@shared/notes/actions/reaction';
@@ -11,6 +8,8 @@ import { NoteZap } from '@shared/notes/actions/zap';
 
 import { BLOCK_KINDS } from '@stores/constants';
 
+import { useBlock } from '@utils/hooks/useBlock';
+
 export function NoteActions({
   id,
   pubkey,
@@ -20,20 +19,7 @@ export function NoteActions({
   pubkey: string;
   noOpenThread?: boolean;
 }) {
-  const queryClient = useQueryClient();
-
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const openThread = (thread: string) => {
-    block.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
-  };
+  const { add } = useBlock();
 
   return (
     <Tooltip.Provider>
@@ -51,7 +37,13 @@ export function NoteActions({
               <Tooltip.Trigger asChild>
                 <button
                   type="button"
-                  onClick={() => openThread(id)}
+                  onClick={() =>
+                    add.mutate({
+                      kind: BLOCK_KINDS.thread,
+                      title: 'Thread',
+                      content: id,
+                    })
+                  }
                   className="group inline-flex h-7 w-7 items-center justify-center"
                 >
                   <ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />

src/shared/notes/hashtag.tsx

@@ -1,33 +1,20 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import { createBlock } from '@libs/storage';
-
 import { BLOCK_KINDS } from '@stores/constants';
 
+import { useBlock } from '@utils/hooks/useBlock';
+
 export function Hashtag({ tag }: { tag: string }) {
-  const queryClient = useQueryClient();
-
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const openBlock = () => {
-    block.mutate({
-      kind: BLOCK_KINDS.hashtag,
-      title: tag,
-      content: tag.replace('#', ''),
-    });
-  };
+  const { add } = useBlock();
 
   return (
     <button
       type="button"
-      onClick={() => openBlock()}
+      onClick={() =>
+        add.mutate({
+          kind: BLOCK_KINDS.hashtag,
+          title: tag,
+          content: tag.replace('#', ''),
+        })
+      }
       className="rounded bg-zinc-800 px-2 py-px text-sm font-normal text-orange-400 no-underline hover:bg-zinc-700 hover:text-orange-500"
     >
       {tag}

src/shared/notes/mentions/note.tsx

@@ -1,34 +1,23 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
-import { createBlock } from '@libs/storage';
-
 import { MentionUser, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 
 import { BLOCK_KINDS } from '@stores/constants';
 
+import { useBlock } from '@utils/hooks/useBlock';
 import { useEvent } from '@utils/hooks/useEvent';
 
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
+  const { add } = useBlock();
   const { status, data } = useEvent(id);
 
-  const queryClient = useQueryClient();
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const openThread = (event: any, thread: string) => {
+  const openThread = (event, thread: string) => {
     const selection = window.getSelection();
     if (selection.toString().length === 0) {
-      block.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
+      add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: thread });
     } else {
       event.stopPropagation();
     }

src/shared/notes/mentions/user.tsx

@@ -1,37 +1,23 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import { createBlock } from '@libs/storage';
-
 import { BLOCK_KINDS } from '@stores/constants';
 
+import { useBlock } from '@utils/hooks/useBlock';
 import { useProfile } from '@utils/hooks/useProfile';
 import { shortenKey } from '@utils/shortenKey';
 
 export function MentionUser({ pubkey }: { pubkey: string }) {
+  const { add } = useBlock();
   const { user } = useProfile(pubkey);
 
-  const queryClient = useQueryClient();
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const openBlock = () => {
-    block.mutate({
-      kind: BLOCK_KINDS.user,
-      title: user?.name || user?.displayNam,
-      content: pubkey,
-    });
-  };
-
   return (
     <button
       type="button"
-      onClick={() => openBlock()}
+      onClick={() =>
+        add.mutate({
+          kind: BLOCK_KINDS.user,
+          title: user?.nip05 || user?.name || user?.displayNam,
+          content: pubkey,
+        })
+      }
       className="break-words rounded bg-zinc-800 px-2 py-px text-sm font-normal text-blue-400 no-underline hover:bg-zinc-700 hover:text-blue-500"
     >
       {'@' + user?.name || user?.displayName || shortenKey(pubkey)}

src/shared/notes/metadata.tsx

@@ -1,18 +1,20 @@
 import { NDKEvent, NDKFilter } from '@nostr-dev-kit/ndk';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { decode } from 'light-bolt11-decoder';
 
 import { useNDK } from '@libs/ndk/provider';
-import { createBlock, createReplyNote } from '@libs/storage';
+import { createReplyNote } from '@libs/storage';
 
 import { LoaderIcon } from '@shared/icons';
 import { MiniUser } from '@shared/notes/users/mini';
 
+import { BLOCK_KINDS } from '@stores/constants';
+
+import { useBlock } from '@utils/hooks/useBlock';
 import { compactNumber } from '@utils/number';
 
 export function NoteMetadata({ id }: { id: string }) {
-  const queryClient = useQueryClient();
-
+  const { add } = useBlock();
   const { ndk } = useNDK();
   const { status, data } = useQuery(
     ['note-metadata', id],
@@ -62,19 +64,6 @@ export function NoteMetadata({ id }: { id: string }) {
     { refetchOnWindowFocus: false, refetchOnReconnect: false }
   );
 
-  const block = useMutation({
-    mutationFn: (data: { kind: number; title: string; content: string }) => {
-      return createBlock(data.kind, data.title, data.content);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
-  const openThread = (thread: string) => {
-    block.mutate({ kind: 2, title: 'Thread', content: thread });
-  };
-
   if (status === 'loading') {
     return (
       <div className="mb-3 flex items-center gap-3">
@@ -102,7 +91,9 @@ export function NoteMetadata({ id }: { id: string }) {
             <div className="mt-2 inline-flex h-6 items-center gap-2">
               <button
                 type="button"
-                onClick={() => openThread(id)}
+                onClick={() =>
+                  add.mutate({ kind: BLOCK_KINDS.thread, title: 'Thread', content: id })
+                }
                 className="text-zinc-500"
               >
                 <span className="font-semibold text-zinc-300">{data.replies}</span>{' '}

src/shared/titleBar.tsx

@@ -1,12 +1,10 @@
 import { CancelIcon } from '@shared/icons';
 
-export function TitleBar({
-  title,
-  onClick = undefined,
-}: {
-  title: string;
-  onClick?: () => void;
-}) {
+import { useBlock } from '@utils/hooks/useBlock';
+
+export function TitleBar({ id, title }: { id?: string; title: string }) {
+  const { remove } = useBlock();
+
   return (
     <div
       data-tauri-drag-region
@@ -14,10 +12,10 @@ export function TitleBar({
     >
       <div className="w-6" />
       <h3 className="text-sm font-medium text-zinc-200">{title}</h3>
-      {onClick ? (
+      {id ? (
         <button
           type="button"
-          onClick={onClick}
+          onClick={() => remove.mutate(id)}
           className="inline-flex h-6 w-6 shrink translate-y-8 transform items-center justify-center rounded transition-transform duration-150 ease-in-out hover:bg-zinc-900 group-hover:translate-y-0"
         >
           <CancelIcon width={12} height={12} className="text-zinc-300" />