diff --git a/src/components/note/atoms/reaction.tsx b/src/components/note/atoms/reaction.tsx deleted file mode 100644 index c328c64e..00000000 --- a/src/components/note/atoms/reaction.tsx +++ /dev/null @@ -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 ( - - ); -} diff --git a/src/components/note/atoms/reply.tsx b/src/components/note/atoms/reply.tsx deleted file mode 100644 index 7bfd7bd6..00000000 --- a/src/components/note/atoms/reply.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ChatBubbleIcon } from '@radix-ui/react-icons'; -import { useState } from 'react'; - -export default function Reply() { - const [count] = useState(0); - - return ( - - ); -} diff --git a/src/components/note/atoms/userRepost.tsx b/src/components/note/atoms/userRepost.tsx deleted file mode 100644 index 537d1a08..00000000 --- a/src/components/note/atoms/userRepost.tsx +++ /dev/null @@ -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 ( -
-

{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')} repost

-
- ); -}); diff --git a/src/components/note/atoms/userWithUsername.tsx b/src/components/note/atoms/userWithUsername.tsx deleted file mode 100644 index 6f1e3787..00000000 --- a/src/components/note/atoms/userWithUsername.tsx +++ /dev/null @@ -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 ( -
-
- {profile.picture ? ( - - ) : ( - - )} -
-
-
-
- - {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')} - - - {profile.username ? profile.username : truncate(pubkey, 16, ' .... ')} - -
-
- -
-
-
-
- ); -}); diff --git a/src/components/note/content/index.tsx b/src/components/note/content/index.tsx index 6a92d25b..780e8cfb 100644 --- a/src/components/note/content/index.tsx +++ b/src/components/note/content/index.tsx @@ -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 }) { <>{previewAttachment()} - {/*
-
- */} diff --git a/src/components/note/reaction/index.tsx b/src/components/note/reaction/index.tsx new file mode 100644 index 00000000..04f70f30 --- /dev/null +++ b/src/components/note/reaction/index.tsx @@ -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 ( + + ); +}); diff --git a/src/components/note/repost.tsx b/src/components/note/repost.tsx deleted file mode 100644 index 331f2888..00000000 --- a/src/components/note/repost.tsx +++ /dev/null @@ -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 ( -
-
- -
- -
-
- {events[0].content && } -
- ); - } else { - return ( -
- -
- ); - } -}); diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx index 106a3b83..592497aa 100644 --- a/src/pages/newsfeed/following.tsx +++ b/src/pages/newsfeed/following.tsx @@ -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 ; - } else { - // type: default - return ; - } + return ; }, [data] );