Files
lume/src/app/note/components/metadata/repost.tsx
2023-05-02 16:09:32 +07:00

52 lines
1.6 KiB
TypeScript

import RepostIcon from '@lume/shared/icons/repost';
import { RelayContext } from '@lume/shared/relayProvider';
import { WRITEONLY_RELAYS } from '@lume/stores/constants';
import { dateToUnix } from '@lume/utils/getDate';
import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
import { getEventHash, signEvent } from 'nostr-tools';
import { useContext, useEffect, useState } from 'react';
export default function NoteRepost({ id, pubkey, reposts }: { id: string; pubkey: string; reposts: number }) {
const pool: any = useContext(RelayContext);
const { account, isLoading, isError } = useActiveAccount();
const [count, setCount] = useState(0);
const submitEvent = (e: any) => {
e.stopPropagation();
if (!isLoading && !isError && account) {
const event: any = {
content: '',
kind: 6,
tags: [
['e', id],
['p', pubkey],
],
created_at: dateToUnix(),
pubkey: account.pubkey,
};
event.id = getEventHash(event);
event.sig = signEvent(event, account.privkey);
// publish event to all relays
pool.publish(event, WRITEONLY_RELAYS);
// update state
setCount(count + 1);
} else {
console.log('error');
}
};
useEffect(() => {
setCount(reposts);
}, [reposts]);
return (
<button type="button" onClick={(e) => submitEvent(e)} className="group inline-flex w-min items-center gap-1.5">
<RepostIcon width={20} height={20} className="text-zinc-400 group-hover:text-blue-400" />
<span className="text-sm leading-none text-zinc-400 group-hover:text-zinc-200">{count}</span>
</button>
);
}