UI data loading finally working! hallelluja

Shared (Extension)/Resources/background.js

@@ -1,4 +1,4 @@
-import { generatePrivateKey , getPublicKey } from "nostr-tools";
+import { generatePrivateKey, getPublicKey } from "nostr-tools";
 
 const storage = browser.storage.local;
 
@@ -9,25 +9,36 @@ browser.runtime.onMessage.addListener(async (message, _sender, sendResponse) =>
         case 'init':
             await initialize();
             break;
-        case 'getProfiles':
-            let names = await getProfileNames();
-            sendResponse(names);
-            break;
-        case 'getProfileIndex':
-            sendResponse(await getProfileIndex());
-            break;
         case 'setProfileIndex':
             await setProfileIndex(message.payload);
             break;
-        case 'getActiveProfile':
-            let ap = await currentProfile();
-            sendResponse(ap);
+        case 'getProfileIndex':
+            let profileIndex = await getProfileIndex();
+            sendResponse(profileIndex);
             break;
-        case 'newKey':
-            sendResponse(generatePrivateKey());
+        case 'getPrivKey':
+            let privKey = await getPrivKey();
+            sendResponse(privKey);
+            break;
+        case 'getPubKey':
+            let pubKey = await getPubKey();
+            sendResponse(pubKey);
+            break;
+        case 'getHosts':
+            let hosts = await getHosts();
+            sendResponse(hosts);
+            break;
+        case 'getName':
+            let name = await getName();
+            sendResponse(name);
+            break;
+        case 'getProfileNames':
+            let profileNames = await getProfileNames();
+            sendResponse(profileNames);
             break;
         case 'newProfile':
-            sendResponse(await newProfile());
+            let newIndex = await newProfile();
+            sendResponse(newIndex);
             break;
         default:
             break;
@@ -39,8 +50,8 @@ async function get(item) {
 }
 
 async function getOrSetDefault(key, def) {
-    let val = storage.get(key)[key];
-    if (!val) {
+    let val = (await storage.get(key))[key];
+    if (val == null || val == undefined) {
         await storage.set({[key]: def});
         return def;
     }
@@ -53,32 +64,43 @@ async function initialize() {
     await getOrSetDefault('profiles', [{name: 'Default', privKey: generatePrivateKey(), hosts: []}]);
 }
 
-async function getProfileIndex() {
-    return (await storage.get('profileIndex')).profileIndex;
+async function getPrivKey() {
+    let profile = await currentProfile();
+    return profile.privKey;
+}
+
+async function getPubKey() {
+    let privKey = await getPrivKey();
+    return getPublicKey(privKey);
+}
+
+async function getHosts() {
+    let profile = await currentProfile();
+    return profile.hosts;
+}
+
+async function getName() {
+    let profile = await currentProfile();
+    return profile.name;
+}
+
+async function getProfileNames() {
+    let profiles = await get('profiles');
+    return profiles.map(p => p.name);
 }
 
 async function setProfileIndex(profileIndex) {
     await storage.set({profileIndex});
 }
 
-async function currentProfile() {
-    let index = (await storage.get('profileIndex')).profileIndex;
-    let profiles = (await storage.get('profiles')).profiles;
-
-    if (!profiles || !profiles[index]) {
-        let newProfile = {name: 'Default', privKey: generatePrivateKey(), hosts: []};
-        await storage.set({profileIndex: 0});
-        await storage.set({profiles: [newProfile]});
-        return newProfile;
-    }
-
-    return profiles[index];
+async function getProfileIndex() {
+    return await get('profileIndex');
 }
 
-async function getProfileNames() {
-    let profiles = (await storage.get({profiles: []})).profiles;
-    console.log('Profiles: ', profiles);
-    return profiles.map(p => p.name);
+async function currentProfile() {
+    let index = await get('profileIndex');
+    let profiles = await get('profiles');
+    return profiles[index];
 }
 
 async function newProfile() {
@@ -86,5 +108,5 @@ async function newProfile() {
     const newProfile = {name: 'New Profile', privKey: generatePrivateKey(), hosts: []};
     profiles.push(newProfile);
     await storage.set({profiles});
-    return profiles.index - 1;
+    return profiles.length - 1;
 }

Shared (Extension)/Resources/popup.html

@@ -8,8 +8,8 @@
 <body x-data="popup">
     <div class="profiles">
         <label for="profile">Profile</label>
-        <select x-model="profileIndex" name="profile" id="profile" @change="setProfileIndex()">
-            <template x-for="(prof, index) in profiles">
+        <select x-model.number="profileIndex" name="profile" id="profile">
+            <template x-for="(prof, index) in profileNames" :key="index">
                 <option x-text="prof" :value="index"></option>
             </template>
         </select>
@@ -18,17 +18,18 @@
 
     <div class="profile-name">
         <label for="profile-name">Profile Name</label>
-        <input type="text" id="profile-name" x-model="activeProfile.name">
+        <input type="text" id="profile-name" x-model="name">
     </div>
     
     <div class="key">
         <label for="priv-key">Private Key</label>
-        <input id="priv-key" x-model="activeProfile.privKey" :type="visibleKey ? 'text' : 'password'">
+        <input id="priv-key" x-model="privKey" :type="visibleKey ? 'text' : 'password'">
     </div>
 
     <div class="buttons">
         <button @click="visibleKey = !visibleKey" x-text="visibleKey ? 'Hide' : 'Show'"></button>
         <button @click="saveKey()">Save</button>
+        <button @click="profileIndex = 1">Profile Index</button>
     </div>
 
     <div x-show="hasValidPubKey">

Shared (Extension)/Resources/popup.js

@@ -2,78 +2,84 @@ import Alpine from "alpinejs";
 window.Alpine = Alpine;
 
 Alpine.data('popup', () => ({
+    privKey: '',
     pubKey: '',
-    profiles: [],
+    hosts: [],
+    name: '',
+    profileNames: ['Default'],
     profileIndex: 0,
-    activeProfile: {hosts: []},
     visibleKey: false,
 
     async init() {
         console.log("Initializing backend.");
         await browser.runtime.sendMessage({kind: 'init'});
-        console.log('Getting profile list.')
-        await this.getProfiles();
-        console.log('Getting active profile.');
-        await this.getActiveProfile();
-        console.log('Getting pub key.');
+
+        this.$watch('profileIndex', async () => {
+            await this.setProfileIndex();
+            await this.refreshProfile();
+        });
+
+        // Even though getProfileIndex will immediately trigger a profile refresh, we still
+        // need to do an initial profile refresh first. This will pull the latest data from
+        // the background scripts. Specifically, this pulls the list of profile names,
+        // otherwise it generates a rendering error where it may not show the correct selected
+        // profile when first loading the popup.
+        await this.refreshProfile();
+        await this.getProfileIndex();
+    },
+
+    async refreshProfile() {
+        await this.getPrivKey();
         await this.getPubKey();
-        console.log('profiles: ', this.profiles);
-    },
-
-    async saveKey() {},
-
-    async setProfileByIndex(index) {
-        this.profileIndex = index;
-        await this.resetProfile();
-    },
-
-    async resetProfile() {
-        await this.setProfileIndex();
-        await this.getActiveProfile();
-        await this.getPubKey();
-        await this.getProfiles();
-    },
-    
-    async getActiveProfile() {
-        this.activeProfile = await browser.runtime.sendMessage({kind: 'getActiveProfile'});
-    },
-
-    async getProfiles() {
-        this.profiles = await browser.runtime.sendMessage({kind: 'getProfiles'});
-        this.profileIndex = await browser.runtime.sendMessage({kind: 'getProfileIndex'});
+        await this.getHosts();
+        await this.getName();
+        await this.getProfileNames();
     },
 
     async setProfileIndex() {
-        await browser.runtime.sendMessage({kind: 'setProfileIndex', payload: this.profileIndex});
+        // Becauset the popup state resets every time it open, we use null as a guard. That way
+        // whenever the user opens the popup, it doesn't automatically reset the current profile
+        if (this.profileIndex !== null) {
+            await browser.runtime.sendMessage({kind: 'setProfileIndex', payload: this.profileIndex});
+        }
     },
 
-    async deleteSite(index) {
-        let newSites = [...this.hosts];
-        newSites.splice(index, 1);
-        this.hosts = newSites;
+    async getPrivKey() {
+        this.privKey = await browser.runtime.sendMessage({kind: 'getPrivKey'});
     },
 
     async getPubKey() {
-        this.pubKey = await browser.runtime.sendMessage({kind: 'getPubKey', payload: this.activeProfile.privKey});
+        this.pubKey = await browser.runtime.sendMessage({kind: 'getPubKey'});
+    },
+
+    async getHosts() {
+        this.hosts = await browser.runtime.sendMessage({kind: 'getHosts'});
+    },
+
+    async getProfileNames() {
+        this.profileNames = await browser.runtime.sendMessage({kind: 'getProfileNames'});
+    },
+
+    async getName() {
+        this.name = await browser.runtime.sendMessage({kind: 'getName'});
+    },
+
+    async getProfileIndex() {
+        this.profileIndex = await browser.runtime.sendMessage({kind: 'getProfileIndex'});
     },
 
     async newProfile() {
-        const newIndex = await browser.runtime.sendMessage({kind: 'newProfile'});
-        await this.setProfileByIndex(newIndex);
+        let newIndex = await browser.runtime.sendMessage({kind: 'newProfile'});
+        await this.refreshProfile();
+        this.profileIndex = newIndex;
     },
 
+    // Properties
+
     get hasValidPubKey() {
         return typeof(this.pubKey) === 'string' && this.pubKey.length > 0;
     },
-
-    get hosts() {
-        return this.activeProfile.hosts;
-    },
-
-    set hosts(value) {
-        this.activeProfile.hosts = value;
-    }
 }));
 
 
-Alpine.start();
+Alpine.start();