phase 1

popup/popup.js

@@ -1,105 +1,119 @@
-const apiKeyRegex = /sk-[a-zA-Z0-9]{48}/;
-
-const settings = [
-  { key: "textCompletion", name: "text-completion" },
-  { key: "textImprovement", name: "text-improvement" },
-  { key: "textAsk", name: "text-ask" },
-];
+const apiKeyRegex = /sk-[a-zA-Z0-9]{48}/
 
 function addMessage(message) {
-  $("#message-box").append(`<div class="message">${message}</div>`);
+  $('#message-box').append(`<div class="message">${message}</div>`)
 }
 
 function addErrorMessage(message) {
-  $("#message-box").append(`<div class="error">${message}</div>`);
+  $('#message-box').append(`<div class="error">${message}</div>`)
 }
 
 function clearMessages() {
-  $("#message-box").empty();
+  $('#message-box').empty()
+}
+
+
+/**
+ * Set a setting in storage {@link https://developer.chrome.com/docs/extensions/reference/storage/#type-StorageArea:~:text=to%20the%20callback.-,set,-void}
+ * @param key
+ * @param value
+ * @param callback
+ */
+async function setSetting(key, value, callback = null) {
+  let obj = {}
+  obj[key] = value
+  chrome.storage.local.set(obj, callback).catch(error => {
+    console.log(`Failed to set ${key} setting. Error: ${error}`)
+  })
+}
+
+/**
+ * Get a setting from storage
+ * @param {string | string[] | object} [keys=null] - The keys to get (see {@link https://developer.chrome.com/docs/extensions/reference/storage/#usage})
+ * @param {function} [callback=null] - Callback function
+ */
+async function getSetting(keys = null, callback = null) {
+  return chrome.storage.local.get(keys, callback)
 }
 
 async function refreshStorage() {
-  chrome.storage.local.get("openAIAPIKey").then(({ openAIAPIKey }) => {
-    $("#api-token-form .api-token-status").text(chrome.runtime.lastError || !openAIAPIKey ? "not set" : "set");
-  });
+  getSetting('openAIAPIKey').then(({ openAIAPIKey }) => {
+    $('#api-token-form .api-token-status').text(chrome.runtime.lastError || !openAIAPIKey ? 'not set' : 'set')
+  })
 
-  chrome.storage.local.get(settings.map(({ key }) => key)).then((storage) => {
-    settings.forEach(({ key, name }) => {
-      $(`#settings-form input[name='${name}']:checkbox`).prop("checked", storage[key]);
-    });
-  });
+  getSetting(['Improve', 'Complete', 'Ask']).then(settings =>
+    settings.forEach(({ key, shortcut, status }) => {
+    if (status === 'error') {
+      addErrorMessage(`${shortcut} could not be bound for the ${key} command. You can set it manually at chrome://extensions/shortcuts.`)
+    }
+    $(`#settings-form input[name='text-${key}']:checkbox`).prop('checked', status === 'checked')
+  }))
 }
 
 async function handleAPITokenSet(event) {
-  event.preventDefault();
-  event.stopPropagation();
+  event.preventDefault()
+  event.stopPropagation()
 
-  clearMessages();
+  clearMessages()
 
-  const input = $("#api-token-form").find("input[name='api-token']");
-  const openAIAPIKey = input.val();
-  input.val("");
+  const input = $('#api-token-form').find('input[name=\'api-token\']')
+  const openAIAPIKey = input.val()
+  input.val('')
 
   if (!openAIAPIKey || !apiKeyRegex.test(openAIAPIKey)) {
-    addErrorMessage("Invalid API Token.");
-    return;
+    addErrorMessage('Invalid API Token.')
+    return
   }
 
   try {
-    await chrome.storage.local.set({ openAIAPIKey });
+    await chrome.storage.local.set({ openAIAPIKey })
   } catch (error) {
-    console.log(error);
-    addErrorMessage("Failed to set API Token.");
-    return;
+    console.log(error)
+    addErrorMessage('Failed to set API Token.')
+    return
   }
 
-  await refreshStorage();
+  await refreshStorage()
 }
 
 async function handleAPITokenClear(event) {
-  event.preventDefault();
-  event.stopPropagation();
+  event.preventDefault()
+  event.stopPropagation()
 
-  clearMessages();
+  clearMessages()
 
   try {
-    await chrome.storage.local.remove("openAIAPIKey");
+    await chrome.storage.local.remove('openAIAPIKey')
   } catch (error) {
-    console.log(error);
-    addErrorMessage("Failed to remove API Token.");
-    return;
+    console.log(error)
+    addErrorMessage('Failed to remove API Token.')
+    return
   }
 
-  await refreshStorage();
+  await refreshStorage()
 }
 
 function makeHandleSettingChange(key) {
   return async (event) => {
-    event.preventDefault();
-    event.stopPropagation();
+    event.preventDefault()
+    event.stopPropagation()
+    clearMessages()
 
-    clearMessages();
-
-    const value = event.target.checked;
-
-    try {
-      await chrome.storage.local.set({ [key]: value });
-    } catch (error) {
-      console.log(error);
-      addErrorMessage(`Failed to set ${key} setting.`);
-      return;
-    }
-
-    await refreshStorage();
-  };
+    const value = event.target.checked
+    getSetting(key).then(setting => {
+      setting.status = value ? 'checked' : 'unchecked'
+      setSetting(setting.key, setting)
+    })
+    // await refreshStorage()
+  }
 }
 
 $(document).ready(async function () {
-  $("#api-token-form .submit").on("click", handleAPITokenSet);
-  $("#api-token-form .clear").on("click", handleAPITokenClear);
+  $('#api-token-form .submit').on('click', handleAPITokenSet)
+  $('#api-token-form .clear').on('click', handleAPITokenClear)
 
-  settings.forEach(({ key, name }) =>
-    $(`#settings-form input[name='${name}']:checkbox`).on("change", makeHandleSettingChange(key))
-  );
-  await refreshStorage();
-});
+  getSetting(['Improve', 'Complete', 'Ask']).forEach(key => {
+    $(`#settings-form input[name='text-${name}']:checkbox`).on('change', makeHandleSettingChange(key))
+  })
+  return refreshStorage()
+})