mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-14 09:13:31 +00:00
added note modal (wip)
This commit is contained in:
Ren Amamiya
parent
ca5e299791
commit
1796228116
@ -14,7 +14,7 @@ import Database from 'tauri-plugin-sql-api';
|
||||
const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
|
||||
|
||||
export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) {
|
||||
const [profile, setProfile] = useState({ picture: null, name: null });
|
||||
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
|
||||
|
||||
const { onEvent } = useNostrEvents({
|
||||
filter: {
|
||||
|
||||
97
src/components/note/atoms/userWithUsername.tsx
Normal file
97
src/components/note/atoms/userWithUsername.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { ImageWithFallback } from '@components/imageWithFallback';
|
||||
|
||||
import { truncate } from '@utils/truncate';
|
||||
|
||||
import MoreIcon from '@assets/icons/More';
|
||||
|
||||
import Avatar from 'boring-avatars';
|
||||
import { useNostrEvents } from 'nostr-react';
|
||||
import { memo, useEffect, useState } from 'react';
|
||||
import Database from 'tauri-plugin-sql-api';
|
||||
|
||||
const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
|
||||
|
||||
export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pubkey: string }) {
|
||||
const [profile, setProfile] = useState({ picture: null, name: null, username: null });
|
||||
|
||||
const { onEvent } = useNostrEvents({
|
||||
filter: {
|
||||
authors: [pubkey],
|
||||
kinds: [0],
|
||||
},
|
||||
});
|
||||
|
||||
onEvent(async (rawMetadata) => {
|
||||
try {
|
||||
const metadata: any = JSON.parse(rawMetadata.content);
|
||||
if (profile.picture === null || profile.name === null) {
|
||||
setProfile(metadata);
|
||||
await db.execute(
|
||||
`INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(
|
||||
metadata
|
||||
)}')`
|
||||
);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err, rawMetadata);
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const initialProfile = async () => {
|
||||
const result: any = await db.select(
|
||||
`SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"`
|
||||
);
|
||||
db.close;
|
||||
return result;
|
||||
};
|
||||
|
||||
initialProfile()
|
||||
.then((res) => {
|
||||
if (res[0] !== undefined) {
|
||||
setProfile(JSON.parse(res[0].metadata));
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
}, [pubkey]);
|
||||
|
||||
return (
|
||||
<div className="relative flex items-start gap-2">
|
||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
|
||||
{profile.picture ? (
|
||||
<ImageWithFallback
|
||||
src={profile.picture}
|
||||
alt={pubkey}
|
||||
fill={true}
|
||||
className="rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Avatar
|
||||
size={44}
|
||||
name={pubkey}
|
||||
variant="beam"
|
||||
colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex w-full flex-1 items-start justify-between">
|
||||
<div className="flex w-full justify-between">
|
||||
<div className="flex flex-col gap-1 text-sm">
|
||||
<span className="font-bold leading-tight">
|
||||
{profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
|
||||
</span>
|
||||
<span className="text-zinc-500">
|
||||
{profile.username ? profile.username : truncate(pubkey, 16, ' .... ')}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<MoreIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
41
src/components/note/modal/index.tsx
Normal file
41
src/components/note/modal/index.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { UserWithUsername } from '@components/note/atoms/userWithUsername';
|
||||
import Content from '@components/note/content';
|
||||
import NoteReply from '@components/note/modal/noteReply';
|
||||
|
||||
import { useNostrEvents } from 'nostr-react';
|
||||
import { memo } from 'react';
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
const Modal = ({ event }: { event: any }) => {
|
||||
const { events } = useNostrEvents({
|
||||
filter: {
|
||||
'#e': [event.id],
|
||||
since: event.created_at,
|
||||
kinds: [1],
|
||||
limit: 100,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex min-h-full items-center justify-center p-4">
|
||||
<div className="relative h-[90vh] w-full max-w-3xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
|
||||
<div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-20 backdrop-blur-lg"></div>
|
||||
<div className="relative z-10 h-full p-4">
|
||||
<div className="relative h-full overflow-auto rounded-lg border-[0.5px] border-white/30 bg-zinc-800 p-4 shadow-inner">
|
||||
<div className="flex flex-col gap-4">
|
||||
<UserWithUsername pubkey={event.pubkey} />
|
||||
<Content data={event.content} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 divide-y divide-zinc-700">
|
||||
{events.map((item) => (
|
||||
<NoteReply key={item.id} event={item} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(Modal);
|
||||
18
src/components/note/modal/noteReply.tsx
Normal file
18
src/components/note/modal/noteReply.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { User } from '@components/note/atoms/user';
|
||||
import Content from '@components/note/content';
|
||||
|
||||
export default function NoteReply({ event }: { event: any }) {
|
||||
return (
|
||||
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-4 hover:bg-zinc-800">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="-mt-5 pl-[60px]">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Content data={event.content} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -4,33 +4,41 @@ import Reply from '@components/note/atoms/reply';
|
||||
import { User } from '@components/note/atoms/user';
|
||||
import Content from '@components/note/content';
|
||||
|
||||
import { useRouter } from 'next/router';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { memo } from 'react';
|
||||
|
||||
const Modal = dynamic(() => import('@components/note/modal'), {
|
||||
ssr: false,
|
||||
loading: () => <></>,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const Single = memo(function Single({ event }: { event: any }) {
|
||||
const router = useRouter();
|
||||
|
||||
const openThread = (id: string) => {
|
||||
router.push(`/feed/${id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => openThread(event.id)}
|
||||
className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="-mt-4 pl-[60px]">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Content data={event.content} />
|
||||
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
||||
<Reply eventID={event.id} />
|
||||
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
||||
<Dialog.Root>
|
||||
<Dialog.Trigger asChild>
|
||||
<div className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
|
||||
<div className="flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<div className="-mt-4 pl-[60px]">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Content data={event.content} />
|
||||
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
||||
<Reply eventID={event.id} />
|
||||
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
|
||||
<Dialog.Content className="fixed inset-0 overflow-y-auto">
|
||||
<Modal event={event} />
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user