59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { useState, useMemo, ChangeEvent } from "react";
|
|
import { FormattedMessage } from "react-intl";
|
|
import { HexKey, TaggedRawEvent } from "@snort/nostr";
|
|
|
|
import Note from "Element/Note";
|
|
import useLogin from "Hooks/useLogin";
|
|
import { UserCache } from "Cache/UserCache";
|
|
|
|
import messages from "./messages";
|
|
|
|
interface BookmarksProps {
|
|
pubkey: HexKey;
|
|
bookmarks: readonly TaggedRawEvent[];
|
|
related: readonly TaggedRawEvent[];
|
|
}
|
|
|
|
const Bookmarks = ({ pubkey, bookmarks, related }: BookmarksProps) => {
|
|
const [onlyPubkey, setOnlyPubkey] = useState<HexKey | "all">("all");
|
|
const loginPubKey = useLogin().publicKey;
|
|
const ps = useMemo(() => {
|
|
return [...new Set(bookmarks.map(ev => ev.pubkey))];
|
|
}, [bookmarks]);
|
|
|
|
function renderOption(p: HexKey) {
|
|
const profile = UserCache.getFromCache(p);
|
|
return profile ? <option value={p}>{profile?.display_name || profile?.name}</option> : null;
|
|
}
|
|
|
|
return (
|
|
<div className="main-content">
|
|
<div className="mb10 flex-end">
|
|
<select
|
|
disabled={ps.length <= 1}
|
|
value={onlyPubkey}
|
|
onChange={(e: ChangeEvent<HTMLSelectElement>) => setOnlyPubkey(e.target.value)}>
|
|
<option value="all">
|
|
<FormattedMessage {...messages.All} />
|
|
</option>
|
|
{ps.map(renderOption)}
|
|
</select>
|
|
</div>
|
|
{bookmarks
|
|
.filter(b => (onlyPubkey === "all" ? true : b.pubkey === onlyPubkey))
|
|
.map(n => {
|
|
return (
|
|
<Note
|
|
key={n.id}
|
|
data={n}
|
|
related={related}
|
|
options={{ showTime: false, showBookmarked: true, canUnbookmark: loginPubKey === pubkey }}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Bookmarks;
|