mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
use signal for note metadata
This commit is contained in:
parent
ee610cae9a
commit
50b4914979
@ -16,6 +16,7 @@
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.23.1",
|
||||
"@headlessui/react": "^1.7.14",
|
||||
"@preact/signals-react": "1.2.2",
|
||||
"@supabase/supabase-js": "^2.21.0",
|
||||
"@tanstack/react-query": "^4.29.5",
|
||||
"@tanstack/react-virtual": "3.0.0-beta.54",
|
||||
|
@ -7,6 +7,9 @@ dependencies:
|
||||
'@headlessui/react':
|
||||
specifier: ^1.7.14
|
||||
version: 1.7.14(react-dom@18.2.0)(react@18.2.0)
|
||||
'@preact/signals-react':
|
||||
specifier: 1.2.2
|
||||
version: 1.2.2(react@18.2.0)
|
||||
'@supabase/supabase-js':
|
||||
specifier: ^2.21.0
|
||||
version: 2.21.0(encoding@0.1.13)
|
||||
@ -752,6 +755,22 @@ packages:
|
||||
{ integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== }
|
||||
dev: true
|
||||
|
||||
/@preact/signals-core@1.3.0:
|
||||
resolution:
|
||||
{ integrity: sha512-M+M3ZOtd1dtV/uasyk4SZu1vbfEJ4NeENv0F7F12nijZYedB5wSgbtZcuACyssnTznhF4ctUyrR0dZHuHfyWKA== }
|
||||
dev: false
|
||||
|
||||
/@preact/signals-react@1.2.2(react@18.2.0):
|
||||
resolution:
|
||||
{ integrity: sha512-GoESQ9n1bns2FD+8yqH7lBvQMavboKLCNEW+s0hs3Wcp5B1VHvVxwJo6aFs6rpxoh1/q8Tvwbi4vIeehBD2mzA== }
|
||||
peerDependencies:
|
||||
react: 17.x || 18.x
|
||||
dependencies:
|
||||
'@preact/signals-core': 1.3.0
|
||||
react: 18.2.0
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@rollup/plugin-virtual@3.0.1:
|
||||
resolution:
|
||||
{ integrity: sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og== }
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user