2022-12-18 14:51:47 +00:00
|
|
|
|
import "./Note.css";
|
2023-01-02 13:40:42 +00:00
|
|
|
|
import { useCallback, useState } from "react";
|
2022-12-18 14:51:47 +00:00
|
|
|
|
import { useSelector } from "react-redux";
|
|
|
|
|
import moment from "moment";
|
2022-12-20 12:08:41 +00:00
|
|
|
|
import { Link, useNavigate } from "react-router-dom";
|
2023-01-04 13:23:05 +00:00
|
|
|
|
import { faHeart, faReply, faInfo, faTrash } from "@fortawesome/free-solid-svg-icons";
|
2022-12-29 15:36:40 +00:00
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
|
|
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";
|
2022-12-29 22:23:41 +00:00
|
|
|
|
import useEventPublisher from "../feed/EventPublisher";
|
|
|
|
|
import { NoteCreator } from "./NoteCreator";
|
2023-01-02 13:40:42 +00:00
|
|
|
|
import Invoice from "./Invoice";
|
2023-01-03 10:54:18 +00:00
|
|
|
|
import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex } from "../Const";
|
2022-12-18 14:51:47 +00:00
|
|
|
|
|
|
|
|
|
export default function Note(props) {
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
|
const data = props.data;
|
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"];
|
2022-12-20 23:14:13 +00:00
|
|
|
|
const reactions = props.reactions;
|
2023-01-04 13:23:05 +00:00
|
|
|
|
const deletion = props.deletion;
|
2022-12-28 22:09:39 +00:00
|
|
|
|
const publisher = useEventPublisher();
|
2022-12-29 22:23:41 +00:00
|
|
|
|
const [showReply, setShowReply] = useState(false);
|
2022-12-20 12:08:41 +00:00
|
|
|
|
const users = useSelector(s => s.users?.users);
|
2023-01-04 13:23:05 +00:00
|
|
|
|
const login = useSelector(s => s.login.publicKey);
|
2022-12-28 22:09:39 +00:00
|
|
|
|
const ev = dataEvent ?? Event.FromObject(data);
|
2023-01-04 13:23:05 +00:00
|
|
|
|
const isMine = ev.PubKey === login;
|
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 ?? "";
|
|
|
|
|
|
|
|
|
|
let fragments = extractLinks([body]);
|
|
|
|
|
fragments = extractMentions(fragments);
|
2023-01-04 13:23:05 +00:00
|
|
|
|
fragments = extractInvoices(fragments);
|
|
|
|
|
if (deletion?.length > 0) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<b className="error">Deleted</b>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return fragments;
|
|
|
|
|
}, [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();
|
|
|
|
|
navigate(`/e/${id}`);
|
|
|
|
|
}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function replyTag() {
|
|
|
|
|
let thread = ev.GetThread();
|
|
|
|
|
if (thread === null) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-18 22:23:52 +00:00
|
|
|
|
let replyId = thread?.ReplyTo?.Event;
|
2022-12-20 12:08:41 +00:00
|
|
|
|
let mentions = thread?.PubKeys?.map(a => [a, users[a]])?.map(a => a[1]?.name ?? a[0].substring(0, 8));
|
2022-12-18 14:51:47 +00:00
|
|
|
|
return (
|
|
|
|
|
<div className="reply" onClick={(e) => goToEvent(e, replyId)}>
|
2022-12-20 12:08:41 +00:00
|
|
|
|
➡️ {mentions?.join(", ") ?? replyId?.substring(0, 8)}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-02 13:40:42 +00:00
|
|
|
|
function extractInvoices(fragments) {
|
|
|
|
|
return fragments.map(f => {
|
|
|
|
|
if (typeof f === "string") {
|
|
|
|
|
return f.split(InvoiceRegex).map(i => {
|
|
|
|
|
if (i.toLowerCase().startsWith("lnbc")) {
|
2023-01-03 10:54:18 +00:00
|
|
|
|
return <Invoice key={i} invoice={i} />
|
2023-01-02 13:40:42 +00:00
|
|
|
|
} else {
|
|
|
|
|
return i;
|
2022-12-20 12:08:41 +00:00
|
|
|
|
}
|
2023-01-02 13:40:42 +00:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return f;
|
|
|
|
|
}).flat();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function extractMentions(fragments) {
|
|
|
|
|
return fragments.map(f => {
|
|
|
|
|
if (typeof f === "string") {
|
|
|
|
|
return f.split(MentionRegex).map((match) => {
|
2022-12-28 20:27:25 +00:00
|
|
|
|
let matchTag = match.match(/#\[(\d+)\]/);
|
|
|
|
|
if (matchTag && matchTag.length === 2) {
|
|
|
|
|
let idx = parseInt(matchTag[1]);
|
|
|
|
|
let ref = ev.Tags.find(a => a.Index === idx);
|
|
|
|
|
if (ref) {
|
2022-12-29 15:36:40 +00:00
|
|
|
|
switch (ref.Key) {
|
2022-12-28 20:27:25 +00:00
|
|
|
|
case "p": {
|
|
|
|
|
let pUser = users[ref.PubKey]?.name ?? ref.PubKey.substring(0, 8);
|
|
|
|
|
return <Link key={ref.PubKey} to={`/p/${ref.PubKey}`}>@{pUser}</Link>;
|
|
|
|
|
}
|
|
|
|
|
case "e": {
|
|
|
|
|
let eText = ref.Event.substring(0, 8);
|
|
|
|
|
return <Link key={ref.Event} to={`/e/${ref.Event}`}>#{eText}</Link>;
|
|
|
|
|
}
|
|
|
|
|
}
|
2022-12-29 15:36:40 +00:00
|
|
|
|
}
|
|
|
|
|
return <b style={{ color: "red" }}>{matchTag[0]}?</b>;
|
2022-12-20 12:08:41 +00:00
|
|
|
|
} else {
|
|
|
|
|
return match;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
2023-01-02 13:40:42 +00:00
|
|
|
|
return f;
|
|
|
|
|
}).flat();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function extractLinks(fragments) {
|
|
|
|
|
return fragments.map(f => {
|
|
|
|
|
if (typeof f === "string") {
|
|
|
|
|
return f.split(UrlRegex).map(a => {
|
|
|
|
|
if (a.startsWith("http")) {
|
2023-01-03 22:24:53 +00:00
|
|
|
|
try {
|
|
|
|
|
let url = new URL(a);
|
|
|
|
|
let ext = url.pathname.toLowerCase().match(FileExtensionRegex);
|
|
|
|
|
if (ext) {
|
|
|
|
|
switch (ext[1]) {
|
|
|
|
|
case "gif":
|
|
|
|
|
case "jpg":
|
|
|
|
|
case "jpeg":
|
|
|
|
|
case "png":
|
|
|
|
|
case "bmp":
|
|
|
|
|
case "webp": {
|
|
|
|
|
return <img key={url} src={url} />;
|
|
|
|
|
}
|
|
|
|
|
case "mp4":
|
|
|
|
|
case "mkv":
|
|
|
|
|
case "avi":
|
|
|
|
|
case "m4v": {
|
|
|
|
|
return <video key={url} src={url} controls />
|
|
|
|
|
}
|
2023-01-02 13:40:42 +00:00
|
|
|
|
}
|
2023-01-03 22:24:53 +00:00
|
|
|
|
} else {
|
|
|
|
|
return <a href={url}>{url.toString()}</a>
|
2023-01-02 13:40:42 +00:00
|
|
|
|
}
|
2023-01-03 22:24:53 +00:00
|
|
|
|
} catch (e) {
|
|
|
|
|
console.warn(`Not a valid url: ${a}`);
|
2023-01-02 13:40:42 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return a;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return f;
|
|
|
|
|
}).flat();
|
2022-12-20 12:08:41 +00:00
|
|
|
|
}
|
|
|
|
|
|
2022-12-28 22:09:39 +00:00
|
|
|
|
async function like() {
|
|
|
|
|
let evLike = await publisher.like(ev);
|
|
|
|
|
publisher.broadcast(evLike);
|
|
|
|
|
}
|
|
|
|
|
|
2023-01-04 13:23:05 +00:00
|
|
|
|
async function deleteEvent() {
|
|
|
|
|
if (window.confirm(`Are you sure you want to delete ${ev.Id.substring(0, 8)}?`)) {
|
|
|
|
|
let evDelete = await publisher.delete(ev.Id);
|
|
|
|
|
publisher.broadcast(evDelete);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-18 22:23:52 +00:00
|
|
|
|
if (!ev.IsContent()) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<pre>{ev.Id}</pre>
|
|
|
|
|
<pre>Kind: {ev.Kind}</pre>
|
|
|
|
|
<pre>Content: {ev.Content}</pre>
|
|
|
|
|
</>
|
|
|
|
|
);
|
2022-12-18 14:51:47 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="note">
|
2023-01-02 11:15:13 +00:00
|
|
|
|
{options.showHeader ?
|
|
|
|
|
<div className="header flex">
|
|
|
|
|
<ProfileImage pubkey={ev.PubKey} subHeader={replyTag()} />
|
|
|
|
|
{options.showTime ?
|
|
|
|
|
<div className="info">
|
|
|
|
|
{moment(ev.CreatedAt * 1000).fromNow()}
|
|
|
|
|
</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-02 11:15:13 +00:00
|
|
|
|
{options.showFooter ?
|
|
|
|
|
<div className="footer">
|
2023-01-04 13:23:05 +00:00
|
|
|
|
{isMine ? <span className="pill">
|
|
|
|
|
<FontAwesomeIcon icon={faTrash} onClick={() => deleteEvent()} />
|
|
|
|
|
</span> : null}
|
2023-01-02 11:15:13 +00:00
|
|
|
|
<span className="pill" onClick={() => setShowReply(!showReply)}>
|
|
|
|
|
<FontAwesomeIcon icon={faReply} />
|
|
|
|
|
</span>
|
|
|
|
|
<span className="pill" onClick={() => like()}>
|
|
|
|
|
<FontAwesomeIcon icon={faHeart} />
|
|
|
|
|
{(reactions?.length ?? 0)}
|
|
|
|
|
</span>
|
|
|
|
|
<span className="pill" onClick={() => console.debug(ev)}>
|
|
|
|
|
<FontAwesomeIcon icon={faInfo} />
|
|
|
|
|
</span>
|
|
|
|
|
</div> : null}
|
|
|
|
|
{showReply ? <NoteCreator replyTo={ev} onSend={() => setShowReply(false)} /> : null}
|
2022-12-18 14:51:47 +00:00
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|