Profile editor
This commit is contained in:
parent
aadc58a104
commit
00b0cecf6c
@ -83,7 +83,7 @@ export default function Note(props) {
|
|||||||
} else {
|
} else {
|
||||||
let mentions = a.split(MentionRegex).map((match) => {
|
let mentions = a.split(MentionRegex).map((match) => {
|
||||||
if (match.startsWith("#")) {
|
if (match.startsWith("#")) {
|
||||||
let idx = parseInt(match.match(/\[(\d+)\]/)[1]) - 1;
|
let idx = parseInt(match.match(/\[(\d+)\]/)[1]);
|
||||||
let pref = pTags[idx];
|
let pref = pTags[idx];
|
||||||
if (pref) {
|
if (pref) {
|
||||||
let pUser = users[pref.PubKey]?.name ?? pref.PubKey.substring(0, 8);
|
let pUser = users[pref.PubKey]?.name ?? pref.PubKey.substring(0, 8);
|
||||||
|
@ -45,8 +45,12 @@ export default class Connection {
|
|||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send event on this connection
|
||||||
|
* @param {Event} e
|
||||||
|
*/
|
||||||
SendEvent(e) {
|
SendEvent(e) {
|
||||||
let req = ["EVENT", e];
|
let req = ["EVENT", e.ToObject()];
|
||||||
this._SendJson(req);
|
this._SendJson(req);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,6 +57,9 @@ export default class Event {
|
|||||||
|
|
||||||
let sig = await secp.schnorr.sign(this.Id, key);
|
let sig = await secp.schnorr.sign(this.Id, key);
|
||||||
this.Signature = secp.utils.bytesToHex(sig);
|
this.Signature = secp.utils.bytesToHex(sig);
|
||||||
|
if(!await this.Verify()) {
|
||||||
|
throw "Signing failed";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -135,4 +138,28 @@ export default class Event {
|
|||||||
sig: this.Signature
|
sig: this.Signature
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new event for a specific pubkey
|
||||||
|
* @param {String} pubKey
|
||||||
|
*/
|
||||||
|
static ForPubKey(pubKey) {
|
||||||
|
let ev = new Event();
|
||||||
|
ev.CreatedAt = parseInt(new Date().getTime() / 1000);
|
||||||
|
ev.PubKey = pubKey;
|
||||||
|
return ev;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create new SetMetadata event
|
||||||
|
* @param {String} pubKey Pubkey of the creator of this event
|
||||||
|
* @param {any} obj Metadata content
|
||||||
|
* @returns {Event}
|
||||||
|
*/
|
||||||
|
static SetMetadata(pubKey, obj) {
|
||||||
|
let ev = Event.ForPubKey(pubKey);
|
||||||
|
ev.Kind = EventKind.SetMetadata;
|
||||||
|
ev.Content = JSON.stringify(obj);
|
||||||
|
return ev;
|
||||||
|
}
|
||||||
}
|
}
|
@ -83,6 +83,14 @@ export class Subscriptions {
|
|||||||
this.OrSubs.push(sub);
|
this.OrSubs.push(sub);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If all relays have responded with EOSE
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
IsFinished() {
|
||||||
|
return Object.keys(this.Started).length === Object.keys(this.Finished).length;
|
||||||
|
}
|
||||||
|
|
||||||
static FromObject(obj) {
|
static FromObject(obj) {
|
||||||
let ret = new Subscriptions();
|
let ret = new Subscriptions();
|
||||||
ret.Ids = new Set(obj.ids);
|
ret.Ids = new Set(obj.ids);
|
||||||
|
@ -8,6 +8,7 @@ export class NostrSystem {
|
|||||||
constructor() {
|
constructor() {
|
||||||
this.Sockets = {};
|
this.Sockets = {};
|
||||||
this.Subscriptions = {};
|
this.Subscriptions = {};
|
||||||
|
this.PendingSubscriptions = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -38,6 +39,10 @@ export class NostrSystem {
|
|||||||
delete this.Subscriptions[subId];
|
delete this.Subscriptions[subId];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Send events to writable relays
|
||||||
|
* @param {Event} ev
|
||||||
|
*/
|
||||||
BroadcastEvent(ev) {
|
BroadcastEvent(ev) {
|
||||||
for (let s of Object.values(this.Sockets)) {
|
for (let s of Object.values(this.Sockets)) {
|
||||||
s.SendEvent(ev);
|
s.SendEvent(ev);
|
||||||
@ -51,15 +56,11 @@ export class NostrSystem {
|
|||||||
*/
|
*/
|
||||||
RequestSubscription(sub) {
|
RequestSubscription(sub) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let counter = 0;
|
|
||||||
let events = [];
|
let events = [];
|
||||||
|
|
||||||
// force timeout returning current results
|
// force timeout returning current results
|
||||||
let timeout = setTimeout(() => {
|
let timeout = setTimeout(() => {
|
||||||
for (let s of Object.values(this.Sockets)) {
|
this.RemoveSubscription(sub.Id);
|
||||||
s.RemoveSubscription(sub.Id);
|
|
||||||
counter++;
|
|
||||||
}
|
|
||||||
resolve(events);
|
resolve(events);
|
||||||
}, 10_000);
|
}, 10_000);
|
||||||
|
|
||||||
@ -74,16 +75,13 @@ export class NostrSystem {
|
|||||||
};
|
};
|
||||||
sub.OnEnd = (c) => {
|
sub.OnEnd = (c) => {
|
||||||
c.RemoveSubscription(sub.Id);
|
c.RemoveSubscription(sub.Id);
|
||||||
console.debug(counter);
|
if (sub.IsFinished()) {
|
||||||
if (counter-- <= 0) {
|
|
||||||
clearInterval(timeout);
|
clearInterval(timeout);
|
||||||
|
console.debug(`[${sub.Id}] Finished`);
|
||||||
resolve(events);
|
resolve(events);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
for (let s of Object.values(this.Sockets)) {
|
this.AddSubscription(sub);
|
||||||
s.AddSubscription(sub);
|
|
||||||
counter++;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -7,11 +7,23 @@
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile img.avatar {
|
.profile .avatar {
|
||||||
width: 256px;
|
width: 256px;
|
||||||
height: 256px;
|
height: 256px;
|
||||||
}
|
background-size: contain;
|
||||||
|
|
||||||
.profile img.avatar:hover {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
@ -1,20 +1,55 @@
|
|||||||
import "./ProfilePage.css";
|
import "./ProfilePage.css";
|
||||||
import { useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
import useProfile from "./feed/ProfileFeed";
|
import useProfile from "./feed/ProfileFeed";
|
||||||
import useProfileFeed from "./feed/ProfileFeed";
|
import { useContext, useEffect, useState } from "react";
|
||||||
import { useState } from "react";
|
import Event from "../nostr/Event";
|
||||||
|
import { NostrContext } from "..";
|
||||||
|
import { resetProfile } from "../state/Users";
|
||||||
|
|
||||||
export default function ProfilePage() {
|
export default function ProfilePage() {
|
||||||
|
const system = useContext(NostrContext);
|
||||||
|
const dispatch = useDispatch();
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const id = params.id;
|
const id = params.id;
|
||||||
const user = useProfile(id);
|
const user = useProfile(id);
|
||||||
const loginPubKey = useSelector(s => s.login.publicKey);
|
const loginPubKey = useSelector(s => s.login.publicKey);
|
||||||
|
const privKey = useSelector(s => s.login.privateKey);
|
||||||
const isMe = loginPubKey === id;
|
const isMe = loginPubKey === id;
|
||||||
|
|
||||||
let [name, setName] = useState(user?.name);
|
let [name, setName] = useState("");
|
||||||
let [about, setAbout] = useState(user?.amount);
|
let [picture, setPicture] = useState("");
|
||||||
let [website, setWebsite] = useState(user?.website);
|
let [about, setAbout] = useState("");
|
||||||
|
let [website, setWebsite] = useState("");
|
||||||
|
let [nip05, setNip05] = useState("");
|
||||||
|
let [lud16, setLud16] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (user) {
|
||||||
|
setName(user.name ?? "");
|
||||||
|
setPicture(user.picture ?? "");
|
||||||
|
setAbout(user.about ?? "");
|
||||||
|
setWebsite(user.website ?? "");
|
||||||
|
setNip05(user.nip05 ?? "");
|
||||||
|
setLud16(user.lud16 ?? "");
|
||||||
|
}
|
||||||
|
}, [user]);
|
||||||
|
|
||||||
|
async function saveProfile() {
|
||||||
|
let ev = Event.SetMetadata(id, {
|
||||||
|
name,
|
||||||
|
about,
|
||||||
|
picture,
|
||||||
|
website,
|
||||||
|
nip05,
|
||||||
|
lud16
|
||||||
|
});
|
||||||
|
await ev.Sign(privKey);
|
||||||
|
|
||||||
|
console.debug(ev);
|
||||||
|
system.BroadcastEvent(ev);
|
||||||
|
dispatch(resetProfile(id));
|
||||||
|
}
|
||||||
|
|
||||||
function editor() {
|
function editor() {
|
||||||
return (
|
return (
|
||||||
@ -37,6 +72,24 @@ export default function ProfilePage() {
|
|||||||
<input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
|
<input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
|
||||||
</div>
|
</div>
|
||||||
</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>Lightning Address:</div>
|
||||||
|
<div>
|
||||||
|
<input type="text" value={lud16} onChange={(e) => setLud16(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="form-group">
|
||||||
|
<div></div>
|
||||||
|
<div>
|
||||||
|
<div className="btn" onClick={() => saveProfile()}>Save</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -44,7 +97,11 @@ export default function ProfilePage() {
|
|||||||
return (
|
return (
|
||||||
<div className="profile">
|
<div className="profile">
|
||||||
<div>
|
<div>
|
||||||
<img src={user?.picture} className="avatar"/>
|
<div style={{ backgroundImage: `url(${picture})` }} className="avatar">
|
||||||
|
<div className="edit">
|
||||||
|
<div>Edit</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{isMe ? editor() : null}
|
{isMe ? editor() : null}
|
||||||
|
@ -10,10 +10,10 @@ export default function useProfile(pubKey) {
|
|||||||
const pubKeys = useSelector(s => s.users.pubKeys);
|
const pubKeys = useSelector(s => s.users.pubKeys);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!pubKeys.includes(pubKey)) {
|
if (system && !pubKeys.includes(pubKey)) {
|
||||||
dispatch(addPubKey(pubKey));
|
dispatch(addPubKey(pubKey));
|
||||||
}
|
}
|
||||||
}, []);
|
}, [system]);
|
||||||
|
|
||||||
return user;
|
return user;
|
||||||
}
|
}
|
@ -52,6 +52,14 @@ const UsersSlice = createSlice({
|
|||||||
state.users[x.pubkey] = x;
|
state.users[x.pubkey] = x;
|
||||||
window.localStorage.setItem(`user:${x.pubkey}`, JSON.stringify(x));
|
window.localStorage.setItem(`user:${x.pubkey}`, JSON.stringify(x));
|
||||||
|
|
||||||
|
state.users = {
|
||||||
|
...state.users
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetProfile: (state, action) => {
|
||||||
|
if(state.users[action.payload]) {
|
||||||
|
delete state.users[action.payload];
|
||||||
state.users = {
|
state.users = {
|
||||||
...state.users
|
...state.users
|
||||||
};
|
};
|
||||||
@ -60,5 +68,5 @@ const UsersSlice = createSlice({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export const { addPubKey, setUserData } = UsersSlice.actions;
|
export const { addPubKey, setUserData, resetProfile } = UsersSlice.actions;
|
||||||
export const reducer = UsersSlice.reducer;
|
export const reducer = UsersSlice.reducer;
|
Loading…
Reference in New Issue
Block a user