2022-12-18 14:51:47 +00:00
|
|
|
|
import "./Note.css";
|
2023-01-08 00:29:59 +00:00
|
|
|
|
import { useCallback } from "react";
|
2022-12-18 14:51:47 +00:00
|
|
|
|
import { useSelector } from "react-redux";
|
2023-01-07 20:54:12 +00:00
|
|
|
|
import { useNavigate } from "react-router-dom";
|
2022-12-29 15:36:40 +00:00
|
|
|
|
|
2022-12-28 22:09:39 +00:00
|
|
|
|
import Event from "../nostr/Event";
|
2022-12-27 23:46:13 +00:00
|
|
|
|
import ProfileImage from "./ProfileImage";
|
2023-01-12 09:48:39 +00:00
|
|
|
|
import Text, { extractMentions } from "../Text";
|
2023-01-09 16:18:34 +00:00
|
|
|
|
import { eventLink, hexToBech32 } from "../Util";
|
2023-01-08 00:29:59 +00:00
|
|
|
|
import NoteFooter from "./NoteFooter";
|
2023-01-09 16:18:34 +00:00
|
|
|
|
import NoteTime from "./NoteTime";
|
2022-12-18 14:51:47 +00:00
|
|
|
|
|
|
|
|
|
export default function Note(props) {
|
|
|
|
|
const navigate = useNavigate();
|
2023-01-02 11:15:13 +00:00
|
|
|
|
const opt = props.options;
|
2022-12-28 22:09:39 +00:00
|
|
|
|
const dataEvent = props["data-ev"];
|
2023-01-10 09:18:46 +00:00
|
|
|
|
const { data, isThread, reactions, deletion, hightlight } = props
|
2023-01-08 00:29:59 +00:00
|
|
|
|
|
2022-12-20 12:08:41 +00:00
|
|
|
|
const users = useSelector(s => s.users?.users);
|
2022-12-28 22:09:39 +00:00
|
|
|
|
const ev = dataEvent ?? Event.FromObject(data);
|
2022-12-18 14:51:47 +00:00
|
|
|
|
|
2023-01-02 11:15:13 +00:00
|
|
|
|
const options = {
|
|
|
|
|
showHeader: true,
|
|
|
|
|
showTime: true,
|
|
|
|
|
showFooter: true,
|
|
|
|
|
...opt
|
|
|
|
|
};
|
|
|
|
|
|
2023-01-02 13:40:42 +00:00
|
|
|
|
const transformBody = useCallback(() => {
|
|
|
|
|
let body = ev?.Content ?? "";
|
2023-01-04 13:23:05 +00:00
|
|
|
|
if (deletion?.length > 0) {
|
2023-01-12 09:48:39 +00:00
|
|
|
|
return (<b className="error">Deleted</b>);
|
|
|
|
|
}
|
|
|
|
|
const mentions = (fragments) => {
|
|
|
|
|
return extractMentions(fragments, ev.Tags, users);
|
2023-01-04 13:23:05 +00:00
|
|
|
|
}
|
2023-01-12 09:48:39 +00:00
|
|
|
|
return <Text content={body} transforms={[mentions]} />;
|
2023-01-04 13:23:05 +00:00
|
|
|
|
}, [data, dataEvent, reactions, deletion]);
|
2023-01-02 13:40:42 +00:00
|
|
|
|
|
2022-12-18 14:51:47 +00:00
|
|
|
|
function goToEvent(e, id) {
|
2022-12-20 12:08:41 +00:00
|
|
|
|
if (!window.location.pathname.startsWith("/e/")) {
|
|
|
|
|
e.stopPropagation();
|
2023-01-06 14:36:13 +00:00
|
|
|
|
navigate(eventLink(id));
|
2022-12-20 12:08:41 +00:00
|
|
|
|
}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function replyTag() {
|
2023-01-06 19:29:12 +00:00
|
|
|
|
if (ev.Thread === null) {
|
2022-12-18 14:51:47 +00:00
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-09 16:18:34 +00:00
|
|
|
|
const maxMentions = 2;
|
2023-01-09 16:48:03 +00:00
|
|
|
|
let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
|
|
|
|
|
let mentions = ev.Thread?.PubKeys?.map(a => [a, users[a]])?.map(a => (a[1]?.name?.length ?? 0) > 0 ? a[1].name : hexToBech32("npub", a[0]).substring(0, 12))
|
2023-01-09 16:18:34 +00:00
|
|
|
|
.sort((a, b) => a.startsWith("npub") ? 1 : -1);
|
|
|
|
|
let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${mentions.length - maxMentions} others` : mentions?.join(", ");
|
2022-12-18 14:51:47 +00:00
|
|
|
|
return (
|
2023-01-09 16:18:34 +00:00
|
|
|
|
<div className="reply">
|
2023-01-10 11:20:51 +00:00
|
|
|
|
➡️ {(pubMentions?.length ?? 0) > 0 ? pubMentions : hexToBech32("note", replyId)?.substring(0, 12)}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-18 22:23:52 +00:00
|
|
|
|
if (!ev.IsContent()) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2023-01-08 18:35:36 +00:00
|
|
|
|
<h4>Unknown event kind: {ev.Kind}</h4>
|
|
|
|
|
<pre>
|
|
|
|
|
{JSON.stringify(ev.ToObject(), undefined, ' ')}
|
|
|
|
|
</pre>
|
2022-12-18 22:23:52 +00:00
|
|
|
|
</>
|
|
|
|
|
);
|
2022-12-18 14:51:47 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
2023-01-10 11:27:28 +00:00
|
|
|
|
<div className={`note ${hightlight ? "active" : ""} ${isThread ? "thread" : ""}`}>
|
2023-01-02 11:15:13 +00:00
|
|
|
|
{options.showHeader ?
|
|
|
|
|
<div className="header flex">
|
2023-01-08 00:29:59 +00:00
|
|
|
|
<ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag()} />
|
2023-01-02 11:15:13 +00:00
|
|
|
|
{options.showTime ?
|
|
|
|
|
<div className="info">
|
2023-01-09 16:18:34 +00:00
|
|
|
|
<NoteTime from={ev.CreatedAt * 1000} />
|
2023-01-02 11:15:13 +00:00
|
|
|
|
</div> : null}
|
|
|
|
|
</div> : null}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
<div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
|
2022-12-20 12:08:41 +00:00
|
|
|
|
{transformBody()}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
</div>
|
2023-01-08 00:29:59 +00:00
|
|
|
|
{options.showFooter ? <NoteFooter ev={ev} reactions={reactions} /> : null}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
</div>
|
|
|
|
|
)
|
2023-01-14 01:39:20 +00:00
|
|
|
|
}
|