mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
added root note component
This commit is contained in:
parent
f71eabc5c4
commit
aa0f874eed
@ -4,7 +4,6 @@ import { createContext, useMemo } from 'react';
|
|||||||
export const RelayContext = createContext({});
|
export const RelayContext = createContext({});
|
||||||
|
|
||||||
export default function RelayProvider({ relays, children }: { relays: any; children: React.ReactNode }) {
|
export default function RelayProvider({ relays, children }: { relays: any; children: React.ReactNode }) {
|
||||||
const value = useMemo(() => new RelayPool(relays, { useEventCache: true }), [relays]);
|
const value = useMemo(() => new RelayPool(relays, { useEventCache: true, logSubscriptions: false }), [relays]);
|
||||||
|
|
||||||
return <RelayContext.Provider value={value}>{children}</RelayContext.Provider>;
|
return <RelayContext.Provider value={value}>{children}</RelayContext.Provider>;
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,6 @@ import { atomHasNewerNote } from '@stores/note';
|
|||||||
|
|
||||||
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
||||||
|
|
||||||
import { SliderIcon } from '@radix-ui/react-icons';
|
|
||||||
import { useLocalStorage } from '@rehooks/local-storage';
|
import { useLocalStorage } from '@rehooks/local-storage';
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import { memo, useCallback, useContext, useEffect, useRef } from 'react';
|
import { memo, useCallback, useContext, useEffect, useRef } from 'react';
|
||||||
@ -26,14 +25,14 @@ export const NoteConnector = memo(function NoteConnector() {
|
|||||||
await db.execute(
|
await db.execute(
|
||||||
`INSERT OR IGNORE INTO
|
`INSERT OR IGNORE INTO
|
||||||
cache_notes
|
cache_notes
|
||||||
(id, pubkey, created_at, kind, tags, content) VALUES
|
(id, pubkey, created_at, kind, content, tags) VALUES
|
||||||
(
|
(
|
||||||
"${event.id}",
|
"${event.id}",
|
||||||
"${event.pubkey}",
|
"${event.pubkey}",
|
||||||
"${event.created_at}",
|
"${event.created_at}",
|
||||||
"${event.kind}",
|
"${event.kind}",
|
||||||
'${JSON.stringify(event.tags)}',
|
"${event.content}",
|
||||||
'${JSON.stringify(event.content)}'
|
'${JSON.stringify(event.tags)}'
|
||||||
);`
|
);`
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -15,7 +15,7 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
|
|||||||
export const Content = memo(function Content({ data }: { data: any }) {
|
export const Content = memo(function Content({ data }: { data: any }) {
|
||||||
const [preview, setPreview] = useState({});
|
const [preview, setPreview] = useState({});
|
||||||
|
|
||||||
const content = useRef(JSON.parse(data.content));
|
const content = useRef(data.content);
|
||||||
const urls = useMemo(
|
const urls = useMemo(
|
||||||
() =>
|
() =>
|
||||||
content.current.match(
|
content.current.match(
|
||||||
@ -61,7 +61,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
|
|||||||
}, [preview]);
|
}, [preview]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
<UserExtend pubkey={data.pubkey} time={data.created_at} />
|
<UserExtend pubkey={data.pubkey} time={data.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">
|
||||||
@ -70,7 +70,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
|
|||||||
<MarkdownPreview
|
<MarkdownPreview
|
||||||
source={content.current}
|
source={content.current}
|
||||||
className={
|
className={
|
||||||
'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-normal prose-ul:mt-2 prose-li:my-1'
|
'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-normal prose-a:font-medium prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
|
||||||
}
|
}
|
||||||
linkTarget="_blank"
|
linkTarget="_blank"
|
||||||
disallowedElements={[
|
disallowedElements={[
|
||||||
|
28
src/components/note/index.tsx
Normal file
28
src/components/note/index.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Content } from '@components/note/content';
|
||||||
|
import { RootNote } from '@components/note/root';
|
||||||
|
|
||||||
|
import { memo, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export const Note = memo(function Note({ event }: { event: any }) {
|
||||||
|
const [root, setRoot] = useState(null);
|
||||||
|
const tags = JSON.parse(event.tags);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (tags.length > 0) {
|
||||||
|
if (tags[0][0] === 'e') {
|
||||||
|
setRoot(tags[0][1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [tags]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative z-10 flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-5 px-3">
|
||||||
|
{root && (
|
||||||
|
<>
|
||||||
|
<RootNote id={root} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Content data={event} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
@ -2,7 +2,7 @@ import { memo } from 'react';
|
|||||||
|
|
||||||
export const Placeholder = memo(function Placeholder() {
|
export const Placeholder = memo(function Placeholder() {
|
||||||
return (
|
return (
|
||||||
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-3">
|
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
|
42
src/components/note/root.tsx
Normal file
42
src/components/note/root.tsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import { RelayContext } from '@components/contexts/relay';
|
||||||
|
import { Content } from '@components/note/content';
|
||||||
|
|
||||||
|
import useLocalStorage from '@rehooks/local-storage';
|
||||||
|
import { memo, useCallback, useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export const RootNote = memo(function RootNote({ id }: { id: string }) {
|
||||||
|
const relayPool: any = useContext(RelayContext);
|
||||||
|
|
||||||
|
const [relays]: any = useLocalStorage('relays');
|
||||||
|
const [event, setEvent] = useState(null);
|
||||||
|
|
||||||
|
const fetchEvent = useCallback(() => {
|
||||||
|
relayPool.subscribe(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
ids: [id],
|
||||||
|
kinds: [1],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
relays,
|
||||||
|
(event: any) => {
|
||||||
|
setEvent(event);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}, [id, relayPool, relays]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchEvent();
|
||||||
|
}, [fetchEvent]);
|
||||||
|
|
||||||
|
if (event) {
|
||||||
|
return (
|
||||||
|
<div className="relative pb-5">
|
||||||
|
<div className="absolute top-0 left-[21px] h-full w-px bg-zinc-800"></div>
|
||||||
|
<Content data={event} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return <>Loading...</>;
|
||||||
|
}
|
||||||
|
});
|
@ -1,11 +0,0 @@
|
|||||||
import { Content } from '@components/note/content';
|
|
||||||
|
|
||||||
import { memo } from 'react';
|
|
||||||
|
|
||||||
export const Single = memo(function Single({ event }: { event: any }) {
|
|
||||||
return (
|
|
||||||
<div className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-3">
|
|
||||||
<Content data={event} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
@ -2,16 +2,16 @@ import BaseLayout from '@layouts/base';
|
|||||||
import WithSidebarLayout from '@layouts/withSidebar';
|
import WithSidebarLayout from '@layouts/withSidebar';
|
||||||
|
|
||||||
import { DatabaseContext } from '@components/contexts/database';
|
import { DatabaseContext } from '@components/contexts/database';
|
||||||
|
import { Note } from '@components/note';
|
||||||
import NoteForm from '@components/note/form';
|
import NoteForm from '@components/note/form';
|
||||||
import { Placeholder } from '@components/note/placeholder';
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
import { Single } from '@components/note/single';
|
|
||||||
|
|
||||||
import { atomHasNewerNote } from '@stores/note';
|
import { atomHasNewerNote } from '@stores/note';
|
||||||
|
|
||||||
import { dateToUnix } from '@utils/getDate';
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
|
||||||
import { useAtom } from 'jotai';
|
import { useAtom } from 'jotai';
|
||||||
import { useCallback, useState } from 'react';
|
import { Key, useCallback, useState } from 'react';
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
|
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
|
||||||
import { Virtuoso } from 'react-virtuoso';
|
import { Virtuoso } from 'react-virtuoso';
|
||||||
|
|
||||||
@ -56,15 +56,15 @@ export default function Page() {
|
|||||||
}, [db, setHasNewerNote]);
|
}, [db, setHasNewerNote]);
|
||||||
|
|
||||||
const ItemContent = useCallback(
|
const ItemContent = useCallback(
|
||||||
(index: string | number) => {
|
(index: Key) => {
|
||||||
const event = data[index];
|
const event = data[index];
|
||||||
return <Single event={event} />;
|
return <Note event={event} />;
|
||||||
},
|
},
|
||||||
[data]
|
[data]
|
||||||
);
|
);
|
||||||
|
|
||||||
const computeItemKey = useCallback(
|
const computeItemKey = useCallback(
|
||||||
(index: string | number) => {
|
(index: Key) => {
|
||||||
return data[index].id;
|
return data[index].id;
|
||||||
},
|
},
|
||||||
[data]
|
[data]
|
||||||
@ -87,6 +87,7 @@ export default function Page() {
|
|||||||
if (reload === false) {
|
if (reload === false) {
|
||||||
getData().catch(console.error);
|
getData().catch(console.error);
|
||||||
} else {
|
} else {
|
||||||
|
// auto reload after 8s
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
getData().catch(console.error);
|
getData().catch(console.error);
|
||||||
}, 8000);
|
}, 8000);
|
||||||
@ -101,7 +102,7 @@ export default function Page() {
|
|||||||
<div className="absolute top-8 left-1/2 z-50 -translate-x-1/2 transform">
|
<div className="absolute top-8 left-1/2 z-50 -translate-x-1/2 transform">
|
||||||
<button
|
<button
|
||||||
onClick={() => loadNewest()}
|
onClick={() => loadNewest()}
|
||||||
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg active:translate-y-1"
|
className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg shadow-lg active:translate-y-1"
|
||||||
>
|
>
|
||||||
<span className="text-white drop-shadow">Load newest</span>
|
<span className="text-white drop-shadow">Load newest</span>
|
||||||
</button>
|
</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user