reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: refactor

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-18 07:37:11 +07:00
parent 414dd50a5c
commit 5626579b3f
17 changed files with 156 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app.tsx
View File

@@ -245,7 +245,6 @@ export default function App() {
<LoaderIcon className="h-6 w-6 animate-spin text-white" />
</div>
}
future={{ v7_startTransition: true }}
/>
);
}

47
src/app/auth/unlock.tsx
View File

@@ -46,32 +46,33 @@ export function UnlockScreen() {
} = useForm<FormValues>({ resolver });
const onSubmit = async (data: { [x: string]: string }) => {
setLoading(true);
if (data.password.length > 3) {
try {
const dir = await appConfigDir();
const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
if (!db.secureDB) db.secureDB = stronghold;
const privkey = await db.secureLoad(db.account.pubkey);
setPrivkey(privkey);
// redirect to home
navigate('/', { replace: true });
} catch (e) {
setLoading(false);
setError('password', {
type: 'custom',
message: e,
});
}
} else {
setLoading(false);
if (data.password.length < 3) {
setError('password', {
type: 'custom',
message: 'Password is required and must be greater than 3',
});
return;
}
try {
setLoading(true);
const dir = await appConfigDir();
const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
if (!db.secureDB) db.secureDB = stronghold;
const privkey = await db.secureLoad(db.account.pubkey);
setPrivkey(privkey);
// redirect to home
navigate('/', { replace: true });
} catch (e) {
setLoading(false);
setError('password', {
type: 'custom',
message: e,
});
}
};
@@ -89,7 +90,7 @@ export function UnlockScreen() {
<div className="relative">
<input
{...register('password', { required: true })}
type={showPassword ? 'text' : 'password'}
type={'password'}
placeholder="Password"
className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
/>

6
src/app/events/index.tsx
View File

@@ -31,12 +31,12 @@ export function EventScreen() {
) : (
<div className="h-min w-full px-3 pt-1.5">
<div className="rounded-xl bg-white/10 px-3 pt-3">
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
<ThreadUser pubkey={data.event.pubkey} time={data.event.created_at} />
<div className="mt-2">
<NoteContent content={data.content} />
<NoteContent content={data.richContent} />
</div>
<div>
<NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
<NoteActions id={id} pubkey={data.event.pubkey} noOpenThread={true} />
<NoteStats id={id} />
</div>
</div>

6
src/app/space/components/widgets/thread.tsx
View File

@@ -31,14 +31,14 @@ export function ThreadBlock({ params }: { params: Widget }) {
) : (
<div className="h-min w-full px-3 pt-1.5">
<div className="rounded-xl bg-white/10 px-3 pt-3">
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
<ThreadUser pubkey={data.event.pubkey} time={data.event.created_at} />
<div className="mt-2">
<NoteContent content={data.content} />
<NoteContent content={data.richContent} />
</div>
<div>
<NoteActions
id={params.content}
pubkey={data.pubkey}
pubkey={data.event.pubkey}
noOpenThread={true}
/>
<NoteStats id={params.content} />

4
src/shared/notes/content.tsx
View File

@@ -10,9 +10,9 @@ import {
VideoPreview,
} from '@shared/notes';
import { Content } from '@utils/types';
import { RichContent } from '@utils/types';
export function NoteContent({ content, long }: { content: Content; long?: boolean }) {
export function NoteContent({ content, long }: { content: RichContent; long?: boolean }) {
if (long) {
return (
<ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>

6
src/shared/notes/kinds/kind1063.tsx
View File

@@ -4,12 +4,10 @@ import { Image } from '@shared/image';
import { NoteActions, NoteMetadata } from '@shared/notes';
import { User } from '@shared/user';
function isImage(url: string) {
return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
}
import { isImage } from '@utils/isImage';
export function NoteKind_1063({ event }: { event: NDKEvent }) {
const url = event.tags[0][1];
const url = event.tags.find((el) => el[0] === 'url')[1];
return (
<div className="h-min w-full px-3 py-1.5">

10
src/shared/notes/kinds/repost.tsx
View File

@@ -46,13 +46,17 @@ export function Repost({ event }: { event: NDKEvent }) {
<div className="relative flex flex-col">
<div className="isolate flex flex-col -space-y-4">
<RepostUser pubkey={event.pubkey} />
<User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
<User
pubkey={data.event.pubkey}
time={data.event.created_at}
isRepost={true}
/>
</div>
<div className="flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
<NoteContent content={data.content} />
<NoteActions id={repostID} pubkey={data.pubkey} />
<NoteContent content={data.richContent} />
<NoteActions id={repostID} pubkey={data.event.pubkey} />
</div>
</div>
<NoteMetadata id={repostID} />

6
src/shared/notes/kinds/sub.tsx
View File

@@ -26,12 +26,12 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
<>
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
<div className="mb-5 flex flex-col">
<User pubkey={data.pubkey} time={data.created_at} />
<User pubkey={data.event.pubkey} time={data.event.created_at} />
<div className="-mt-6 flex items-start gap-3">
<div className="w-11 shrink-0" />
<div className="relative z-20 flex-1">
<NoteContent content={data.content} long={data.kind === 30023} />
<NoteActions id={data.id} pubkey={data.pubkey} root={root} />
<NoteContent content={data.richContent} long={data.event.kind === 30023} />
<NoteActions id={data.event.id} pubkey={data.event.pubkey} root={root} />
</div>
</div>
</div>

93
src/shared/notes/mentions/note.tsx
View File

@@ -1,9 +1,10 @@
import { memo } from 'react';
import { memo, useCallback } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { useStorage } from '@libs/storage/provider';
import { Image } from '@shared/image';
import { MentionUser, NoteSkeleton } from '@shared/notes';
import { User } from '@shared/user';
@@ -11,6 +12,7 @@ import { widgetKinds } from '@stores/constants';
import { useWidgets } from '@stores/widgets';
import { useEvent } from '@utils/hooks/useEvent';
import { isImage } from '@utils/isImage';
export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const { db } = useStorage();
@@ -27,10 +29,59 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
}
};
if (!id) {
const renderItem = useCallback(() => {
switch (data.event.kind) {
case 1: {
return (
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const key = children[0] as string;
if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
if (key.startsWith('tag'))
return (
<button
type="button"
className="font-normal text-orange-400 no-underline hover:text-orange-500"
>
{key.slice(3)}
</button>
);
},
}}
>
{data.richContent.parsed.length > 160
? data.richContent.parsed.substring(0, 160) + '...'
: data.richContent.parsed}
</ReactMarkdown>
);
}
case 1063: {
const url = data.event.tags.find((el) => el[0] === 'url')[1];
return (
<div>
{isImage(url) && (
<Image
src={url}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt="image"
className="h-auto w-full rounded-lg object-cover"
/>
)}
</div>
);
}
default:
break;
}
}, [data]);
if (status === 'loading') {
return (
<div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
<p className="break-all">Failed to get event with id: {id}</p>
<NoteSkeleton />
</div>
);
}
@@ -43,40 +94,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
tabIndex={0}
className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
>
{status === 'loading' ? (
<NoteSkeleton />
) : status === 'success' ? (
<>
<User pubkey={data.pubkey} time={data.created_at} size="small" />
<div className="mt-2">
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
components={{
del: ({ children }) => {
const key = children[0] as string;
if (key.startsWith('pub')) return <MentionUser pubkey={key.slice(3)} />;
if (key.startsWith('tag'))
return (
<button
type="button"
className="font-normal text-orange-400 no-underline hover:text-orange-500"
>
{key.slice(3)}
</button>
);
},
}}
>
{data?.content.length > 160
? data.content.substring(0, 160) + '...'
: data.content}
</ReactMarkdown>
</div>
</>
) : (
<p className="break-all">Failed to get event with id: {id}</p>
)}
<User pubkey={data.event.pubkey} time={data.event.created_at} size="small" />
<div className="mt-2">{renderItem()}</div>
</div>
);
});

13
src/utils/hooks/useEvent.tsx
View File

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
import { useNDK } from '@libs/ndk/provider';
import { parser } from '@utils/parser';
import { RichContent } from '@utils/types';
export function useEvent(id: string, embed?: string) {
const { ndk } = useNDK();
@@ -12,18 +13,18 @@ export function useEvent(id: string, embed?: string) {
async () => {
if (embed) {
const event: NDKEvent = JSON.parse(embed);
// @ts-expect-error, #TODO: convert NDKEvent to ExNDKEvent
if (event.kind === 1) event.content = parser(event);
let richContent: RichContent;
if (event.kind === 1) richContent = parser(event);
return event as unknown as NDKEvent;
return { event: event as NDKEvent, richContent: richContent };
}
const event = (await ndk.fetchEvent(id)) as NDKEvent;
if (!event) throw new Error('event not found');
// @ts-expect-error, #TODO: convert NDKEvent to ExNDKEvent
if (event.kind === 1) event.content = parser(event);
let richContent: RichContent;
if (event.kind === 1) richContent = parser(event);
return event as NDKEvent;
return { event: event as NDKEvent, richContent: richContent };
},
{
staleTime: Infinity,

3
src/utils/isImage.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function isImage(url: string) {
return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
}

21
src/utils/parser.tsx
View File

@@ -1,7 +1,6 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import getUrls from 'get-urls';
import { Event, parseReferences } from 'nostr-tools';
import ReactPlayer from 'react-player';
import { RichContent } from '@utils/types';
@@ -26,19 +25,23 @@ export function parser(event: NDKEvent) {
content.images.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
} else if (ReactPlayer.canPlay(url)) {
}
if (url.match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
// video
content.videos.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
} else {
if (content.links.length < 1) {
// push to store
content.links.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
}
}
/*
if (content.links.length < 1) {
// push to store
content.links.push(url);
// remove url from original content
content.parsed = content.parsed.replace(url, '');
}
*/
});
// parse hashtag