mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
updated reaction component
This commit is contained in:
parent
096ff38a08
commit
f71eabc5c4
@ -1,78 +0,0 @@
|
|||||||
import { RelayContext } from '@components/contexts/relay';
|
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
|
||||||
|
|
||||||
import { HeartFilledIcon, HeartIcon } from '@radix-ui/react-icons';
|
|
||||||
import { useLocalStorage } from '@rehooks/local-storage';
|
|
||||||
import { getEventHash, signEvent } from 'nostr-tools';
|
|
||||||
import { useContext, useState } from 'react';
|
|
||||||
|
|
||||||
export default function Reaction({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
|
|
||||||
const relayPool: any = useContext(RelayContext);
|
|
||||||
const [relays]: any = useLocalStorage('relays');
|
|
||||||
|
|
||||||
const [reaction, setReaction] = useState(0);
|
|
||||||
const [isReact, setIsReact] = useState(false);
|
|
||||||
|
|
||||||
const [currentUser]: any = useLocalStorage('current-user');
|
|
||||||
const pubkey = currentUser.id;
|
|
||||||
const privkey = currentUser.privkey;
|
|
||||||
|
|
||||||
/*
|
|
||||||
relayPool.subscribe(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
'#e': [eventID],
|
|
||||||
since: 0,
|
|
||||||
kinds: [7],
|
|
||||||
limit: 10,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
relays,
|
|
||||||
(event: any) => {
|
|
||||||
if (event.content === '🤙' || event.content === '+') {
|
|
||||||
setReaction(reaction + 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
undefined,
|
|
||||||
(events: any, relayURL: any) => {
|
|
||||||
console.log(events, relayURL);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
*/
|
|
||||||
|
|
||||||
const handleReaction = (e: any) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
const event: any = {
|
|
||||||
content: '+',
|
|
||||||
kind: 7,
|
|
||||||
tags: [
|
|
||||||
['e', eventID],
|
|
||||||
['p', eventPubkey],
|
|
||||||
],
|
|
||||||
created_at: dateToUnix(),
|
|
||||||
pubkey: pubkey,
|
|
||||||
};
|
|
||||||
event.id = getEventHash(event);
|
|
||||||
event.sig = signEvent(event, privkey);
|
|
||||||
|
|
||||||
relayPool.publish(event, relays);
|
|
||||||
|
|
||||||
setIsReact(true);
|
|
||||||
setReaction(reaction + 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button onClick={(e) => handleReaction(e)} className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
|
|
||||||
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
|
|
||||||
{isReact ? (
|
|
||||||
<HeartFilledIcon className="h-4 w-4 group-hover:text-red-400" />
|
|
||||||
) : (
|
|
||||||
<HeartIcon className="h-4 w-4 text-zinc-500" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span>{reaction}</span>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,15 +0,0 @@
|
|||||||
import { ChatBubbleIcon } from '@radix-ui/react-icons';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function Reply() {
|
|
||||||
const [count] = useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
|
|
||||||
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
|
|
||||||
<ChatBubbleIcon className="h-4 w-4 group-hover:text-orange-400" />
|
|
||||||
</div>
|
|
||||||
<span>{count}</span>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,22 +0,0 @@
|
|||||||
import { truncate } from '@utils/truncate';
|
|
||||||
|
|
||||||
import { memo, useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export const UserRepost = memo(function UserRepost({ pubkey }: { pubkey: string }) {
|
|
||||||
const [profile, setProfile] = useState({ picture: null, name: null });
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
|
|
||||||
res.json().then((res) => {
|
|
||||||
// update state
|
|
||||||
setProfile(JSON.parse(res.content));
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}, [pubkey]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="text-zinc-400">
|
|
||||||
<p>{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')} repost</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
@ -1,52 +0,0 @@
|
|||||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
|
||||||
|
|
||||||
import { truncate } from '@utils/truncate';
|
|
||||||
|
|
||||||
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
|
|
||||||
import Avatar from 'boring-avatars';
|
|
||||||
import { memo, useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pubkey: string }) {
|
|
||||||
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
|
|
||||||
res.json().then((res) => {
|
|
||||||
// update state
|
|
||||||
setProfile(JSON.parse(res.content));
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}, [pubkey]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative flex items-start gap-2">
|
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
|
||||||
{profile.picture ? (
|
|
||||||
<ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
|
|
||||||
) : (
|
|
||||||
<Avatar
|
|
||||||
size={44}
|
|
||||||
name={pubkey}
|
|
||||||
variant="beam"
|
|
||||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
|
||||||
<div className="flex w-full justify-between">
|
|
||||||
<div className="flex flex-col gap-1 text-sm">
|
|
||||||
<span className="font-bold leading-tight">
|
|
||||||
{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
|
|
||||||
</span>
|
|
||||||
<span className="text-zinc-500">
|
|
||||||
{profile.username ? profile.username : truncate(pubkey, 16, ' .... ')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
@ -1,5 +1,6 @@
|
|||||||
import { ImageCard } from '@components/note/content/preview/imageCard';
|
import { ImageCard } from '@components/note/content/preview/imageCard';
|
||||||
import { Video } from '@components/note/content/preview/video';
|
import { Video } from '@components/note/content/preview/video';
|
||||||
|
import { Reaction } from '@components/note/reaction';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@components/user/extend';
|
||||||
|
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
@ -42,7 +43,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
|
|||||||
// add video to preview
|
// add video to preview
|
||||||
setPreview({ url: parseURL.href, type: 'video' });
|
setPreview({ url: parseURL.href, type: 'video' });
|
||||||
content.current = content.current.replace(parseURL.href, '');
|
content.current = content.current.replace(parseURL.href, '');
|
||||||
} // #TODO: support multiple previ3ew
|
} // #TODO: support multiple preview
|
||||||
}
|
}
|
||||||
}, [urls]);
|
}, [urls]);
|
||||||
|
|
||||||
@ -85,12 +86,9 @@ export const Content = memo(function Content({ data }: { data: any }) {
|
|||||||
</div>
|
</div>
|
||||||
<>{previewAttachment()}</>
|
<>{previewAttachment()}</>
|
||||||
</div>
|
</div>
|
||||||
{/*
|
|
||||||
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={data.id} />
|
|
||||||
<Reaction eventID={data.id} eventPubkey={data.pubkey} />
|
<Reaction eventID={data.id} eventPubkey={data.pubkey} />
|
||||||
</div>
|
</div>
|
||||||
*/}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
98
src/components/note/reaction/index.tsx
Normal file
98
src/components/note/reaction/index.tsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
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, useContext, useState } from 'react';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export const Reaction = memo(function Reaction({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
|
||||||
|
const relayPool: any = useContext(RelayContext);
|
||||||
|
const [relays]: any = useLocalStorage('relays');
|
||||||
|
|
||||||
|
const [reaction, setReaction] = useState(0);
|
||||||
|
const [isReact, setIsReact] = useState(false);
|
||||||
|
|
||||||
|
const [currentUser]: any = useLocalStorage('current-user');
|
||||||
|
|
||||||
|
const handleReaction = (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);
|
||||||
|
// update reaction count
|
||||||
|
setReaction(reaction + 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
relayPool.subscribe(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
'#e': [eventID],
|
||||||
|
since: 0,
|
||||||
|
kinds: [7],
|
||||||
|
limit: 10,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
relays,
|
||||||
|
(event: any) => {
|
||||||
|
if (event.content === '🤙' || event.content === '+') {
|
||||||
|
setReaction(reaction + 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
(events: any, relayURL: any) => {
|
||||||
|
console.log(events, relayURL);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [eventID, relayPool, relays]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={(e) => handleReaction(e)} className="group flex w-16 items-center gap-1.5 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>{reaction}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
});
|
@ -1,52 +0,0 @@
|
|||||||
import { RelayContext } from '@components/contexts/relay';
|
|
||||||
import { UserRepost } from '@components/note/atoms/userRepost';
|
|
||||||
import { Content } from '@components/note/content';
|
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
|
||||||
|
|
||||||
import { LoopIcon } from '@radix-ui/react-icons';
|
|
||||||
import useLocalStorage from '@rehooks/local-storage';
|
|
||||||
import { memo, useContext, useState } from 'react';
|
|
||||||
|
|
||||||
export const Repost = memo(function Repost({ root, user }: { root: any; user: string }) {
|
|
||||||
const relayPool: any = useContext(RelayContext);
|
|
||||||
const [relays]: any = useLocalStorage('relays');
|
|
||||||
const [events, setEvents] = useState([]);
|
|
||||||
|
|
||||||
relayPool.subscribe(
|
|
||||||
[
|
|
||||||
{
|
|
||||||
ids: [root[0][1]],
|
|
||||||
since: 0,
|
|
||||||
kinds: [1],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
relays,
|
|
||||||
(event: any) => {
|
|
||||||
setEvents((events) => [event, ...events]);
|
|
||||||
},
|
|
||||||
undefined,
|
|
||||||
(events: any, relayURL: any) => {
|
|
||||||
console.log(events, relayURL);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (events !== null && Object.keys(events).length > 0) {
|
|
||||||
return (
|
|
||||||
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
|
|
||||||
<div className="flex items-center gap-1 pl-8 text-sm">
|
|
||||||
<LoopIcon className="h-4 w-4 text-zinc-400" />
|
|
||||||
<div className="ml-2">
|
|
||||||
<UserRepost pubkey={user} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{events[0].content && <Content data={events[0]} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<div className="border-b border-zinc-800">
|
|
||||||
<Placeholder />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
@ -4,7 +4,6 @@ import WithSidebarLayout from '@layouts/withSidebar';
|
|||||||
import { DatabaseContext } from '@components/contexts/database';
|
import { DatabaseContext } from '@components/contexts/database';
|
||||||
import NoteForm from '@components/note/form';
|
import NoteForm from '@components/note/form';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
import { Repost } from '@components/note/repost';
|
|
||||||
import { Single } from '@components/note/single';
|
import { Single } from '@components/note/single';
|
||||||
|
|
||||||
import { atomHasNewerNote } from '@stores/note';
|
import { atomHasNewerNote } from '@stores/note';
|
||||||
@ -59,13 +58,7 @@ export default function Page() {
|
|||||||
const ItemContent = useCallback(
|
const ItemContent = useCallback(
|
||||||
(index: string | number) => {
|
(index: string | number) => {
|
||||||
const event = data[index];
|
const event = data[index];
|
||||||
if (event.content.includes('#[0]') && event.tags[0][0] == 'e') {
|
return <Single event={event} />;
|
||||||
// type: repost
|
|
||||||
return <Repost root={event.tags} user={event.pubkey} />;
|
|
||||||
} else {
|
|
||||||
// type: default
|
|
||||||
return <Single event={event} />;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
[data]
|
[data]
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user