mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
added note modal (wip)
This commit is contained in:
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;
|
const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
|
||||||
|
|
||||||
export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) {
|
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({
|
const { onEvent } = useNostrEvents({
|
||||||
filter: {
|
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 { User } from '@components/note/atoms/user';
|
||||||
import Content from '@components/note/content';
|
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';
|
import { memo } from 'react';
|
||||||
|
|
||||||
|
const Modal = dynamic(() => import('@components/note/modal'), {
|
||||||
|
ssr: false,
|
||||||
|
loading: () => <></>,
|
||||||
|
});
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
export const Single = memo(function Single({ event }: { event: any }) {
|
export const Single = memo(function Single({ event }: { event: any }) {
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const openThread = (id: string) => {
|
|
||||||
router.push(`/feed/${id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<Dialog.Root>
|
||||||
onClick={() => openThread(event.id)}
|
<Dialog.Trigger asChild>
|
||||||
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 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">
|
<div className="flex flex-col">
|
||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<User pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-6">
|
||||||
<Content data={event.content} />
|
<Content data={event.content} />
|
||||||
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={event.id} />
|
<Reply eventID={event.id} />
|
||||||
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Dialog.Trigger>
|
||||||
</div>
|
<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