nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated reaction component

Browse Source
This commit is contained in:
Ren Amamiya 2023-03-16 21:29:57 +07:00
parent 096ff38a08
commit f71eabc5c4
8 changed files with 101 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/note/atoms/reaction.tsx
View File

@ -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>
);
}

15
src/components/note/atoms/reply.tsx
View File

@ -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>
);
}

22
src/components/note/atoms/userRepost.tsx
View File

@ -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>
);
});

52
src/components/note/atoms/userWithUsername.tsx
View File

@ -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>
);
});

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

@ -1,5 +1,6 @@
import { ImageCard } from '@components/note/content/preview/imageCard';
import { Video } from '@components/note/content/preview/video';
import { Reaction } from '@components/note/reaction';
import { UserExtend } from '@components/user/extend';
import dynamic from 'next/dynamic';
@ -42,7 +43,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
// add video to preview
setPreview({ url: parseURL.href, type: 'video' });
content.current = content.current.replace(parseURL.href, '');
} // #TODO: support multiple previ3ew
} // #TODO: support multiple preview
}
}, [urls]);
@ -85,12 +86,9 @@ 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>
*/}
</div>
</div>
</div>

98
src/components/note/reaction/index.tsx Normal file
View 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>
);
});

52
src/components/note/repost.tsx
View File

@ -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>
);
}
});

9
src/pages/newsfeed/following.tsx
View File

@ -4,7 +4,6 @@ import WithSidebarLayout from '@layouts/withSidebar';
import { DatabaseContext } from '@components/contexts/database';
import NoteForm from '@components/note/form';
import { Placeholder } from '@components/note/placeholder';
import { Repost } from '@components/note/repost';
import { Single } from '@components/note/single';
import { atomHasNewerNote } from '@stores/note';
@ -59,13 +58,7 @@ export default function Page() {
const ItemContent = useCallback(
(index: string | number) => {
const event = data[index];
if (event.content.includes('#[0]') && event.tags[0][0] == 'e') {
// type: repost
return <Repost root={event.tags} user={event.pubkey} />;
} else {
// type: default
return <Single event={event} />;
}
return <Single event={event} />;
},
[data]
);