diff --git a/src/components/note/root.tsx b/src/components/note/root.tsx
new file mode 100644
index 00000000..97893162
--- /dev/null
+++ b/src/components/note/root.tsx
@@ -0,0 +1,42 @@
+import { RelayContext } from '@components/contexts/relay';
+import { Content } from '@components/note/content';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+
+export const RootNote = memo(function RootNote({ id }: { id: string }) {
+ const relayPool: any = useContext(RelayContext);
+
+ const [relays]: any = useLocalStorage('relays');
+ const [event, setEvent] = useState(null);
+
+ const fetchEvent = useCallback(() => {
+ relayPool.subscribe(
+ [
+ {
+ ids: [id],
+ kinds: [1],
+ },
+ ],
+ relays,
+ (event: any) => {
+ setEvent(event);
+ }
+ );
+ }, [id, relayPool, relays]);
+
+ useEffect(() => {
+ fetchEvent();
+ }, [fetchEvent]);
+
+ if (event) {
+ return (
+
+ );
+ } else {
+ return <>Loading...>;
+ }
+});
diff --git a/src/components/note/single.tsx b/src/components/note/single.tsx
deleted file mode 100644
index 2443b7dd..00000000
--- a/src/components/note/single.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Content } from '@components/note/content';
-
-import { memo } from 'react';
-
-export const Single = memo(function Single({ event }: { event: any }) {
- return (
-
-
-
- );
-});
diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx
index 592497aa..b2f864fc 100644
--- a/src/pages/newsfeed/following.tsx
+++ b/src/pages/newsfeed/following.tsx
@@ -2,16 +2,16 @@ import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
import { DatabaseContext } from '@components/contexts/database';
+import { Note } from '@components/note';
import NoteForm from '@components/note/form';
import { Placeholder } from '@components/note/placeholder';
-import { Single } from '@components/note/single';
import { atomHasNewerNote } from '@stores/note';
import { dateToUnix } from '@utils/getDate';
import { useAtom } from 'jotai';
-import { useCallback, useState } from 'react';
+import { Key, useCallback, useState } from 'react';
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
import { Virtuoso } from 'react-virtuoso';
@@ -56,15 +56,15 @@ export default function Page() {
}, [db, setHasNewerNote]);
const ItemContent = useCallback(
- (index: string | number) => {
+ (index: Key) => {
const event = data[index];
- return
;
+ return
;
},
[data]
);
const computeItemKey = useCallback(
- (index: string | number) => {
+ (index: Key) => {
return data[index].id;
},
[data]
@@ -87,6 +87,7 @@ export default function Page() {
if (reload === false) {
getData().catch(console.error);
} else {
+ // auto reload after 8s
const timer = setTimeout(() => {
getData().catch(console.error);
}, 8000);
@@ -101,7 +102,7 @@ export default function Page() {