Profile editor

src/pages/ProfilePage.js

@@ -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}