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