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

refactor note component

Browse Source
This commit is contained in:
Ren Amamiya 2023-05-02 16:09:32 +07:00
parent b66525d148
commit dfd1333db8
22 changed files with 92 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/app/newsfeed/components/contentParser.tsx
View File

@ -1,56 +0,0 @@
import { NoteQuote } from '@lume/app/newsfeed/components/note/quote';
import { NoteMentionUser } from '@lume/app/newsfeed/components/user/mention';
import ImagePreview from '@lume/shared/preview/image';
import VideoPreview from '@lume/shared/preview/video';
import YoutubePreview from '@lume/shared/preview/youtube';
import destr from 'destr';
import reactStringReplace from 'react-string-replace';
export const contentParser = (noteContent: any, noteTags: any) => {
let parsedContent = noteContent.trim();
// get data tags
const tags = destr(noteTags);
// handle urls
parsedContent = reactStringReplace(parsedContent, /(https?:\/\/\S+)/g, (match, i) => {
if (match.match(/\.(jpg|jpeg|gif|png|webp)$/i)) {
// image url
return <ImagePreview key={match + i} url={match} size="large" />;
} else if (match.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
// youtube
return <YoutubePreview key={match + i} url={match} size="large" />;
} else if (match.match(/\.(mp4|webm)$/i)) {
// video
return <VideoPreview key={match + i} url={match} size="large" />;
} else {
return (
<a key={match + i} href={match} className="cursor-pointer text-fuchsia-500" target="_blank" rel="noreferrer">
{match}
</a>
);
}
});
// handle #-hashtags
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
<span key={match + i} className="cursor-pointer text-fuchsia-500">
#{match}
</span>
));
// handle mentions
if (tags && tags.length > 0) {
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
if (tags[match][0] === 'p') {
// @-mentions
return <NoteMentionUser key={tags[match][1] + i} pubkey={tags[match][1]} />;
} else if (tags[match][0] === 'e') {
// note-quotes
return <NoteQuote key={tags[match][1] + i} id={tags[match][1]} />;
} else {
return;
}
});
}
return parsedContent;
};

6
src/app/newsfeed/pages/following/index.page.tsx
View File

@ -1,7 +1,7 @@
import NoteForm from '@lume/app/newsfeed/components/form';
import NoteBase from '@lume/app/newsfeed/components/note/base';
import { Placeholder } from '@lume/app/newsfeed/components/note/placeholder';
import { NoteQuoteRepost } from '@lume/app/newsfeed/components/note/quoteRepost';
import NoteBase from '@lume/app/note/components/base';
import { Placeholder } from '@lume/app/note/components/placeholder';
import { NoteQuoteRepost } from '@lume/app/note/components/quoteRepost';
import { hasNewerNoteAtom } from '@lume/stores/note';
import { getNotes } from '@lume/utils/storage';

12
src/app/newsfeed/components/note/base.tsx → src/app/note/components/base.tsx
View File

