Settings page
This commit is contained in:
@ -1,200 +1,44 @@
|
||||
import "./ProfilePage.css";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Nostrich from "../nostrich.jpg";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faQrcode, faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { faQrcode } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import useProfile from "../feed/ProfileFeed";
|
||||
import { resetProfile } from "../state/Users";
|
||||
import Nostrich from "../nostrich.jpg";
|
||||
import useEventPublisher from "../feed/EventPublisher";
|
||||
import QRCodeStyling from "qr-code-styling";
|
||||
import { logout } from "../state/Login";
|
||||
import FollowButton from "../element/FollowButton";
|
||||
import VoidUpload from "../feed/VoidUpload";
|
||||
import { bech32ToText, openFile, parseId } from "../Util";
|
||||
import { extractLnAddress, parseId } from "../Util";
|
||||
import Timeline from "../element/Timeline";
|
||||
import { extractLinks } from '../Text'
|
||||
import { useCopy } from '../useCopy'
|
||||
import LNURLTip from "../element/LNURLTip";
|
||||
import Copy from "../element/Copy";
|
||||
|
||||
export default function ProfilePage() {
|
||||
const dispatch = useDispatch();
|
||||
const params = useParams();
|
||||
const navigate = useNavigate();
|
||||
const id = parseId(params.id);
|
||||
const user = useProfile(id);
|
||||
const publisher = useEventPublisher();
|
||||
const loginPubKey = useSelector(s => s.login.publicKey);
|
||||
const isMe = loginPubKey === id;
|
||||
const qrRef = useRef();
|
||||
const { copy, copied, error } = useCopy()
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [picture, setPicture] = useState("");
|
||||
const [about, setAbout] = useState("");
|
||||
const [website, setWebsite] = useState("");
|
||||
const [nip05, setNip05] = useState("");
|
||||
const [lud06, setLud06] = useState("");
|
||||
const [lud16, setLud16] = useState("");
|
||||
const [showLnQr, setShowLnQr] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setName(user.name ?? "");
|
||||
setPicture(user.picture ?? "");
|
||||
setAbout(user.about ?? "");
|
||||
setWebsite(user.website ?? "");
|
||||
setNip05(user.nip05 ?? "");
|
||||
setLud06(user.lud06 ?? "");
|
||||
setLud16(user.lud16 ?? "");
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
useMemo(() => {
|
||||
// some clients incorrectly set this to LNURL service, patch this
|
||||
if (lud16.toLowerCase().startsWith("lnurl")) {
|
||||
let url = bech32ToText(lud16);
|
||||
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]);
|
||||
|
||||
useMemo(() => {
|
||||
if (qrRef.current && showLnQr) {
|
||||
let qr = new QRCodeStyling({
|
||||
data: { lud16 },
|
||||
type: "canvas"
|
||||
});
|
||||
qrRef.current.innerHTML = "";
|
||||
qr.append(qrRef.current);
|
||||
}
|
||||
}, [showLnQr]);
|
||||
|
||||
async function saveProfile() {
|
||||
// copy user object and delete internal fields
|
||||
let userCopy = {
|
||||
...user,
|
||||
name,
|
||||
about,
|
||||
picture,
|
||||
website,
|
||||
nip05,
|
||||
lud16
|
||||
};
|
||||
delete userCopy["loaded"];
|
||||
delete userCopy["fromEvent"];
|
||||
// event top level props should not be copied into metadata (bug)
|
||||
delete userCopy["pubkey"];
|
||||
delete userCopy["sig"];
|
||||
delete userCopy["pubkey"];
|
||||
delete userCopy["tags"];
|
||||
delete userCopy["content"];
|
||||
delete userCopy["created_at"];
|
||||
delete userCopy["id"];
|
||||
delete userCopy["kind"]
|
||||
|
||||
// trim empty string fields
|
||||
Object.keys(userCopy).forEach(k => {
|
||||
if (userCopy[k] === "") {
|
||||
delete userCopy[k];
|
||||
}
|
||||
});
|
||||
console.debug(userCopy);
|
||||
|
||||
let ev = await publisher.metadata(userCopy);
|
||||
console.debug(ev);
|
||||
dispatch(resetProfile(id));
|
||||
publisher.broadcast(ev);
|
||||
}
|
||||
|
||||
async function setNewAvatar() {
|
||||
let file = await openFile();
|
||||
console.log(file);
|
||||
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}`)
|
||||
}
|
||||
|
||||
function editor() {
|
||||
return (
|
||||
<div className="editor">
|
||||
<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 f-col">
|
||||
<div>About:</div>
|
||||
<div className="w-max">
|
||||
<textarea onChange={(e) => setAbout(e.target.value)} value={about}></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div>Website:</div>
|
||||
<div>
|
||||
<input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<div>LN Address:</div>
|
||||
<div>
|
||||
<input type="text" value={lud16} onChange={(e) => setLud16(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<div>
|
||||
<div className="btn" onClick={() => dispatch(logout())}>Logout</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="btn" onClick={() => saveProfile()}>Save</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function details() {
|
||||
const lnurl = lud16 || lud06;
|
||||
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
||||
return (
|
||||
<>
|
||||
<div className="flex name">
|
||||
<div className="f-grow">
|
||||
<h2>{name}</h2>
|
||||
<div className="flex flex-row npub-container" onClick={() => copy(params.id)}>
|
||||
<FontAwesomeIcon
|
||||
icon={copied ? faCheck : faCopy}
|
||||
size="xs"
|
||||
style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
|
||||
/>
|
||||
<p className="npub">
|
||||
{params.id}
|
||||
</p>
|
||||
</div>
|
||||
<h2>{user?.name}</h2>
|
||||
<Copy text={params.id} />
|
||||
</div>
|
||||
<div>
|
||||
<FollowButton pubkey={id} />
|
||||
{isMe ? <div className="btn" onClick={() => navigate("/settings")}>Settings</div> : <FollowButton pubkey={id} />}
|
||||
</div>
|
||||
</div>
|
||||
<p>{extractLinks([about])}</p>
|
||||
{website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
|
||||
<p>{extractLinks([user?.about])}</p>
|
||||
{user?.website ? <a href={user?.website} target="_blank" rel="noreferrer">{user?.website}</a> : null}
|
||||
|
||||
{lnurl ? <div className="flex">
|
||||
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
||||
@ -202,7 +46,7 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
<div className="f-ellipsis"> ⚡️ {lnurl}</div>
|
||||
</div> : null}
|
||||
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)}/>
|
||||
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -211,17 +55,11 @@ export default function ProfilePage() {
|
||||
<>
|
||||
<div className="profile flex">
|
||||
<div>
|
||||
<div style={{ backgroundImage: `url(${picture.length === 0 ? Nostrich : picture})` }} className="avatar">
|
||||
{isMe ?
|
||||
<div className="edit" onClick={() => setNewAvatar()}>
|
||||
<div>Edit</div>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
<div style={{ backgroundImage: `url(${user?.picture.length === 0 ? Nostrich : user?.picture})` }} className="avatar">
|
||||
</div>
|
||||
</div>
|
||||
<div className="f-grow">
|
||||
{isMe ? editor() : details()}
|
||||
{details()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tabs">
|
||||
|
||||
Reference in New Issue
Block a user