);
}
diff --git a/src/components/note/parent.tsx b/src/components/note/parent.tsx
new file mode 100644
index 00000000..af7a7a34
--- /dev/null
+++ b/src/components/note/parent.tsx
@@ -0,0 +1,155 @@
+import NoteMetadata from '@components/note/metadata';
+import { ImagePreview } from '@components/note/preview/image';
+import { VideoPreview } from '@components/note/preview/video';
+import { RelayContext } from '@components/relaysProvider';
+import { UserExtend } from '@components/user/extend';
+import { UserMention } from '@components/user/mention';
+
+import { relaysAtom } from '@stores/relays';
+
+import { createCacheNote, getNoteByID } from '@utils/storage';
+
+import destr from 'destr';
+import { useAtomValue } from 'jotai';
+import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import ReactPlayer from 'react-player';
+import reactStringReplace from 'react-string-replace';
+
+export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
+ const pool: any = useContext(RelayContext);
+
+ const relays = useAtomValue(relaysAtom);
+ const [event, setEvent] = useState(null);
+
+ const fetchEvent = useCallback(() => {
+ pool.subscribe(
+ [
+ {
+ ids: [id],
+ kinds: [1],
+ },
+ ],
+ relays,
+ (event: any) => {
+ // update state
+ setEvent(event);
+ // insert to database
+ createCacheNote(event);
+ },
+ undefined,
+ undefined,
+ {
+ unsubscribeOnEose: true,
+ }
+ );
+ }, [id, pool, relays]);
+
+ useEffect(() => {
+ getNoteByID(id).then((res) => {
+ if (res) {
+ setEvent(res);
+ } else {
+ fetchEvent();
+ }
+ });
+ }, [fetchEvent, id]);
+
+ const content = useMemo(() => {
+ let parsedContent = event ? event.content : null;
+
+ if (parsedContent !== null) {
+ // get data tags
+ const tags = destr(event.tags);
+ // handle urls
+ parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
+ if (match.toLowerCase().match(/\.(jpg|jpeg|gif|png|webp)$/)) {
+ // image url
+ return
;
+ } else if (ReactPlayer.canPlay(match)) {
+ return
;
+ } else {
+ return (
+
+ {match}
+
+ );
+ }
+ });
+ // handle #-hashtags
+ parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
+
+ #{match}
+
+ ));
+ // handle mentions
+ if (tags.length > 0) {
+ parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
+ if (tags[match][0] === 'p') {
+ // @-mentions
+ return
;
+ } else if (tags[match][0] === 'e') {
+ // note-mentions
+ return
note-{tags[match][1]}
;
+ } else {
+ return;
+ }
+ });
+ }
+ }
+
+ return parsedContent;
+ }, [event]);
+
+ if (event) {
+ return (
+
+
+
+
+
+
e.stopPropagation()} className="mt-5 pl-[52px]">
+
+
+
+
+ );
+ } else {
+ return (
+
+ );
+ }
+});
diff --git a/src/components/note/preview/image.tsx b/src/components/note/preview/image.tsx
index 9d762ad9..3761c296 100644
--- a/src/components/note/preview/image.tsx
+++ b/src/components/note/preview/image.tsx
@@ -1,23 +1,20 @@
import Image from 'next/image';
import { memo } from 'react';
-export const ImagePreview = memo(function ImagePreview({ data }: { data: any }) {
+export const ImagePreview = memo(function ImagePreview({ url }: { url: string }) {
return (
-
- {data.map((image: string, index: number) => (
-
= 1 ? 'mt-2' : ''}`}>
-
-
- ))}
+
+
);
});
diff --git a/src/components/note/preview/video.tsx b/src/components/note/preview/video.tsx
index 6bf912f7..6f5b9878 100644
--- a/src/components/note/preview/video.tsx
+++ b/src/components/note/preview/video.tsx
@@ -1,11 +1,11 @@
import { memo } from 'react';
import ReactPlayer from 'react-player/lazy';
-export const VideoPreview = memo(function VideoPreview({ data }: { data: string }) {
+export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
return (
-
e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
+
e.stopPropagation()} className="relative mt-3 flex flex-col overflow-hidden rounded-lg">
{
+ pool.subscribe(
+ [
+ {
+ ids: [id],
+ kinds: [1],
+ },
+ ],
+ relays,
+ (event: any) => {
+ // update state
+ setEvent(event);
+ // insert to database
+ createCacheNote(event);
+ },
+ undefined,
+ undefined,
+ {
+ unsubscribeOnEose: true,
+ }
+ );
+ }, [id, pool, relays]);
+
+ useEffect(() => {
+ getNoteByID(id).then((res) => {
+ if (res) {
+ setEvent(res);
+ } else {
+ fetchEvent();
+ }
+ });
+ }, [fetchEvent, id]);
+
+ const content = useMemo(() => {
+ let parsedContent = event ? event.content : null;
+
+ if (parsedContent !== null) {
+ // get data tags
+ const tags = destr(event.tags);
+ // handle urls
+ parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => (
+
+ {match}
+
+ ));
+ // handle #-hashtags
+ parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
+
+ #{match}
+
+ ));
+ // handle mentions
+ if (tags.length > 0) {
+ parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
+ if (tags[match][0] === 'p') {
+ // @-mentions
+ return ;
+ } else {
+ return;
+ }
+ });
+ }
+ }
+
+ return parsedContent;
+ }, [event]);
+
+ if (event) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+});
diff --git a/src/components/note/root.tsx b/src/components/note/root.tsx
deleted file mode 100644
index 0a0cd0f9..00000000
--- a/src/components/note/root.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { RelayContext } from '@components/relaysProvider';
-
-import { relaysAtom } from '@stores/relays';
-
-import { createCacheNote, getNoteByID } from '@utils/storage';
-
-import { useAtomValue } from 'jotai';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
-
-export const RootNote = memo(function RootNote({ id }: { id: string }) {
- const pool: any = useContext(RelayContext);
-
- const relays = useAtomValue(relaysAtom);
- const [event, setEvent] = useState(null);
-
- const fetchEvent = useCallback(() => {
- pool.subscribe(
- [
- {
- ids: [id],
- kinds: [1],
- },
- ],
- relays,
- (event: any) => {
- // update state
- setEvent(event);
- // insert to database
- createCacheNote(event);
- },
- undefined,
- undefined,
- {
- unsubscribeOnEose: true,
- }
- );
- }, [id, pool, relays]);
-
- useEffect(() => {
- getNoteByID(id).then((res) => {
- if (res) {
- setEvent(res);
- } else {
- fetchEvent();
- }
- });
- }, [fetchEvent, id]);
-
- if (event) {
- return (
-
- );
- } else {
- return (
-
- );
- }
-});
diff --git a/src/pages/newsfeed/[id].tsx b/src/pages/newsfeed/[id].tsx
index 09cc132f..d5229596 100644
--- a/src/pages/newsfeed/[id].tsx
+++ b/src/pages/newsfeed/[id].tsx
@@ -1,8 +1,7 @@
import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
-import { Content } from '@components/note/content';
-import { ContentExtend } from '@components/note/content/extend';
+import { NoteExtend } from '@components/note/extend';
import FormComment from '@components/note/form/comment';
import { RelayContext } from '@components/relaysProvider';
@@ -11,7 +10,6 @@ import { relaysAtom } from '@stores/relays';
import { getNoteByID } from '@utils/storage';
import { useAtomValue } from 'jotai';
-import { GetStaticPaths } from 'next';
import { useRouter } from 'next/router';
import {
JSXElementConstructor,
@@ -65,21 +63,13 @@ export default function Page() {
return (
- {rootEvent && }
+ {rootEvent && }
- {comments.length > 0 &&
- comments.map((comment) => (
-
-
-
- ))}
+ {comments.length > 0 && comments.map((comment) =>
{comment.content}
)}
);
diff --git a/src/pages/newsfeed/following.tsx b/src/pages/newsfeed/following.tsx
index cacc1d0d..463ea0dc 100644
--- a/src/pages/newsfeed/following.tsx
+++ b/src/pages/newsfeed/following.tsx
@@ -1,7 +1,7 @@
import BaseLayout from '@layouts/base';
import WithSidebarLayout from '@layouts/withSidebar';
-import { Note } from '@components/note';
+import { NoteBase } from '@components/note/base';
import FormBasic from '@components/note/form/basic';
import { hasNewerNoteAtom, notesAtom } from '@stores/note';
@@ -52,7 +52,7 @@ export default function Page() {
{items.map((virtualRow) => (
-
+
))}