reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added note metadta component

Browse Source
This commit is contained in:
Ren Amamiya
2023-03-17 13:05:10 +07:00
parent e43a999ca8
commit b3f95366d3
9 changed files with 189 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/note/content/counter/comments.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { memo } from 'react';
export const CommentsCounter = memo(function CommentsCounter({ comments }: { comments: number }) {
return (
<div className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
<div className="rounded-md p-1 group-hover:bg-zinc-800">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-5 w-5 text-zinc-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
/>
</svg>
</div>
<span>{comments}</span>
</div>
);
});

81
src/components/note/content/counter/likes.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { RelayContext } from '@components/contexts/relay';
import { dateToUnix } from '@utils/getDate';
import { useLocalStorage } from '@rehooks/local-storage';
import { getEventHash, signEvent } from 'nostr-tools';
import { memo, useCallback, useContext, useState } from 'react';
export const LikesCounter = memo(function LikesCounter({
likes,
eventID,
eventPubkey,
}: {
likes: number;
eventID: string;
eventPubkey: string;
}) {
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [currentUser]: any = useLocalStorage('current-user');
const [isReact, setIsReact] = useState(false);
const handleLike = useCallback(
(e: any) => {
e.stopPropagation();
const event: any = {
content: '+',
kind: 7,
tags: [
['e', eventID],
['p', eventPubkey],
],
created_at: dateToUnix(),
pubkey: currentUser.id,
};
event.id = getEventHash(event);
event.sig = signEvent(event, currentUser.privkey);
// publish event to all relays
relayPool.publish(event, relays);
// update state to change icon to filled heart
setIsReact(true);
},
[currentUser.id, currentUser.privkey, eventID, eventPubkey, relayPool, relays]
);
return (
<button onClick={(e) => handleLike(e)} className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
<div className="rounded-md p-1 group-hover:bg-zinc-800">
{isReact ? (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5 text-red-500"
>
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-5 w-5 text-zinc-500"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
/>
</svg>
)}
</div>
<span>{likes}</span>
</button>
);
});

8
src/components/note/content/index.tsx
View File

@@ -1,7 +1,6 @@
import NoteMetadata from '@components/note/content/metadata';
import { ImageCard } from '@components/note/content/preview/imageCard';
import { Video } from '@components/note/content/preview/video';
import { Reaction } from '@components/note/reaction';
import { Reply } from '@components/note/reply';
import { UserExtend } from '@components/user/extend';
import dynamic from 'next/dynamic';
@@ -87,10 +86,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
</div>
<>{previewAttachment()}</>
</div>
<div className="relative z-10 -ml-1 flex items-center gap-8">
<Reply eventID={data.id} />
<Reaction eventID={data.id} eventPubkey={data.pubkey} />
</div>
<NoteMetadata eventID={data.id} eventPubkey={data.pubkey} />
</div>
</div>
</div>

53
src/components/note/content/metadata.tsx Normal file
View File

@@ -0,0 +1,53 @@
import { RelayContext } from '@components/contexts/relay';
import { CommentsCounter } from '@components/note/content/counter/comments';
import { LikesCounter } from '@components/note/content/counter/likes';
import { useLocalStorage } from '@rehooks/local-storage';
import { useContext, useMemo, useState } from 'react';
export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
const relayPool: any = useContext(RelayContext);
const [relays]: any = useLocalStorage('relays');
const [likes, setLikes] = useState(0);
const [comments, setComments] = useState(0);
useMemo(() => {
relayPool.subscribe(
[
{
'#e': [eventID],
since: 0,
kinds: [1, 7],
},
],
relays,
(event: any) => {
switch (event.kind) {
case 1:
setComments((comments) => (comments += 1));
break;
case 7:
if (event.content === '🤙' || event.content === '+') {
setLikes((likes) => (likes += 1));
}
break;
default:
break;
}
},
undefined,
(events: any, relayURL: any) => {
console.log(events, relayURL);
}
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [eventID, relayPool, relays]);
return (
<div className="relative z-10 -ml-1 flex items-center gap-8">
<CommentsCounter comments={comments} />
<LikesCounter likes={likes} eventID={eventID} eventPubkey={eventPubkey} />
</div>
);
}