set profile name in ppppp-dict

main.js

@@ -90,11 +90,19 @@ async function loadAccount() {
   const id = await p(peer.db.account.findOrCreate)({ subdomain: 'account' })
   await p(peer.set.load)(id)
   await p(peer.dict.load)(id)
-  return id
+  const profile = peer.dict.read(id, 'profile')
+  return { id, name: profile?.name ?? '' }
+}
+
+async function setProfileName(ev, name,b,c,d) {
+  console.log('ev',ev,'name',name,b,c,d);
+  await p(peer.dict.update)('profile', { name })
+  return name
 }
 
 app.whenReady().then(() => {
   ipcMain.handle('loadAccount', loadAccount)
+  ipcMain.handle('setProfileName', setProfileName)
   createWindow()
 
   app.on('activate', function () {

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "debounce": "2.0",
         "ppppp-caps": "file:../caps",
         "ppppp-conductor": "file:../conductor",
         "ppppp-db": "file:../db",
@@ -38,10 +39,12 @@
       }
     },
     "../caps": {
+      "name": "ppppp-caps",
       "version": "0.0.1",
       "license": "CC0-1.0"
     },
     "../conductor": {
+      "name": "ppppp-conductor",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -72,6 +75,7 @@
       }
     },
     "../db": {
+      "name": "ppppp-db",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -113,6 +117,7 @@
       }
     },
     "../dict": {
+      "name": "ppppp-dict",
       "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
@@ -132,6 +137,7 @@
       }
     },
     "../gc": {
+      "name": "ppppp-gc",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -161,6 +167,7 @@
       }
     },
     "../goals": {
+      "name": "ppppp-goals",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -188,6 +195,7 @@
       }
     },
     "../hub-client": {
+      "name": "ppppp-hub-client",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -214,6 +222,7 @@
       }
     },
     "../invite": {
+      "name": "ppppp-invite",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -239,6 +248,7 @@
       }
     },
     "../keypair": {
+      "name": "ppppp-keypair",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -261,6 +271,7 @@
       }
     },
     "../promise": {
+      "name": "ppppp-promise",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
@@ -289,6 +300,7 @@
       }
     },
     "../set": {
+      "name": "ppppp-set",
       "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
@@ -309,6 +321,7 @@
       }
     },
     "../sync": {
+      "name": "ppppp-sync",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
@@ -7488,6 +7501,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/debounce": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.0.0.tgz",
+      "integrity": "sha512-xRetU6gL1VJbs85Mc4FoEGSjQxzpdxRyFhe3lmWFyy2EzydIcD4xzUvRJMD+NPDfMwKNhxa3PvsIOU32luIWeA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -17,6 +17,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "debounce": "2.0",
     "ppppp-caps": "github:staltz/ppppp-caps",
     "ppppp-keypair": "github:staltz/ppppp-keypair",
     "ppppp-db": "github:staltz/ppppp-db",

preload.js

@@ -1,5 +1,6 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  loadAccount: () => ipcRenderer.invoke('loadAccount')
+  loadAccount: () => ipcRenderer.invoke('loadAccount'),
+  setProfileName: (name) => ipcRenderer.invoke('setProfileName', name),
 })

src/App.js

@@ -1,20 +1,51 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, createRef } from 'react'
 import { Excalidraw } from '@excalidraw/excalidraw'
 import './App.css'
+import debounce from 'debounce'
 
 function MyAccount() {
-  const [account, setAccountID] = useState(null)
+  const nameInput = createRef()
+  const [loaded, setLoaded] = useState(false)
+  const [id, setID] = useState('')
+
   useEffect(() => {
-    window.electronAPI.loadAccount().then((accountID) => {
-      setAccountID(accountID)
+    window.electronAPI.loadAccount().then((account) => {
+      setID(account.id)
+      function tryToSetName() {
+        if (nameInput.current) {
+          nameInput.current.value = account.name
+          setLoaded(true)
+        } else {
+          setTimeout(tryToSetName, 100)
+        }
+      }
+      tryToSetName()
     })
   })
 
+  const updateProfileName = debounce((ev) => {
+    const sendableName = ev.target.value
+    window.electronAPI.setProfileName(sendableName).then((name) => {
+      nameInput.current.value = name
+    })
+  }, 2000)
+
   return (
     <>
-      <span className="text-sm">My name is</span>
-      <span className="text-xs text-gray-500 font-mono overflow-x-hidden overflow-ellipsis">
-        {' ' + account}
+      <input
+        key="input"
+        ref={nameInput}
+        type="text"
+        placeholder={loaded ? 'Set your name' : 'Loading...'}
+        className="border border-gray-400 rounded px-1 outline-offset-3 outline-2 outline-green-500"
+        onChange={updateProfileName}
+        disabled={!loaded}
+      />
+      <span
+        key="span"
+        className="mt-1 text-xs text-gray-500 font-mono overflow-x-hidden overflow-ellipsis"
+      >
+        {loaded ? id : '50726f7061676174696f6e205a6f6e652050726f746f636f6c'}
       </span>
     </>
   )