Settings page
This commit is contained in:
parent
6c157019ea
commit
276a4cbcd1
22
src/Util.js
22
src/Util.js
@ -90,3 +90,25 @@ export function normalizeReaction(content) {
|
|||||||
}
|
}
|
||||||
return content;
|
return content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts LNURL service to LN Address
|
||||||
|
* @param {string} lnurl
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function extractLnAddress(lnurl) {
|
||||||
|
// some clients incorrectly set this to LNURL service, patch this
|
||||||
|
if (lnurl.toLowerCase().startsWith("lnurl")) {
|
||||||
|
let url = bech32ToText(lnurl);
|
||||||
|
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];
|
||||||
|
return `${username}@${parsedUri.hostname}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return lnurl;
|
||||||
|
}
|
14
src/element/Copy.css
Normal file
14
src/element/Copy.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.copy {
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy .body {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0;
|
||||||
|
width: 18em;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
21
src/element/Copy.js
Normal file
21
src/element/Copy.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import "./Copy.css";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { useCopy } from "../useCopy";
|
||||||
|
|
||||||
|
export default function Copy(props) {
|
||||||
|
|
||||||
|
const { copy, copied, error } = useCopy();
|
||||||
|
return (
|
||||||
|
<div className="flex flex-row copy" onClick={() => copy(props.text)}>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={copied ? faCheck : faCopy}
|
||||||
|
size="xs"
|
||||||
|
style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
|
||||||
|
/>
|
||||||
|
<p className="body">
|
||||||
|
{props.text}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -1,7 +1,6 @@
|
|||||||
import { useEffect, useMemo } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { ProfileCacheExpire } from "../Const";
|
import { ProfileCacheExpire } from "../Const";
|
||||||
import Event from "../nostr/Event";
|
|
||||||
import EventKind from "../nostr/EventKind";
|
import EventKind from "../nostr/EventKind";
|
||||||
import { Subscriptions } from "../nostr/Subscriptions";
|
import { Subscriptions } from "../nostr/Subscriptions";
|
||||||
import { setUserData } from "../state/Users";
|
import { setUserData } from "../state/Users";
|
||||||
|
@ -83,6 +83,10 @@ input[type="text"], input[type="password"], input[type="number"], textarea {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.f-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.f-1 {
|
.f-1 {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
@ -106,6 +110,9 @@ input[type="text"], input[type="password"], input[type="number"], textarea {
|
|||||||
|
|
||||||
.w-max {
|
.w-max {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
width: -moz-available;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
width: fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -148,7 +155,17 @@ div.form-group > div {
|
|||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.form-group > div:first-child {
|
div.form-group > div:nth-child(1) {
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form-group > div:nth-child(2) {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form-group > div:nth-child(2) input {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,6 +18,7 @@ import RootPage from './pages/Root';
|
|||||||
import Store from "./state/Store";
|
import Store from "./state/Store";
|
||||||
import NotificationsPage from './pages/Notifications';
|
import NotificationsPage from './pages/Notifications';
|
||||||
import NewUserPage from './pages/NewUserPage';
|
import NewUserPage from './pages/NewUserPage';
|
||||||
|
import SettingsPage from './pages/SettingsPage';
|
||||||
|
|
||||||
export const System = new NostrSystem();
|
export const System = new NostrSystem();
|
||||||
|
|
||||||
@ -34,6 +35,9 @@ root.render(
|
|||||||
<Route path="/p/:id" exact element={<ProfilePage />} />
|
<Route path="/p/:id" exact element={<ProfilePage />} />
|
||||||
<Route path="/notifications" exact element={<NotificationsPage />} />
|
<Route path="/notifications" exact element={<NotificationsPage />} />
|
||||||
<Route path="/new" exact element={<NewUserPage />} />
|
<Route path="/new" exact element={<NewUserPage />} />
|
||||||
|
<Route path="/settings" exact element={<SettingsPage />}>
|
||||||
|
<Route path="/settings/relays" exact element={<h2>Relays</h2>} />
|
||||||
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Router>
|
</Router>
|
||||||
|
@ -4,6 +4,16 @@ import { Subscriptions } from "./Subscriptions";
|
|||||||
import Event from "./Event";
|
import Event from "./Event";
|
||||||
import { DefaultConnectTimeout } from "../Const";
|
import { DefaultConnectTimeout } from "../Const";
|
||||||
|
|
||||||
|
export class ConnectionStats {
|
||||||
|
constructor() {
|
||||||
|
this.Latency = [];
|
||||||
|
this.Subs = 0;
|
||||||
|
this.SubsTimeout = 0;
|
||||||
|
this.EventsReceived = 0;
|
||||||
|
this.EventsSent = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default class Connection {
|
export default class Connection {
|
||||||
constructor(addr, options) {
|
constructor(addr, options) {
|
||||||
this.Address = addr;
|
this.Address = addr;
|
||||||
@ -13,6 +23,7 @@ export default class Connection {
|
|||||||
this.Read = options?.read || true;
|
this.Read = options?.read || true;
|
||||||
this.Write = options?.write || true;
|
this.Write = options?.write || true;
|
||||||
this.ConnectTimeout = DefaultConnectTimeout;
|
this.ConnectTimeout = DefaultConnectTimeout;
|
||||||
|
this.Stats = new ConnectionStats();
|
||||||
this.Connect();
|
this.Connect();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -145,6 +156,7 @@ export default class Connection {
|
|||||||
_OnEvent(subId, ev) {
|
_OnEvent(subId, ev) {
|
||||||
if (this.Subscriptions[subId]) {
|
if (this.Subscriptions[subId]) {
|
||||||
//this._VerifySig(ev);
|
//this._VerifySig(ev);
|
||||||
|
ev.relay = this.Address; // tag event with relay
|
||||||
this.Subscriptions[subId].OnEvent(ev);
|
this.Subscriptions[subId].OnEvent(ev);
|
||||||
} else {
|
} else {
|
||||||
// console.warn(`No subscription for event! ${subId}`);
|
// console.warn(`No subscription for event! ${subId}`);
|
||||||
|
@ -68,7 +68,7 @@ export default function Layout(props) {
|
|||||||
return (
|
return (
|
||||||
<div className="page">
|
<div className="page">
|
||||||
<div className="header">
|
<div className="header">
|
||||||
<div onClick={() => navigate("/")}>n o s t r</div>
|
<div onClick={() => navigate("/")}>snort</div>
|
||||||
<div>
|
<div>
|
||||||
{key ? accountHeader() :
|
{key ? accountHeader() :
|
||||||
<div className="btn" onClick={() => navigate("/login")}>Login</div>
|
<div className="btn" onClick={() => navigate("/login")}>Login</div>
|
||||||
|
@ -18,50 +18,13 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .npub-container {
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .npub {
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
width: 18em;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .avatar {
|
.profile .avatar {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .avatar .edit {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
opacity: 0;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .avatar .edit:hover {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile .editor textarea {
|
|
||||||
resize: vertical;
|
|
||||||
width: calc(100% - 30px);
|
|
||||||
max-height: 300px;
|
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: 720px) {
|
@media(max-width: 720px) {
|
||||||
.profile {
|
.profile {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -1,200 +1,44 @@
|
|||||||
import "./ProfilePage.css";
|
import "./ProfilePage.css";
|
||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
import Nostrich from "../nostrich.jpg";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faQrcode, faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
|
import { faQrcode } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
|
|
||||||
import useProfile from "../feed/ProfileFeed";
|
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 FollowButton from "../element/FollowButton";
|
||||||
import VoidUpload from "../feed/VoidUpload";
|
import { extractLnAddress, parseId } from "../Util";
|
||||||
import { bech32ToText, openFile, parseId } from "../Util";
|
|
||||||
import Timeline from "../element/Timeline";
|
import Timeline from "../element/Timeline";
|
||||||
import { extractLinks } from '../Text'
|
import { extractLinks } from '../Text'
|
||||||
import { useCopy } from '../useCopy'
|
|
||||||
import LNURLTip from "../element/LNURLTip";
|
import LNURLTip from "../element/LNURLTip";
|
||||||
|
import Copy from "../element/Copy";
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
const dispatch = useDispatch();
|
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
const id = parseId(params.id);
|
const id = parseId(params.id);
|
||||||
const user = useProfile(id);
|
const user = useProfile(id);
|
||||||
const publisher = useEventPublisher();
|
|
||||||
const loginPubKey = useSelector(s => s.login.publicKey);
|
const loginPubKey = useSelector(s => s.login.publicKey);
|
||||||
const isMe = loginPubKey === id;
|
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);
|
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() {
|
function details() {
|
||||||
const lnurl = lud16 || lud06;
|
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex name">
|
<div className="flex name">
|
||||||
<div className="f-grow">
|
<div className="f-grow">
|
||||||
<h2>{name}</h2>
|
<h2>{user?.name}</h2>
|
||||||
<div className="flex flex-row npub-container" onClick={() => copy(params.id)}>
|
<Copy text={params.id} />
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={copied ? faCheck : faCopy}
|
|
||||||
size="xs"
|
|
||||||
style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
|
|
||||||
/>
|
|
||||||
<p className="npub">
|
|
||||||
{params.id}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<FollowButton pubkey={id} />
|
{isMe ? <div className="btn" onClick={() => navigate("/settings")}>Settings</div> : <FollowButton pubkey={id} />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>{extractLinks([about])}</p>
|
<p>{extractLinks([user?.about])}</p>
|
||||||
{website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
|
{user?.website ? <a href={user?.website} target="_blank" rel="noreferrer">{user?.website}</a> : null}
|
||||||
|
|
||||||
{lnurl ? <div className="flex">
|
{lnurl ? <div className="flex">
|
||||||
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
||||||
@ -211,17 +55,11 @@ export default function ProfilePage() {
|
|||||||
<>
|
<>
|
||||||
<div className="profile flex">
|
<div className="profile flex">
|
||||||
<div>
|
<div>
|
||||||
<div style={{ backgroundImage: `url(${picture.length === 0 ? Nostrich : picture})` }} className="avatar">
|
<div style={{ backgroundImage: `url(${user?.picture.length === 0 ? Nostrich : user?.picture})` }} className="avatar">
|
||||||
{isMe ?
|
|
||||||
<div className="edit" onClick={() => setNewAvatar()}>
|
|
||||||
<div>Edit</div>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="f-grow">
|
<div className="f-grow">
|
||||||
{isMe ? editor() : details()}
|
{details()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="tabs">
|
<div className="tabs">
|
||||||
|
28
src/pages/SettingsPage.css
Normal file
28
src/pages/SettingsPage.css
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
.settings .avatar {
|
||||||
|
width: 256px;
|
||||||
|
height: 256px;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings .avatar .edit {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings .avatar .edit:hover {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings .editor textarea {
|
||||||
|
resize: vertical;
|
||||||
|
max-height: 300px;
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
145
src/pages/SettingsPage.js
Normal file
145
src/pages/SettingsPage.js
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
import "./SettingsPage.css";
|
||||||
|
import Nostrich from "../nostrich.jpg";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
|
||||||
|
import useEventPublisher from "../feed/EventPublisher";
|
||||||
|
import useProfile from "../feed/ProfileFeed";
|
||||||
|
import VoidUpload from "../feed/VoidUpload";
|
||||||
|
import { logout } from "../state/Login";
|
||||||
|
import { resetProfile } from "../state/Users";
|
||||||
|
import { openFile } from "../Util";
|
||||||
|
|
||||||
|
export default function SettingsPage(props) {
|
||||||
|
const id = useSelector(s => s.login.publicKey);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const user = useProfile(id);
|
||||||
|
const publisher = useEventPublisher();
|
||||||
|
|
||||||
|
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("");
|
||||||
|
|
||||||
|
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]);
|
||||||
|
|
||||||
|
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 className="w-max" 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="settings">
|
||||||
|
<h1>Settings</h1>
|
||||||
|
<div className="flex f-center">
|
||||||
|
<div style={{ backgroundImage: `url(${picture.length === 0 ? Nostrich : picture})` }} className="avatar">
|
||||||
|
<div className="edit">Edit</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{editor()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user