2023-02-13 15:49:19 +00:00
|
|
|
import { useState, useMemo, ChangeEvent } from "react";
|
|
|
|
import { useSelector } from "react-redux";
|
|
|
|
import { FormattedMessage } from "react-intl";
|
2023-04-07 11:05:58 +00:00
|
|
|
import { EventKind, HexKey, TaggedRawEvent } from "@snort/nostr";
|
2023-02-13 15:49:19 +00:00
|
|
|
|
|
|
|
import Note from "Element/Note";
|
|
|
|
import { RootState } from "State/Store";
|
2023-03-29 12:10:22 +00:00
|
|
|
import { UserCache } from "Cache/UserCache";
|
2023-02-13 15:49:19 +00:00
|
|
|
|
|
|
|
import messages from "./messages";
|
2023-04-07 11:05:58 +00:00
|
|
|
import NoteReaction from "./NoteReaction";
|
2023-02-13 15:49:19 +00:00
|
|
|
|
|
|
|
interface BookmarksProps {
|
|
|
|
pubkey: HexKey;
|
2023-03-28 14:34:01 +00:00
|
|
|
bookmarks: readonly TaggedRawEvent[];
|
|
|
|
related: readonly TaggedRawEvent[];
|
2023-02-13 15:49:19 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const Bookmarks = ({ pubkey, bookmarks, related }: BookmarksProps) => {
|
|
|
|
const [onlyPubkey, setOnlyPubkey] = useState<HexKey | "all">("all");
|
|
|
|
const loginPubKey = useSelector((s: RootState) => s.login.publicKey);
|
|
|
|
const ps = useMemo(() => {
|
2023-03-28 14:34:01 +00:00
|
|
|
return [...new Set(bookmarks.map(ev => ev.pubkey))];
|
2023-02-13 15:49:19 +00:00
|
|
|
}, [bookmarks]);
|
|
|
|
|
|
|
|
function renderOption(p: HexKey) {
|
2023-03-29 12:10:22 +00:00
|
|
|
const profile = UserCache.getFromCache(p);
|
2023-02-13 15:49:19 +00:00
|
|
|
return profile ? <option value={p}>{profile?.display_name || profile?.name}</option> : null;
|
2023-04-07 11:05:58 +00:00
|
|
|
}
|
2023-02-13 15:49:19 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="main-content">
|
2023-02-14 10:16:09 +00:00
|
|
|
<div className="mb10 flex-end">
|
2023-02-13 15:49:19 +00:00
|
|
|
<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 => {
|
2023-04-07 11:05:58 +00:00
|
|
|
switch(n.kind){
|
|
|
|
case EventKind.TextNote:
|
|
|
|
return (
|
|
|
|
<Note
|
|
|
|
key={n.id}
|
|
|
|
data={n}
|
|
|
|
related={related}
|
|
|
|
options={{ showTime: false, showBookmarked: true, canUnbookmark: loginPubKey === pubkey }}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
case EventKind.Reaction:
|
|
|
|
case EventKind.Repost:
|
|
|
|
return <NoteReaction data={n} key={n.id} />;
|
|
|
|
}
|
2023-02-13 15:49:19 +00:00
|
|
|
return (
|
|
|
|
<Note
|
|
|
|
key={n.id}
|
|
|
|
data={n}
|
|
|
|
related={related}
|
|
|
|
options={{ showTime: false, showBookmarked: true, canUnbookmark: loginPubKey === pubkey }}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Bookmarks;
|