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

WIP

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-25 20:36:19 +07:00
parent fe25dbaed0
commit 6af0b453e3
25 changed files with 183 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,9 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
const queryClient = useQueryClient();
const block = useMutation({
mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
mutationFn: (data: any) => {
return createBlock(data.kind, data.title, data.content);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["blocks"] });
},

4
src/shared/notes/metadata/reply.tsx
View File

@@ -10,7 +10,9 @@ export function NoteReply({
const queryClient = useQueryClient();
const block = useMutation({
mutationFn: (data: any) => createBlock(data.kind, data.title, data.content),
mutationFn: (data: any) => {
return createBlock(data.kind, data.title, data.content);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["blocks"] });
},

2
src/shared/notes/note.tsx
View File

@@ -71,7 +71,7 @@ export function Note({ event, block }: Note) {
time={event.created_at}
repost={isRepost}
/>
<div className="-mt-5 pl-[49px]">
<div className="z-10 relative -mt-6 pl-[49px]">
{renderContent}
{!isRepost && (
<NoteMetadata

11
src/shared/notes/parent.tsx
View File

@@ -11,9 +11,6 @@ export function NoteParent({
}: { id: string; currentBlock: number }) {
const { status, data, isFetching } = useEvent(id);
const kind1 = data?.kind === 1 ? data.content : null;
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<div className="relative overflow-hidden flex flex-col pb-6">
<div className="absolute left-[18px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
@@ -22,10 +19,10 @@ export function NoteParent({
) : (
<>
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-5 pl-[49px]">
{kind1 && <Kind1 content={kind1} />}
{kind1063 && <Kind1063 metadata={kind1063} />}
{!kind1 && !kind1063 && (
<div className="z-10 relative -mt-6 pl-[49px]">
{data.kind === 1 && <Kind1 content={data.content} />}
{data.kind === 1063 && <Kind1063 metadata={data.tags} />}
{data.kind !== 1 && data.kind !== 1063 && (
<div className="flex flex-col gap-2">
<div className="px-2 py-2 inline-flex flex-col gap-1 bg-zinc-800 rounded-md">
<span className="text-zinc-500 text-sm font-medium leading-none">

48
src/shared/notes/preview/link.tsx
View File

@@ -3,11 +3,11 @@ import { useOpenGraph } from "@utils/hooks/useOpenGraph";
export function LinkPreview({ urls }: { urls: string[] }) {
const domain = new URL(urls[0]);
const { status, data, isFetching } = useOpenGraph(urls[0]);
const { status, data, error } = useOpenGraph(urls[0]);
return (
<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
{isFetching || status === "loading" ? (
{status === "loading" ? (
<div className="flex flex-col">
<div className="w-full h-44 bg-zinc-700 animate-pulse" />
<div className="flex flex-col gap-2 px-3 py-3">
@@ -25,25 +25,35 @@ export function LinkPreview({ urls }: { urls: string[] }) {
target="_blank"
rel="noreferrer"
>
<Image
src={data.images[0]}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg"
/>
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="leading-none font-medium text-zinc-200 line-clamp-1">
{data.title}
</h5>
{data.description && (
{error ? (
<div className="px-3 py-3">
<p className="text-sm text-zinc-400 break-all line-clamp-3">
{data.description}
Can't fetch open graph, click to open webpage
</p>
)}
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}
</span>
</div>
</div>
) : (
<>
<Image
src={data.images[0]}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg"
/>
<div className="flex flex-col gap-2 px-3 py-3">
<h5 className="leading-none font-medium text-zinc-200 line-clamp-1">
{data.title}
</h5>
{data.description && (
<p className="text-sm text-zinc-400 break-all line-clamp-3">
{data.description}
</p>
)}
<span className="mt-2.5 leading-none text-sm text-zinc-500">
{domain.hostname}
</span>
</div>
</>
)}
</a>
)}
</div>

11
src/shared/notes/repost.tsx
View File

@@ -14,9 +14,6 @@ export function Repost({
const repostID = getRepostID(event.tags);
const { status, data, isFetching } = useEvent(repostID);
const kind1 = data?.kind === 1 ? data.content : null;
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<div className="relative overflow-hidden flex flex-col mt-12">
{isFetching || status === "loading" ? (
@@ -24,10 +21,10 @@ export function Repost({
) : (
<>
<User pubkey={data.pubkey} time={data.created_at} />
<div className="-mt-5 pl-[49px]">
{kind1 && <Kind1 content={kind1} />}
{kind1063 && <Kind1063 metadata={kind1063} />}
{!kind1 && !kind1063 && (
<div className="z-10 relative -mt-6 pl-[49px]">
{data.kind === 1 && <Kind1 content={data.content} />}
{data.kind === 1063 && <Kind1063 metadata={data.tags} />}
{data.kind !== 1 && data.kind !== 1063 && (
<div className="flex flex-col gap-2">
<div className="px-2 py-2 inline-flex flex-col gap-1 bg-zinc-800 rounded-md">
<span className="text-zinc-500 text-sm font-medium leading-none">