Extract preferences into a separate class and source file

options/index.html

@@ -26,6 +26,7 @@
     <button type="submit">Save</button>
   </p>
 </form>
+<script src="../src/preferences.js"></script>
 <script src="../src/options.js"></script>
 </body>
 </html>

src/options.js

@@ -1,41 +1,29 @@
+/* global Preferences */
 'use strict'
 
+const preferences = new Preferences()
+
 const getOptionsForm = () => document.getElementById('optionsForm')
-const getStorage = () => browser.storage.sync
 
 const saveForm = event => {
   event.preventDefault()
 
   const optionsForm = getOptionsForm()
-  const userAccessToken = optionsForm.elements['userAccessToken'].value
-  const trackerSubmitUrl = optionsForm.elements['trackerSubmitUrl'].value
-
-  getStorage().set({userAccessToken, trackerSubmitUrl}).catch(
-    error => {
-      const message = `Error saving preferences: ${error}`
-      window.console.error(message)
-      window.alert(message)
-    }
-  )
+  preferences.userAccessToken = optionsForm.elements['userAccessToken'].value
+  preferences.trackerSubmitUrl = optionsForm.elements['trackerSubmitUrl'].value
+  preferences.save()
 }
 
 const initForm = () => {
   const optionsForm = getOptionsForm()
   optionsForm.addEventListener('submit', saveForm)
 
-  getStorage().get(null).then(
-    results => {
-      if (Object.prototype.hasOwnProperty.call(results, 'userAccessToken')) {
-        optionsForm.elements['userAccessToken'].value = results.userAccessToken
-      }
-      if (Object.prototype.hasOwnProperty.call(results, 'trackerSubmitUrl')) {
-        optionsForm.elements['trackerSubmitUrl'].value = results.trackerSubmitUrl
-      }
-    },
-    error => {
-      const message = `Error loading preferences: ${error}`
-      window.console.error(message)
-      window.alert(message)
+  preferences.load().then(
+    () => {
+      window.console.debug('[options] CALL preferences.load().then') // TODO tmp
+      window.console.debug('[options] preferences:', preferences) // TODO tmp
+      optionsForm.elements['userAccessToken'].value = preferences.userAccessToken
+      optionsForm.elements['trackerSubmitUrl'].value = preferences.trackerSubmitUrl
     }
   )
 }

src/preferences.js

@@ -0,0 +1,69 @@
+/* exported Preferences */
+'use strict'
+
+class Preferences {
+  constructor() {
+    this._userAccessToken = null
+    this._trackerSubmitUrl = null
+  }
+
+  get userAccessToken() {
+    return this._userAccessToken
+  }
+
+  set userAccessToken(value) {
+    this._userAccessToken = value
+  }
+
+
+  get trackerSubmitUrl() {
+    return this._trackerSubmitUrl
+  }
+
+  set trackerSubmitUrl(value) {
+    this._trackerSubmitUrl = value
+  }
+
+  get _storage() {
+    return browser.storage.sync
+  }
+
+  load() {
+    const storageGetter = this._storage.get(null)
+
+    storageGetter.then(
+      results => {
+        if (Object.prototype.hasOwnProperty.call(results, 'userAccessToken')) {
+          this.userAccessToken = results.userAccessToken
+        }
+        if (Object.prototype.hasOwnProperty.call(results, 'trackerSubmitUrl')) {
+          this.trackerSubmitUrl = results.trackerSubmitUrl
+        }
+      },
+      error => {
+        const message = `Error loading preferences: ${error}`
+        window.console.error(message)
+        window.alert(message)
+      }
+    )
+
+    return storageGetter
+  }
+
+  save() {
+    const storageSetter = this._storage.set({
+      userAccessToken: this.userAccessToken,
+      trackerSubmitUrl: this.trackerSubmitUrl
+    })
+
+    storageSetter.catch(
+      error => {
+        const message = `Error saving preferences: ${error}`
+        window.console.error(message)
+        window.alert(message)
+      }
+    )
+
+    return storageSetter
+  }
+}