update note actions component

This commit is contained in:
Ren Amamiya
2023-07-16 14:24:19 +07:00
parent e0a14ce6cf
commit abc53a0d9a
15 changed files with 64 additions and 74 deletions

View File

@@ -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>
);

View File

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

View File

@@ -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 ? (

View File

@@ -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} />

View File

@@ -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} />

View File

@@ -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>

View File

@@ -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} />

View File

@@ -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} />

View File

@@ -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: () => {