2022-12-27 23:46:13 +00:00
|
|
|
|
import "./ProfilePage.css";
|
2023-01-01 19:57:27 +00:00
|
|
|
|
import { useMemo, useRef, useState } from "react";
|
2022-12-28 14:51:33 +00:00
|
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
2022-12-29 22:23:41 +00:00
|
|
|
|
import { bech32 } from "bech32";
|
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
|
import { faQrcode } from "@fortawesome/free-solid-svg-icons";
|
2022-12-18 14:51:32 +00:00
|
|
|
|
import { useParams } from "react-router-dom";
|
2022-12-29 22:23:41 +00:00
|
|
|
|
|
|
|
|
|
import useProfile from "../feed/ProfileFeed";
|
2022-12-28 14:51:33 +00:00
|
|
|
|
import { resetProfile } from "../state/Users";
|
2022-12-28 16:08:33 +00:00
|
|
|
|
import Nostrich from "../nostrich.jpg";
|
2022-12-29 22:23:41 +00:00
|
|
|
|
import useEventPublisher from "../feed/EventPublisher";
|
|
|
|
|
import useTimelineFeed from "../feed/TimelineFeed";
|
2022-12-28 23:28:28 +00:00
|
|
|
|
import Note from "../element/Note";
|
2022-12-29 22:23:41 +00:00
|
|
|
|
import QRCodeStyling from "qr-code-styling";
|
2022-12-30 23:35:02 +00:00
|
|
|
|
import Modal from "../element/Modal";
|
2023-01-01 19:57:27 +00:00
|
|
|
|
import { logout } from "../state/Login";
|
2023-01-01 20:31:09 +00:00
|
|
|
|
import FollowButton from "../element/FollowButton";
|
2023-01-03 10:54:18 +00:00
|
|
|
|
import VoidUpload from "../feed/VoidUpload";
|
2022-12-18 14:51:32 +00:00
|
|
|
|
|
|
|
|
|
export default function ProfilePage() {
|
2022-12-28 14:51:33 +00:00
|
|
|
|
const dispatch = useDispatch();
|
2022-12-18 14:51:32 +00:00
|
|
|
|
const params = useParams();
|
|
|
|
|
const id = params.id;
|
2022-12-27 23:46:13 +00:00
|
|
|
|
const user = useProfile(id);
|
2022-12-28 22:09:39 +00:00
|
|
|
|
const publisher = useEventPublisher();
|
2023-01-01 10:44:38 +00:00
|
|
|
|
const { notes } = useTimelineFeed(id);
|
2022-12-27 23:46:13 +00:00
|
|
|
|
const loginPubKey = useSelector(s => s.login.publicKey);
|
|
|
|
|
const isMe = loginPubKey === id;
|
2022-12-29 22:23:41 +00:00
|
|
|
|
const qrRef = useRef();
|
2022-12-27 23:46:13 +00:00
|
|
|
|
|
2022-12-29 22:23:41 +00:00
|
|
|
|
const [name, setName] = useState("");
|
|
|
|
|
const [picture, setPicture] = useState("");
|
|
|
|
|
const [about, setAbout] = useState("");
|
|
|
|
|
const [website, setWebsite] = useState("");
|
|
|
|
|
const [nip05, setNip05] = useState("");
|
|
|
|
|
const [lud16, setLud16] = useState("");
|
|
|
|
|
const [showLnQr, setShowLnQr] = useState(false);
|
2022-12-28 14:51:33 +00:00
|
|
|
|
|
2023-01-01 10:44:38 +00:00
|
|
|
|
useMemo(() => {
|
2022-12-28 14:51:33 +00:00
|
|
|
|
if (user) {
|
|
|
|
|
setName(user.name ?? "");
|
2023-01-01 19:57:27 +00:00
|
|
|
|
setPicture(user.picture ?? "");
|
2022-12-28 14:51:33 +00:00
|
|
|
|
setAbout(user.about ?? "");
|
|
|
|
|
setWebsite(user.website ?? "");
|
|
|
|
|
setNip05(user.nip05 ?? "");
|
|
|
|
|
setLud16(user.lud16 ?? "");
|
|
|
|
|
}
|
|
|
|
|
}, [user]);
|
|
|
|
|
|
2023-01-01 10:44:38 +00:00
|
|
|
|
useMemo(() => {
|
2022-12-29 15:21:03 +00:00
|
|
|
|
// some clients incorrectly set this to LNURL service, patch this
|
|
|
|
|
if (lud16.toLowerCase().startsWith("lnurl")) {
|
|
|
|
|
let decoded = bech32.decode(lud16, 1000);
|
|
|
|
|
let url = new TextDecoder().decode(Uint8Array.from(bech32.fromWords(decoded.words)));
|
|
|
|
|
if (url.startsWith("http")) {
|
|
|
|
|
let parsedUri = new URL(url);
|
|
|
|
|
// is lightning address
|
|
|
|
|
if (parsedUri.pathname.startsWith("/.well-known/lnurlp/")) {
|
|
|
|
|
let pathParts = parsedUri.pathname.split('/');
|
|
|
|
|
let username = pathParts[pathParts.length - 1];
|
|
|
|
|
setLud16(`${username}@${parsedUri.hostname}`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [lud16]);
|
|
|
|
|
|
2023-01-01 10:44:38 +00:00
|
|
|
|
useMemo(() => {
|
2022-12-29 22:23:41 +00:00
|
|
|
|
if (qrRef.current && showLnQr) {
|
|
|
|
|
let qr = new QRCodeStyling({
|
2023-01-01 20:31:09 +00:00
|
|
|
|
data: { lud16 },
|
2022-12-29 22:23:41 +00:00
|
|
|
|
type: "canvas"
|
|
|
|
|
});
|
|
|
|
|
qrRef.current.innerHTML = "";
|
|
|
|
|
qr.append(qrRef.current);
|
|
|
|
|
}
|
|
|
|
|
}, [showLnQr]);
|
|
|
|
|
|
2022-12-28 14:51:33 +00:00
|
|
|
|
async function saveProfile() {
|
2023-01-03 11:01:36 +00:00
|
|
|
|
// copy user object and delete internal fields
|
|
|
|
|
let userCopy = {
|
|
|
|
|
...user,
|
2022-12-28 14:51:33 +00:00
|
|
|
|
name,
|
|
|
|
|
about,
|
|
|
|
|
picture,
|
|
|
|
|
website,
|
|
|
|
|
nip05,
|
|
|
|
|
lud16
|
2023-01-03 11:01:36 +00:00
|
|
|
|
};
|
|
|
|
|
delete userCopy["loaded"];
|
|
|
|
|
delete userCopy["fromEvent"];
|
|
|
|
|
|
|
|
|
|
// trim empty string fields
|
|
|
|
|
Object.keys(userCopy).forEach(k => {
|
|
|
|
|
if(userCopy[k] === "") {
|
|
|
|
|
delete userCopy[k];
|
|
|
|
|
}
|
2022-12-28 14:51:33 +00:00
|
|
|
|
});
|
2023-01-03 11:01:36 +00:00
|
|
|
|
console.debug(userCopy);
|
|
|
|
|
|
|
|
|
|
let ev = await publisher.metadata(userCopy);
|
2022-12-28 14:51:33 +00:00
|
|
|
|
console.debug(ev);
|
2022-12-28 22:09:39 +00:00
|
|
|
|
publisher.broadcast(ev);
|
2022-12-28 14:51:33 +00:00
|
|
|
|
dispatch(resetProfile(id));
|
|
|
|
|
}
|
2022-12-27 23:46:13 +00:00
|
|
|
|
|
2023-01-01 19:57:27 +00:00
|
|
|
|
async function openFile() {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
let elm = document.createElement("input");
|
|
|
|
|
elm.type = "file";
|
|
|
|
|
elm.onchange = (e) => {
|
|
|
|
|
resolve(e.target.files[0]);
|
|
|
|
|
};
|
|
|
|
|
elm.click();
|
|
|
|
|
});
|
|
|
|
|
}
|
2023-01-01 20:31:09 +00:00
|
|
|
|
|
2023-01-01 19:57:27 +00:00
|
|
|
|
async function setNewAvatar() {
|
|
|
|
|
let file = await openFile();
|
|
|
|
|
console.log(file);
|
2023-01-03 10:54:18 +00:00
|
|
|
|
let rsp = await VoidUpload(file);
|
|
|
|
|
if (!rsp) {
|
|
|
|
|
throw "Upload failed, please try again later";
|
|
|
|
|
}
|
|
|
|
|
console.log(rsp);
|
|
|
|
|
setPicture(rsp.metadata.url ?? `https://void.cat/d/${rsp.id}`)
|
2023-01-01 19:57:27 +00:00
|
|
|
|
}
|
|
|
|
|
|
2022-12-27 23:46:13 +00:00
|
|
|
|
function editor() {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className="form-group">
|
|
|
|
|
<div>Name:</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="form-group">
|
|
|
|
|
<div>About:</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="text" value={about} onChange={(e) => setAbout(e.target.value)} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="form-group">
|
|
|
|
|
<div>Website:</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-28 14:51:33 +00:00
|
|
|
|
<div className="form-group">
|
|
|
|
|
<div>NIP-05:</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="text" value={nip05} onChange={(e) => setNip05(e.target.value)} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="form-group">
|
2022-12-29 15:21:03 +00:00
|
|
|
|
<div>LN Address:</div>
|
2022-12-28 14:51:33 +00:00
|
|
|
|
<div>
|
|
|
|
|
<input type="text" value={lud16} onChange={(e) => setLud16(e.target.value)} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="form-group">
|
2023-01-01 19:57:27 +00:00
|
|
|
|
<div>
|
|
|
|
|
<div className="btn" onClick={() => dispatch(logout())}>Logout</div>
|
|
|
|
|
</div>
|
2022-12-28 14:51:33 +00:00
|
|
|
|
<div>
|
|
|
|
|
<div className="btn" onClick={() => saveProfile()}>Save</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-27 23:46:13 +00:00
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
2022-12-18 14:51:32 +00:00
|
|
|
|
|
2022-12-28 23:28:28 +00:00
|
|
|
|
function details() {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2023-01-01 20:31:09 +00:00
|
|
|
|
<div className="flex">
|
|
|
|
|
<h2 className="f-grow">{name}</h2>
|
|
|
|
|
<div>
|
|
|
|
|
<FollowButton pubkey={id} />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-29 22:23:41 +00:00
|
|
|
|
<p>{about}</p>
|
|
|
|
|
{website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
|
2023-01-01 20:31:09 +00:00
|
|
|
|
|
|
|
|
|
{lud16 ? <div className="flex">
|
2022-12-29 22:23:41 +00:00
|
|
|
|
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
|
|
|
|
<FontAwesomeIcon icon={faQrcode} size="xl" />
|
2022-12-28 23:28:28 +00:00
|
|
|
|
</div>
|
2022-12-29 22:23:41 +00:00
|
|
|
|
<div> ⚡️ {lud16}</div>
|
|
|
|
|
</div> : null}
|
|
|
|
|
{showLnQr === true ?
|
2022-12-30 23:35:02 +00:00
|
|
|
|
<Modal onClose={() => setShowLnQr(false)}>
|
|
|
|
|
<h4>{lud16}</h4>
|
|
|
|
|
<div ref={qrRef}></div>
|
|
|
|
|
</Modal> : null}
|
2022-12-28 23:28:28 +00:00
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2022-12-18 14:51:32 +00:00
|
|
|
|
return (
|
2022-12-28 23:28:28 +00:00
|
|
|
|
<>
|
|
|
|
|
<div className="profile">
|
2022-12-29 22:23:41 +00:00
|
|
|
|
<div>
|
2023-01-01 19:57:27 +00:00
|
|
|
|
<div style={{ backgroundImage: `url(${picture.length === 0 ? Nostrich : picture})` }} className="avatar">
|
2022-12-29 22:23:41 +00:00
|
|
|
|
{isMe ?
|
2023-01-01 19:57:27 +00:00
|
|
|
|
<div className="edit" onClick={() => setNewAvatar()}>
|
2022-12-29 22:23:41 +00:00
|
|
|
|
<div>Edit</div>
|
|
|
|
|
</div>
|
|
|
|
|
: null
|
|
|
|
|
}
|
|
|
|
|
</div>
|
2022-12-28 14:51:33 +00:00
|
|
|
|
</div>
|
2022-12-28 23:28:28 +00:00
|
|
|
|
<div>
|
|
|
|
|
{isMe ? editor() : details()}
|
|
|
|
|
</div>
|
2022-12-27 23:46:13 +00:00
|
|
|
|
</div>
|
2022-12-30 14:01:51 +00:00
|
|
|
|
<div className="tabs">
|
|
|
|
|
<div className="btn active">Notes</div>
|
|
|
|
|
<div className="btn">Reactions</div>
|
|
|
|
|
<div className="btn">Followers</div>
|
|
|
|
|
<div className="btn">Follows</div>
|
|
|
|
|
<div className="btn">Relays</div>
|
|
|
|
|
</div>
|
2022-12-28 23:28:28 +00:00
|
|
|
|
{notes?.sort((a, b) => b.created_at - a.created_at).map(a => <Note key={a.id} data={a} />)}
|
|
|
|
|
</>
|
2022-12-18 14:51:32 +00:00
|
|
|
|
)
|
|
|
|
|
}
|