add useBlock hook

src/app/space/components/blocks/feed.tsx

@@ -1,8 +1,8 @@
-import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { getNotesByAuthors, removeBlock } from '@libs/storage';
+import { getNotesByAuthors } from '@libs/storage';
 
 import { NoteKind_1, NoteKind_1063, NoteThread, Repost } from '@shared/notes';
 import { NoteKindUnsupport } from '@shared/notes/kinds/unsupport';
@@ -14,7 +14,6 @@ import { Block, LumeEvent } from '@utils/types';
 const ITEM_PER_PAGE = 10;
 
 export function FeedBlock({ params }: { params: Block }) {
-  const queryClient = useQueryClient();
   const { status, data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       queryKey: ['newsfeed', params.content],
@@ -25,8 +24,8 @@ export function FeedBlock({ params }: { params: Block }) {
     });
 
   const notes = data ? data.pages.flatMap((d: { data: LumeEvent[] }) => d.data) : [];
-  const parentRef = useRef();
 
+  const parentRef = useRef();
   const rowVirtualizer = useVirtualizer({
     count: hasNextPage ? notes.length + 1 : notes.length,
     getScrollElement: () => parentRef.current,
@@ -48,15 +47,6 @@ export function FeedBlock({ params }: { params: Block }) {
     }
   }, [notes.length, fetchNextPage, rowVirtualizer.getVirtualItems()]);
 
-  const block = useMutation({
-    mutationFn: (id: string) => {
-      return removeBlock(id);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
   const renderItem = useCallback(
     (index: string | number) => {
       const note: LumeEvent = notes[index];
@@ -124,7 +114,7 @@ export function FeedBlock({ params }: { params: Block }) {
 
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">
-      <TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
+      <TitleBar id={params.id} title={params.title} />
       <div
         ref={parentRef}
         className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"

src/app/space/components/blocks/hashtag.tsx

@@ -1,9 +1,8 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef } from 'react';
 
 import { useNDK } from '@libs/ndk/provider';
-import { removeBlock } from '@libs/storage';
 
 import { NoteKind_1, NoteSkeleton } from '@shared/notes';
 import { TitleBar } from '@shared/titleBar';
@@ -12,9 +11,6 @@ import { nHoursAgo } from '@utils/date';
 import { Block, LumeEvent } from '@utils/types';
 
 export function HashtagBlock({ params }: { params: Block }) {
-  const queryClient = useQueryClient();
-  const parentRef = useRef();
-
   const { relayUrls, fetcher } = useNDK();
   const { status, data } = useQuery(['hashtag', params.content], async () => {
     const events = (await fetcher.fetchAllEvents(
@@ -25,15 +21,7 @@ export function HashtagBlock({ params }: { params: Block }) {
     return events;
   });
 
-  const block = useMutation({
-    mutationFn: (id: string) => {
-      return removeBlock(id);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
+  const parentRef = useRef();
   const rowVirtualizer = useVirtualizer({
     count: data ? data.length : 0,
     getScrollElement: () => parentRef.current,
@@ -44,10 +32,7 @@ export function HashtagBlock({ params }: { params: Block }) {
 
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">
-      <TitleBar
-        title={params.title + ' in 48 hours ago'}
-        onClick={() => block.mutate(params.id)}
-      />
+      <TitleBar id={params.id} title={params.title + ' in 48 hours ago'} />
       <div
         ref={parentRef}
         className="scrollbar-hide flex h-full w-full flex-col justify-between gap-1.5 overflow-y-auto pb-20 pt-1.5"

src/app/space/components/blocks/image.tsx

@@ -1,25 +1,13 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
-import { removeBlock } from '@libs/storage';
-
 import { CancelIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
 
+import { useBlock } from '@utils/hooks/useBlock';
 import { Block } from '@utils/types';
 
 export function ImageBlock({ params }: { params: Block }) {
-  const queryClient = useQueryClient();
-
-  const block = useMutation({
-    mutationFn: (id: string) => {
-      return removeBlock(id);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
+  const { remove } = useBlock();
 
   return (
     <div className="flex h-full w-[350px] shrink-0 flex-col justify-between border-r border-zinc-900">
@@ -29,7 +17,7 @@ export function ImageBlock({ params }: { params: Block }) {
             <h3 className="font-medium text-white drop-shadow-lg">{params.title}</h3>
             <button
               type="button"
-              onClick={() => block.mutate(params.id)}
+              onClick={() => remove.mutate(params.id)}
               className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-white/30 backdrop-blur-lg"
             >
               <CancelIcon width={16} height={16} className="text-white" />

src/app/space/components/blocks/thread.tsx

@@ -1,8 +1,4 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-
 // import { useLiveThread } from '@app/space/hooks/useLiveThread';
-import { removeBlock } from '@libs/storage';
-
 import {
   NoteActions,
   NoteContent,
@@ -18,25 +14,14 @@ import { useEvent } from '@utils/hooks/useEvent';
 import { Block } from '@utils/types';
 
 export function ThreadBlock({ params }: { params: Block }) {
-  const queryClient = useQueryClient();
-
   const { status, data } = useEvent(params.content);
 
-  const block = useMutation({
-    mutationFn: (id: string) => {
-      return removeBlock(id);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
   // subscribe to live reply
   // useLiveThread(params.content);
 
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">
-      <TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
+      <TitleBar id={params.id} title={params.title} />
       <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">

src/app/space/components/blocks/user.tsx

@@ -1,12 +1,9 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { UserFeed } from '@app/user/components/feed';
 import { UserMetadata } from '@app/user/components/metadata';
 
-import { removeBlock } from '@libs/storage';
-
 import { ZapIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 import { TitleBar } from '@shared/titleBar';
@@ -19,22 +16,11 @@ import { shortenKey } from '@utils/shortenKey';
 import { Block } from '@utils/types';
 
 export function UserBlock({ params }: { params: Block }) {
-  const queryClient = useQueryClient();
-
   const { user } = useProfile(params.content);
   const { status, userFollows, follow, unfollow } = useSocial();
 
   const [followed, setFollowed] = useState(false);
 
-  const block = useMutation({
-    mutationFn: (id: string) => {
-      return removeBlock(id);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['blocks'] });
-    },
-  });
-
   const followUser = (pubkey: string) => {
     try {
       follow(pubkey);
@@ -67,7 +53,7 @@ export function UserBlock({ params }: { params: Block }) {
 
   return (
     <div className="w-[400px] shrink-0 border-r border-zinc-900">
-      <TitleBar title={params.title} onClick={() => block.mutate(params.id)} />
+      <TitleBar id={params.id} title={params.title} />
       <div className="scrollbar-hide flex h-full w-full flex-col gap-1.5 overflow-y-auto pb-20 pt-1.5">
         <div className="px-3 pt-1.5">
           <Image

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" />

src/utils/hooks/useBlock.tsx

@@ -0,0 +1,33 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { createBlock, removeBlock } from '@libs/storage';
+
+interface BlockData {
+  kind: number;
+  title: string;
+  content: string;
+}
+
+export function useBlock() {
+  const queryClient = useQueryClient();
+
+  const add = useMutation({
+    mutationFn: (data: BlockData) => {
+      return createBlock(data.kind, data.title, data.content);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['blocks'] });
+    },
+  });
+
+  const remove = useMutation({
+    mutationFn: (id: string) => {
+      return removeBlock(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['blocks'] });
+    },
+  });
+
+  return { add, remove };
+}