update note actions component
This commit is contained in:
@@ -1,28 +1,47 @@
|
||||
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';
|
||||
import { NoteReply } from '@shared/notes/actions/reply';
|
||||
import { NoteRepost } from '@shared/notes/actions/repost';
|
||||
import { NoteZap } from '@shared/notes/actions/zap';
|
||||
|
||||
export function NoteActions({
|
||||
id,
|
||||
rootID,
|
||||
eventPubkey,
|
||||
}: {
|
||||
id: string;
|
||||
rootID?: string;
|
||||
eventPubkey: string;
|
||||
}) {
|
||||
export function NoteActions({ id, pubkey }: { id: string; pubkey: 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 openThread = (thread: string) => {
|
||||
block.mutate({ kind: 2, title: 'Thread', content: thread });
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip.Provider>
|
||||
<div className="-ml-1 mt-4 inline-flex w-full items-center justify-between">
|
||||
<div className="-ml-1 mt-4 inline-flex w-full items-center">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<NoteReply id={id} pubkey={pubkey} />
|
||||
<NoteRepost id={id} pubkey={pubkey} />
|
||||
<NoteReaction />
|
||||
<NoteZap />
|
||||
<NoteRepost id={id} pubkey={eventPubkey} />
|
||||
<NoteReply id={id} rootID={rootID} pubkey={eventPubkey} />
|
||||
</div>
|
||||
<div className="mx-2 block h-4 w-px bg-zinc-800" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openThread(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" />
|
||||
</button>
|
||||
</div>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
|
||||
@@ -4,15 +4,7 @@ import { ReplyIcon } from '@shared/icons';
|
||||
|
||||
import { useComposer } from '@stores/composer';
|
||||
|
||||
export function NoteReply({
|
||||
id,
|
||||
rootID,
|
||||
pubkey,
|
||||
}: {
|
||||
id: string;
|
||||
rootID?: string;
|
||||
pubkey: string;
|
||||
}) {
|
||||
export function NoteReply({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
const setReply = useComposer((state) => state.setReply);
|
||||
|
||||
return (
|
||||
@@ -20,7 +12,7 @@ export function NoteReply({
|
||||
<Tooltip.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setReply(id, rootID, pubkey)}
|
||||
onClick={() => setReply(id, pubkey)}
|
||||
className="group inline-flex h-7 w-7 items-center justify-center"
|
||||
>
|
||||
<ReplyIcon className="h-5 w-5 text-zinc-300 group-hover:text-green-500" />
|
||||
|
||||
@@ -24,11 +24,7 @@ export function NoteKind_1({
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<NoteContent content={content} />
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
<NoteActions id={event.event_id} pubkey={event.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
{!skipMetadata ? (
|
||||
|
||||
@@ -27,11 +27,7 @@ export function NoteKind_1063({ event }: { event: LumeEvent }) {
|
||||
className="h-auto w-full rounded-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
<NoteActions id={event.event_id} pubkey={event.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
|
||||
@@ -43,11 +43,7 @@ export function Repost({ event }: { event: LumeEvent }) {
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<NoteContent content={data.content} />
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
<NoteActions id={event.event_id} pubkey={event.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
|
||||
@@ -31,7 +31,7 @@ export function SubNote({ id }: { id: string }) {
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<NoteContent content={data.content} />
|
||||
<NoteActions id={data.id} eventPubkey={data.pubkey} />
|
||||
<NoteActions id={data.event_id} pubkey={data.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,11 +28,7 @@ export function NoteThread({
|
||||
<div className="w-11 shrink-0" />
|
||||
<div className="flex-1">
|
||||
<NoteContent content={content} />
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
<NoteActions id={event.event_id} pubkey={event.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
|
||||
@@ -25,11 +25,7 @@ export function NoteKindUnsupport({ event }: { event: LumeEvent }) {
|
||||
<p>{event.content.toString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<NoteActions
|
||||
id={event.event_id}
|
||||
rootID={event.parent_id}
|
||||
eventPubkey={event.pubkey}
|
||||
/>
|
||||
<NoteActions id={event.event_id} pubkey={event.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
<NoteMetadata id={event.event_id} />
|
||||
|
||||
@@ -63,7 +63,7 @@ export function NoteMetadata({ id }: { id: string }) {
|
||||
);
|
||||
|
||||
const block = useMutation({
|
||||
mutationFn: (data: any) => {
|
||||
mutationFn: (data: { kind: number; title: string; content: string }) => {
|
||||
return createBlock(data.kind, data.title, data.content);
|
||||
},
|
||||
onSuccess: () => {
|
||||
|
||||
Reference in New Issue
Block a user