72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { AccountContext } from '@components/accountProvider';
|
|
import { RelayContext } from '@components/relaysProvider';
|
|
|
|
import { WRITEONLY_RELAYS } from '@stores/constants';
|
|
|
|
import { dateToUnix } from '@utils/getDate';
|
|
|
|
import { Heart } from 'iconoir-react';
|
|
import { getEventHash, signEvent } from 'nostr-tools';
|
|
import { useContext, useEffect, useState } from 'react';
|
|
|
|
export const NoteReaction = ({
|
|
count,
|
|
liked,
|
|
eventID,
|
|
eventPubkey,
|
|
}: {
|
|
count: number;
|
|
liked: boolean;
|
|
eventID: string;
|
|
eventPubkey: string;
|
|
}) => {
|
|
const pool: any = useContext(RelayContext);
|
|
const activeAccount: any = useContext(AccountContext);
|
|
|
|
const [isReact, setIsReact] = useState(false);
|
|
const [like, setLike] = useState(0);
|
|
|
|
const handleLike = (e: any) => {
|
|
e.stopPropagation();
|
|
|
|
if (liked === false || isReact === false) {
|
|
const event: any = {
|
|
content: '+',
|
|
kind: 7,
|
|
tags: [
|
|
['e', eventID],
|
|
['p', eventPubkey],
|
|
],
|
|
created_at: dateToUnix(),
|
|
pubkey: activeAccount.pubkey,
|
|
};
|
|
event.id = getEventHash(event);
|
|
event.sig = signEvent(event, activeAccount.privkey);
|
|
// publish event to all relays
|
|
pool.publish(event, WRITEONLY_RELAYS);
|
|
// update state to change icon to filled heart
|
|
setIsReact(true);
|
|
// update counter
|
|
setLike((like) => (like += 1));
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setIsReact(liked);
|
|
setLike(count);
|
|
}, [count, liked]);
|
|
|
|
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 ? (
|
|
<Heart width={20} height={20} className="fill-red-500 text-transparent" />
|
|
) : (
|
|
<Heart width={20} height={20} className="text-zinc-500" />
|
|
)}
|
|
</div>
|
|
<span>{like}</span>
|
|
</button>
|
|
);
|
|
};
|