mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
added mention note
This commit is contained in:
parent
29c7075f22
commit
3c08cf2ef9
@ -1,5 +1,6 @@
|
|||||||
import NoteMetadata from '@components/note/content/metadata';
|
import NoteMetadata from '@components/note/content/metadata';
|
||||||
import NotePreview from '@components/note/content/preview';
|
import NotePreview from '@components/note/content/preview';
|
||||||
|
import { MentionNote } from '@components/note/mention';
|
||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@components/user/extend';
|
||||||
import { UserMention } from '@components/user/mention';
|
import { UserMention } from '@components/user/mention';
|
||||||
|
|
||||||
@ -22,7 +23,7 @@ export const Content = memo(function Content({ data }: { data: any }) {
|
|||||||
));
|
));
|
||||||
// handle hashtags
|
// handle hashtags
|
||||||
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
|
parsedContent = reactStringReplace(parsedContent, /#(\w+)/g, (match, i) => (
|
||||||
<span key={match + i} className="text-fuchsia-500">
|
<span key={match + i} className="cursor-pointer text-fuchsia-500">
|
||||||
#{match}
|
#{match}
|
||||||
</span>
|
</span>
|
||||||
));
|
));
|
||||||
@ -31,9 +32,8 @@ export const Content = memo(function Content({ data }: { data: any }) {
|
|||||||
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
|
parsedContent = reactStringReplace(parsedContent, /\#\[(\d+)\]/gm, (match, i) => {
|
||||||
if (tags[match][0] === 'p') {
|
if (tags[match][0] === 'p') {
|
||||||
return <UserMention key={match + i} pubkey={tags[match][1]} />;
|
return <UserMention key={match + i} pubkey={tags[match][1]} />;
|
||||||
} else {
|
} else if (tags[match][0] === 'e') {
|
||||||
// #TODO: handle mention other note
|
return <MentionNote id={tags[match][1]} />;
|
||||||
// console.log(tags[match]);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -29,14 +29,19 @@ export const Note = memo(function Note({ event }: { event: any }) {
|
|||||||
}
|
}
|
||||||
}, [tags]);
|
}, [tags]);
|
||||||
|
|
||||||
const openThread = () => {
|
const openThread = (e) => {
|
||||||
router.push(`/newsfeed/${rootEventID.current || event.id}`);
|
const selection = window.getSelection();
|
||||||
|
if (selection.toString().length === 0) {
|
||||||
|
router.push(`/newsfeed/${rootEventID.current || event.id}`);
|
||||||
|
} else {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
onClick={() => openThread()}
|
onClick={(e) => openThread(e)}
|
||||||
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 hover:bg-black/20"
|
className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
|
||||||
>
|
>
|
||||||
<>{fetchRootEvent}</>
|
<>{fetchRootEvent}</>
|
||||||
<Content data={event} />
|
<Content data={event} />
|
||||||
|
100
src/components/note/mention.tsx
Normal file
100
src/components/note/mention.tsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
import { DatabaseContext } from '@components/contexts/database';
|
||||||
|
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 MentionNote = memo(function MentionNote({ id }: { id: string }) {
|
||||||
|
const { db }: any = useContext(DatabaseContext);
|
||||||
|
const relayPool: any = useContext(RelayContext);
|
||||||
|
|
||||||
|
const [relays]: any = useLocalStorage('relays');
|
||||||
|
const [event, setEvent] = useState(null);
|
||||||
|
|
||||||
|
const insertDB = useCallback(
|
||||||
|
async (event: any) => {
|
||||||
|
// insert to local database
|
||||||
|
await db.execute(
|
||||||
|
'INSERT OR IGNORE INTO cache_notes (id, pubkey, created_at, kind, content, tags, is_root) VALUES (?, ?, ?, ?, ?, ?, ?);',
|
||||||
|
[event.id, event.pubkey, event.created_at, event.kind, event.content, JSON.stringify(event.tags), 0]
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[db]
|
||||||
|
);
|
||||||
|
|
||||||
|
const getData = useCallback(async () => {
|
||||||
|
const result = await db.select(`SELECT * FROM cache_notes WHERE id = "${id}"`);
|
||||||
|
return result[0];
|
||||||
|
}, [db, id]);
|
||||||
|
|
||||||
|
const fetchEvent = useCallback(() => {
|
||||||
|
relayPool.subscribe(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
ids: [id],
|
||||||
|
kinds: [1],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
relays,
|
||||||
|
(event: any) => {
|
||||||
|
// update state
|
||||||
|
setEvent(event);
|
||||||
|
// insert to database
|
||||||
|
insertDB(event);
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
{
|
||||||
|
unsubscribeOnEose: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}, [id, insertDB, relayPool, relays]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getData()
|
||||||
|
.then((res) => {
|
||||||
|
if (res) {
|
||||||
|
setEvent(res);
|
||||||
|
} else {
|
||||||
|
fetchEvent();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(console.error);
|
||||||
|
}, [fetchEvent, getData]);
|
||||||
|
|
||||||
|
if (event) {
|
||||||
|
return (
|
||||||
|
<div className="relative border border-zinc-900 p-3">
|
||||||
|
<Content data={event} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div className="relative z-10 flex h-min animate-pulse select-text flex-col pb-5">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
|
||||||
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
|
<div className="flex w-full items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2 text-sm">
|
||||||
|
<div className="h-4 w-16 rounded bg-zinc-700" />
|
||||||
|
<span className="text-zinc-500">·</span>
|
||||||
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
||||||
|
</div>
|
||||||
|
<div className="h-3 w-3 rounded-full bg-zinc-700" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="-mt-5 pl-[52px]">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="h-16 w-full rounded bg-zinc-700" />
|
||||||
|
<div className="flex items-center gap-8">
|
||||||
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
||||||
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
@ -24,6 +24,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
|
|||||||
};
|
};
|
||||||
|
|
||||||
const fetchProfile = useCallback(async (id: string) => {
|
const fetchProfile = useCallback(async (id: string) => {
|
||||||
|
console.log('fetch');
|
||||||
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
|
const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
timeout: 30,
|
timeout: 30,
|
||||||
|
@ -46,5 +46,5 @@ export const UserMention = memo(function UserMention({ pubkey }: { pubkey: strin
|
|||||||
.catch(console.error);
|
.catch(console.error);
|
||||||
}, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
|
}, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
|
||||||
|
|
||||||
return <span className="text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
|
return <span className="cursor-pointer text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user