@ -1,9 +1,9 @@
import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
import { NoteParent } from '@lume/app/newsfeed/components/note/parent';
import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
import NoteMetadata from '@lume/app/note/components/metadata';
import { NoteParent } from '@lume/app/note/components/parent';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { navigate } from 'vite-plugin-ssr/client/router';
@ -24,7 +24,11 @@ export default function NoteBase({ event }: { event: any }) {
onClick={(e) => openNote(e)}
className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20"
>
{event.parent_id ? <NoteParent key={event.parent_id} id={event.parent_id} /> : <></>}
{event.parent_id && event.parent_id !== event.event_id ? (
<NoteParent key={event.parent_id} id={event.parent_id} />
) : (
<></>
)}
<div className="relative z-10 flex flex-col">
<NoteDefaultUser pubkey={event.pubkey} time={event.created_at} />
<div className="mt-1 pl-[52px]">

7
src/app/newsfeed/components/note/comment.tsx → src/app/note/components/comment.tsx
View File

@ -1,11 +1,8 @@
import { contentParser } from '@lume/app/newsfeed/components/contentParser';
import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { memo } from 'react';
export const NoteComment = memo(function NoteComment({ event }: { event: any }) {
const content = contentParser(event.content, event.tags);
return (
<div className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 px-3 py-5 hover:bg-black/20">
<div className="relative z-10 flex flex-col">
@ -13,7 +10,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
{event.content}
</div>
</div>
</div>

0
src/app/note/components/form.tsx → src/app/note/components/formReply.tsx
View File

6
src/app/newsfeed/components/note/metadata.tsx → src/app/note/components/metadata.tsx
View File

@ -1,6 +1,6 @@
import NoteLike from '@lume/app/newsfeed/components/metadata/like';
import NoteReply from '@lume/app/newsfeed/components/metadata/reply';
import NoteRepost from '@lume/app/newsfeed/components/metadata/repost';
import NoteLike from '@lume/app/note/components/metadata/like';
import NoteReply from '@lume/app/note/components/metadata/reply';
import NoteRepost from '@lume/app/note/components/metadata/repost';
import ZapIcon from '@lume/shared/icons/zap';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';

0
src/app/newsfeed/components/metadata/like.tsx → src/app/note/components/metadata/like.tsx
View File

0
src/app/newsfeed/components/metadata/reply.tsx → src/app/note/components/metadata/reply.tsx
View File

0
src/app/newsfeed/components/metadata/repost.tsx → src/app/note/components/metadata/repost.tsx
View File

4
src/app/newsfeed/components/note/parent.tsx → src/app/note/components/parent.tsx
View File

@ -1,8 +1,8 @@
import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
import NoteMetadata from '@lume/app/note/components/metadata';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';

67
src/app/note/components/parser.tsx
View File

@ -1,55 +1,66 @@
import { NoteQuote } from '@lume/app/note/components/quote';
import { NoteMentionUser } from '@lume/app/note/components/user/mention';
import { Event, parseReferences } from 'nostr-tools';
import reactStringReplace from 'react-string-replace';
const getURLs = new RegExp(
'(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))',
'g'
'(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal|wss|ws):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))',
'gmi'
);
export const noteParser = (event: Event) => {
const references = parseReferences(event);
const content = { original: event.content, parsed: event.content, images: [], videos: [], others: [] };
// remove extra whitespace
content.parsed = content.parsed.replace(/\s+/g, ' ').trim();
const content: { original: string; parsed: any; images: string[]; videos: string[] } = {
original: event.content,
parsed: event.content,
images: [],
videos: [],
};
// handle media
content.original.match(getURLs)?.forEach((url) => {
if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/im)) {
content.original.match(getURLs)?.forEach((item) => {
// make sure url is trimmed
const url = item.trim();
if (url.match(/\.(jpg|jpeg|gif|png|webp|avif)$/gim)) {
// image url
content.images.push(url.trim());
content.images.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
} else if (url.match(/(http:|https:)?(\/\/)?(www\.)?(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/)) {
// youtube
content.videos.push(url.trim());
// remove url from original content
content.parsed = content.parsed.replace(url, '');
} else if (url.match(/\.(mp4|webm|mov)$/im)) {
} else if (url.match(/\.(mp4|webm|mov)$/i)) {
// video
content.videos.push(url.trim());
content.videos.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
} else {
content.others.push(url.trim());
}
});
// handle hashtag
content.parsed = reactStringReplace(content.parsed, /#(\w+)/g, (match, i) => (
<span key={match + i} className="cursor-pointer text-fuchsia-500 hover:text-fuchsia-600">
#{match}
</span>
));
// handle note references
references?.forEach((reference) => {
if (reference?.profile) {
content.parsed = content.parsed.replace(
reference.text,
`<NoteMentionUser pubkey="${reference.profile.pubkey}" />`
);
content.parsed = reactStringReplace(content.parsed, reference.text, () => {
return <NoteMentionUser key={reference.profile.pubkey} pubkey={reference.profile.pubkey} />;
});
}
if (reference?.event) {
content.parsed = content.parsed.replace(reference.text, `<NoteQuote id="${reference.event.id}" />;`);
content.parsed = reactStringReplace(content.parsed, reference.text, () => {
return <NoteQuote key={reference.event.id} id={reference.event.id} />;
});
}
if (reference?.address) {
content.parsed = content.parsed.replace(
reference.text,
`<a href="${reference.address}" target="_blank">${reference.address}</>`
);
});
// make sure no unnessary spaces are left
content.parsed.forEach((item: string, index: string) => {
if (typeof item === 'string') {
content.parsed[index] = item.replace(/^\x20+|\x20+$/gm, '');
}
});

0
src/app/newsfeed/components/note/placeholder.tsx → src/app/note/components/placeholder.tsx
View File

2
src/app/newsfeed/components/note/quote.tsx → src/app/note/components/quote.tsx
View File

@ -1,7 +1,7 @@
import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';

4
src/app/newsfeed/components/note/quoteRepost.tsx → src/app/note/components/quoteRepost.tsx
View File

@ -1,5 +1,5 @@
import { RootNote } from '@lume/app/newsfeed/components/note/rootNote';
import { NoteRepostUser } from '@lume/app/newsfeed/components/user/repost';
import { RootNote } from '@lume/app/note/components/rootNote';
import { NoteRepostUser } from '@lume/app/note/components/user/repost';
import { getQuoteID } from '@lume/utils/transform';
import { memo } from 'react';

2
src/app/note/components/replies.tsx
View File

@ -1,4 +1,4 @@
import NoteReplyForm from '@lume/app/note/components/form';
import NoteReplyForm from '@lume/app/note/components/formReply';
import NoteReply from '@lume/app/note/components/reply';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';

13
src/app/note/components/reply.tsx
View File

@ -1,16 +1,19 @@
import { contentParser } from '@lume/app/newsfeed/components/contentParser';
import NoteReplyUser from './user';
import { noteParser } from '@lume/app/note/components//parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import NoteReplyUser from '@lume/app/note/components/user/reply';
export default function NoteReply({ data }: { data: any }) {
const content = contentParser(data.content, data.tags);
const content = noteParser(data);
return (
<div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3.5 hover:bg-black/20">
<div className="flex flex-col">
<NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-[17px] pl-[48px]">
<div className="whitespace-pre-line break-words break-words text-sm leading-tight">{content}</div>
<div className="whitespace-pre-line break-words text-sm leading-tight">{content.parsed}</div>
{Array.isArray(content.images) && content.images.length ? <ImagePreview urls={content.images} /> : <></>}
{Array.isArray(content.videos) && content.videos.length ? <VideoPreview urls={content.videos} /> : <></>}
</div>
</div>
</div>

6
src/app/newsfeed/components/note/rootNote.tsx → src/app/note/components/rootNote.tsx
View File

@ -1,8 +1,8 @@
import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
import NoteMetadata from '@lume/app/note/components/metadata';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
@ -46,7 +46,7 @@ export const RootNote = memo(function RootNote({ id, fallback }: { id: string; f
}
};
const content = !error && data ? noteParser(parseFallback) : null;
const content = !error && data ? noteParser(data) : null;
if (parseFallback) {
const contentFallback = noteParser(parseFallback);

2
src/app/newsfeed/components/user/default.tsx → src/app/note/components/user/default.tsx
View File

@ -14,7 +14,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
<div className="group relative z-10 flex h-11 items-center gap-2">
{isError || isLoading ? (
<>
<div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white bg-zinc-800"></div>
<div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white"></div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex flex-col gap-1">
<div className="flex items-baseline gap-2">

0
src/app/newsfeed/components/user/mention.tsx → src/app/note/components/user/mention.tsx
View File

0
src/app/note/components/user.tsx → src/app/note/components/user/reply.tsx
View File

2
src/app/newsfeed/components/user/repost.tsx → src/app/note/components/user/repost.tsx
View File

@ -14,7 +14,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
<div className="group flex items-center gap-2">
{isError || isLoading ? (
<>
<div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white bg-zinc-800"></div>
<div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white"></div>
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex flex-col gap-1">
<div className="flex items-baseline gap-2">

22
src/app/note/pages/index.page.tsx
View File

@ -1,7 +1,9 @@
import { contentParser } from '@lume/app/newsfeed/components/contentParser';
import NoteMetadata from '@lume/app/newsfeed/components/note/metadata';
import { NoteDefaultUser } from '@lume/app/newsfeed/components/user/default';
import NoteMetadata from '@lume/app/note/components/metadata';
import { noteParser } from '@lume/app/note/components/parser';
import ImagePreview from '@lume/app/note/components/preview/image';
import VideoPreview from '@lume/app/note/components/preview/video';
import NoteReplies from '@lume/app/note/components/replies';
import { NoteDefaultUser } from '@lume/app/note/components/user/default';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { usePageContext } from '@lume/utils/hooks/usePageContext';
@ -35,6 +37,8 @@ export function Page() {
};
});
const content = !error && data ? noteParser(data) : null;
return (
<div className="scrollbar-hide h-full w-full overflow-y-auto">
<div className="p-3">
@ -69,8 +73,18 @@ export function Page() {
<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
<div className="mt-3">
<div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">
{contentParser(data.content, data.tags)}
{content ? content.parsed : ''}
</div>
{Array.isArray(content.images) && content.images.length ? (
<ImagePreview urls={content.images} />
) : (
<></>
)}
{Array.isArray(content.videos) && content.videos.length ? (
<VideoPreview urls={content.videos} />
) : (
<></>
)}
</div>
</div>
<div onClick={(e) => e.stopPropagation()} className="mt-5 border-t border-zinc-800 px-5 py-5">