mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
partial support replaceable event
This commit is contained in:
parent
11ad281d72
commit
1206486016
@ -1,7 +1,7 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { writeText } from '@tauri-apps/api/clipboard';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { EventPointer } from 'nostr-tools/lib/nip19';
|
||||
import { AddressPointer, EventPointer } from 'nostr-tools/lib/nip19';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
@ -27,7 +27,9 @@ export function ArticleNoteScreen() {
|
||||
|
||||
const { id } = useParams();
|
||||
const { db } = useStorage();
|
||||
const { status, data } = useEvent(id);
|
||||
|
||||
const naddr = id.startsWith('naddr') ? (nip19.decode(id).data as AddressPointer) : null;
|
||||
const { status, data } = useEvent(id, naddr);
|
||||
|
||||
const [isCopy, setIsCopy] = useState(false);
|
||||
|
||||
@ -103,15 +105,15 @@ export function ArticleNoteScreen() {
|
||||
<ThreadUser pubkey={data.pubkey} time={data.created_at} />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<div>
|
||||
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
|
||||
<NoteStats id={id} />
|
||||
<NoteActions id={data.id} pubkey={data.pubkey} extraButtons={false} />
|
||||
<NoteStats id={data.id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={replyRef} className="px-3">
|
||||
<NoteReplyForm id={id} pubkey={db.account.pubkey} />
|
||||
<RepliesList id={id} />
|
||||
<NoteReplyForm id={data?.id} pubkey={db.account.pubkey} />
|
||||
<RepliesList id={data?.id} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1" />
|
||||
|
@ -1,89 +1,24 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { ArrowRightIcon } from '@shared/icons';
|
||||
import { TitleBar } from '@shared/titleBar';
|
||||
|
||||
import { useResources } from '@stores/resources';
|
||||
|
||||
import { Widget } from '@utils/types';
|
||||
|
||||
const resources = [
|
||||
{
|
||||
title: 'The Basics (provide by nostr.com)',
|
||||
data: [
|
||||
{
|
||||
title: 'What is Nostr?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'Understanding keys',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: "What's a client?",
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'What are relays?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'What is an event?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'How to help Nostr?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Lume Tutorials',
|
||||
data: [
|
||||
{
|
||||
title: 'How to use widget?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'How to send a post?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'How to find more people?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'How to edit your profile?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'How to use focus mode?',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'Report an issue',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
title: 'How to support Lume',
|
||||
image: '',
|
||||
url: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export function LearnNostrWidget({ params }: { params: Widget }) {
|
||||
const navigate = useNavigate();
|
||||
const readResource = useResources((state) => state.readResource);
|
||||
|
||||
const resources = useResources((state) => state.resources);
|
||||
const readed = useResources((state) => state.readed);
|
||||
|
||||
const open = (naddr: string) => {
|
||||
readResource(naddr);
|
||||
navigate(`/notes/article/${naddr}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative shrink-0 grow-0 basis-[400px] bg-white/10 backdrop-blur-xl">
|
||||
<TitleBar id={params.id} title="The Joy of Nostr" />
|
||||
@ -92,24 +27,37 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
|
||||
<div key={index} className="mb-6">
|
||||
<h3 className="mb-2 font-medium text-white/50">{resource.title}</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{resource.data.map((item, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
to={`/notes/articles/${item.url}`}
|
||||
className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3 hover:bg-white/20"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2.5">
|
||||
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
|
||||
<div className="flex flex-col gap-1">
|
||||
<h5 className="font-semibold leading-none">{item.title}</h5>
|
||||
<p className="text-sm leading-none text-white/70">Unread</p>
|
||||
{resource.data.length ? (
|
||||
resource.data.map((item, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
onClick={() => open(item.id)}
|
||||
className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3 hover:bg-white/20"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2.5">
|
||||
<div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
|
||||
<div className="flex flex-col items-start gap-1">
|
||||
<h5 className="font-semibold leading-none">{item.title}</h5>
|
||||
{readed.has(item.id) ? (
|
||||
<p className="text-sm leading-none text-green-500">Readed</p>
|
||||
) : (
|
||||
<p className="text-sm leading-none text-white/70">Unread</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button">
|
||||
<ArrowRightIcon className="h-5 w-5 text-white" />
|
||||
<button type="button">
|
||||
<ArrowRightIcon className="h-5 w-5 text-white" />
|
||||
</button>
|
||||
</button>
|
||||
</Link>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<div className="flex h-14 items-center justify-center rounded-xl bg-white/10 px-3 py-3">
|
||||
<p className="text-sm font-medium text-white">
|
||||
More resources are coming, stay tuned.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
68
src/stores/resources.ts
Normal file
68
src/stores/resources.ts
Normal file
@ -0,0 +1,68 @@
|
||||
import { create } from 'zustand';
|
||||
import { createJSONStorage, persist } from 'zustand/middleware';
|
||||
|
||||
import { Resources } from '@utils/types';
|
||||
|
||||
const DEFAULT_RESOURCES: Array<Resources> = [
|
||||
{
|
||||
title: 'The Basics (provide by nostr.com)',
|
||||
data: [
|
||||
{
|
||||
id: 'naddr1qqxnzd3exsurgwfnxgcnjve5qgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa283wgxe0',
|
||||
title: 'What is Nostr?',
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
id: 'naddr1qqxnzd3exsurgwf48qcnvdfcqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28cnv0yt',
|
||||
title: 'Understanding keys',
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
id: 'naddr1qqxnzd3exsurgwfcxgcrzwfjqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28uccw5e',
|
||||
title: "What's a client?",
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
id: 'naddr1qqxnzd3exsurgwfexqersdp5qgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28jvlesq',
|
||||
title: 'What are relays?',
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
id: 'naddr1qqxnzd3exsur2vpjxserjveeqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28rqy7mx',
|
||||
title: 'What is an event?',
|
||||
image: '',
|
||||
},
|
||||
{
|
||||
id: 'naddr1qqxnzd3exsur2vp5xsmnywpnqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28hxwx4e',
|
||||
title: 'How to help Nostr?',
|
||||
image: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Lume Tutorials',
|
||||
data: [],
|
||||
},
|
||||
];
|
||||
|
||||
interface ResourceState {
|
||||
resources: Array<Resources>;
|
||||
readed: Set<string>;
|
||||
readResource: (id: string) => void;
|
||||
}
|
||||
|
||||
export const useResources = create<ResourceState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
resources: DEFAULT_RESOURCES,
|
||||
readed: new Set(),
|
||||
readResource: (id: string) => {
|
||||
set((state) => ({ readed: new Set(state.readed).add(id) }));
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'resources',
|
||||
storage: createJSONStorage(() => localStorage),
|
||||
}
|
||||
)
|
||||
);
|
@ -1,22 +1,35 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { AddressPointer } from 'nostr-tools/lib/nip19';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { toRawEvent } from '@utils/rawEvent';
|
||||
|
||||
export function useEvent(id: string, embed?: string) {
|
||||
export function useEvent(id: string, naddr?: AddressPointer, embed?: string) {
|
||||
const { db } = useStorage();
|
||||
const { ndk } = useNDK();
|
||||
const { status, data } = useQuery(
|
||||
['event', id],
|
||||
async () => {
|
||||
if (naddr) {
|
||||
const rEvents = await ndk.fetchEvents({
|
||||
kinds: [naddr.kind],
|
||||
'#d': [naddr.identifier],
|
||||
authors: [naddr.pubkey],
|
||||
});
|
||||
const rEvent = [...rEvents].slice(-1)[0];
|
||||
|
||||
return rEvent;
|
||||
}
|
||||
|
||||
// return embed event (nostr.band api) or repost
|
||||
if (embed) {
|
||||
const event: NDKEvent = JSON.parse(embed);
|
||||
return event;
|
||||
}
|
||||
|
||||
// get event from db
|
||||
const dbEvent = await db.getEventByID(id);
|
||||
if (dbEvent) return dbEvent;
|
||||
|
11
src/utils/types.d.ts
vendored
11
src/utils/types.d.ts
vendored
@ -111,3 +111,14 @@ export interface NostrBuildResponse extends Response {
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
export interface Resource {
|
||||
id: string;
|
||||
title: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export interface Resources {
|
||||
title: string;
|
||||
data: Array<Resource>;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user