use signal for note metadata

This commit is contained in:
Ren Amamiya
2023-04-30 14:51:13 +07:00
parent ee610cae9a
commit 50b4914979
3 changed files with 33 additions and 13 deletions

View File

@@ -1,20 +1,20 @@
import NoteLike from '@lume/app/newsfeed/components/metadata/like';
import NoteReply from '@lume/app/newsfeed/components/metadata/reply';
import NoteRepost from '@lume/app/newsfeed/components/metadata/repost';
import ZapIcon from '@lume/shared/icons/zap';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { useContext, useState } from 'react';
import { useSignal } from '@preact/signals-react';
import { useContext } from 'react';
import useSWRSubscription from 'swr/subscription';
import NoteLike from '../metadata/like';
import NoteRepost from '../metadata/repost';
export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPubkey: string }) {
const pool: any = useContext(RelayContext);
const [replies, setReplies] = useState(0);
const [likes, setLikes] = useState(0);
const [reposts, setReposts] = useState(0);
const replies = useSignal(0);
const likes = useSignal(0);
const reposts = useSignal(0);
useSWRSubscription(id ? ['note-metadata', id] : null, ([, key], {}) => {
const unsubscribe = pool.subscribe(
@@ -30,14 +30,14 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
(event: any) => {
switch (event.kind) {
case 1:
setReplies(replies + 1);
replies.value++;
break;
case 6:
setReposts(reposts + 1);
reposts.value++;
break;
case 7:
if (event.content === '🤙' || event.content === '+') {
setLikes(likes + 1);
likes.value++;
}
break;
default:
@@ -53,9 +53,9 @@ export default function NoteMetadata({ id, eventPubkey }: { id: string; eventPub
return (
<div className="flex items-center gap-16">
<NoteReply id={id} replies={replies} />
<NoteLike id={id} pubkey={eventPubkey} likes={likes} />
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts} />
<NoteReply id={id} replies={replies.value} />
<NoteLike id={id} pubkey={eventPubkey} likes={likes.value} />
<NoteRepost id={id} pubkey={eventPubkey} reposts={reposts.value} />
<button className="group inline-flex w-min items-center gap-1.5">
<ZapIcon width={20} height={20} className="text-zinc-400 group-hover:text-orange-400" />
<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{0}</span>