+
);
});
diff --git a/src/components/note/reaction/index.tsx b/src/components/note/content/counter/likes.tsx
similarity index 53%
rename from src/components/note/reaction/index.tsx
rename to src/components/note/content/counter/likes.tsx
index 75061089..e0da83d5 100644
--- a/src/components/note/reaction/index.tsx
+++ b/src/components/note/content/counter/likes.tsx
@@ -4,66 +4,50 @@ import { dateToUnix } from '@utils/getDate';
import { useLocalStorage } from '@rehooks/local-storage';
import { getEventHash, signEvent } from 'nostr-tools';
-import { memo, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useState } from 'react';
-export const Reaction = memo(function Reaction({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
+export const LikesCounter = memo(function LikesCounter({
+ likes,
+ eventID,
+ eventPubkey,
+}: {
+ likes: number;
+ 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 [isReact, setIsReact] = useState(false);
- 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);
- };
+ const handleLike = useCallback(
+ (e: any) => {
+ e.stopPropagation();
- 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]);
+ 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);
+ },
+ [currentUser.id, currentUser.privkey, eventID, eventPubkey, relayPool, relays]
+ );
return (
-
+
openThread()}
+ className="relative z-10 flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
+ >
{root && (
<>
diff --git a/src/components/note/root.tsx b/src/components/note/root.tsx
index 97893162..36e3090a 100644
--- a/src/components/note/root.tsx
+++ b/src/components/note/root.tsx
@@ -32,7 +32,7 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
if (event) {
return (
);
diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx
index b2f864fc..b0a59068 100644
--- a/src/pages/newsfeed/following.tsx
+++ b/src/pages/newsfeed/following.tsx
@@ -3,7 +3,7 @@ import WithSidebarLayout from '@layouts/withSidebar';
import { DatabaseContext } from '@components/contexts/database';
import { Note } from '@components/note';
-import NoteForm from '@components/note/form';
+import FormBasic from '@components/note/form/basic';
import { Placeholder } from '@components/note/placeholder';
import { atomHasNewerNote } from '@stores/note';
@@ -102,7 +102,7 @@ export default function Page() {
@@ -112,7 +112,7 @@ export default function Page() {
data={data}
itemContent={ItemContent}
components={{
- Header: () =>
,
+ Header: () =>
,
EmptyPlaceholder: () =>
,
ScrollSeekPlaceholder: () =>
,
}}
diff --git a/src/pages/newsfeed/thread/index.tsx b/src/pages/newsfeed/thread/index.tsx
new file mode 100644
index 00000000..bbd801ee
--- /dev/null
+++ b/src/pages/newsfeed/thread/index.tsx
@@ -0,0 +1,61 @@
+import BaseLayout from '@layouts/base';
+import WithSidebarLayout from '@layouts/withSidebar';
+
+import { DatabaseContext } from '@components/contexts/database';
+import { Content } from '@components/note/content';
+import FormBasic from '@components/note/form/basic';
+
+import { useRouter } from 'next/router';
+import {
+ JSXElementConstructor,
+ ReactElement,
+ ReactFragment,
+ ReactPortal,
+ useCallback,
+ useContext,
+ useEffect,
+ useState,
+} from 'react';
+
+export default function Page() {
+ const { db }: any = useContext(DatabaseContext);
+
+ const [root, setRoot] = useState(null);
+
+ const router = useRouter();
+ const { id }: any = router.query;
+
+ const fetchRoot = useCallback(async () => {
+ const result = await db.select(`SELECT * FROM cache_notes WHERE id = "${id}"`);
+ setRoot(result[0]);
+ }, [db, id]);
+
+ useEffect(() => {
+ fetchRoot().catch(console.error);
+ }, [fetchRoot]);
+
+ return (
+
+ );
+}
+
+Page.getLayout = function getLayout(
+ page:
+ | string
+ | number
+ | boolean
+ | ReactElement
>
+ | ReactFragment
+ | ReactPortal
+) {
+ return (
+
+ {page}
+
+ );
+};