Syncrhonize apiClient with chrome storage

src/js/api/Client.js

@@ -1,65 +1,62 @@
-import axios from 'axios'
+import axios from "axios"
 
 class Client {
   constructor() {
-    // this.warningPresent = false
+    this.client = axios.create({
-    this.client = axios.create({responseType: 'json', headers: {'x-client-version': this.clientVersion()}})
+      responseType: "json"
-    // this.client.interceptors.response.use(this.forceUpdateInterceptor)
+    })
   }
 
-  // csrfToken() {
+  registerStorage(storage) {
-  //   return document.getElementsByName('csrf-token')[0].getAttribute('content')
+    storage.sync.get(["subdomain", "apiKey"], store => {
-  // }
+      this.setSubdomain(store.subdomain)
+      this.setCredentials(store.apiKey)
+    })
 
-  clientVersion() {
+    storage.onChanged.addListener(({ subdomain, apiKey }) => {
-    return "1.0.0"
+      subdomain && this.setSubdomain(subdomain.newValue)
-    // FIXME: on server sync with real version numbers return chrome.runtime.getManifest().version
+      apiKey && this.setCredentials(apiKey.newValue)
+    })
   }
 
-  // clientVersionMajor() {
+  setSubdomain(subdomain) {
-  //   const [major] = this.clientVersion().split('.')
+    this.client.defaults.baseURL = `https://${encodeURIComponent(
-  //   return parseInt(major)
+      subdomain
-  // }
+    )}.mocoapp.com/api/v1`
+  }
 
-  // forceUpdateInterceptor = (response) => {
+  setCredentials(apiKey) {
-  //   const [serverMajor] = response.headers['x-moco-version'].split('.')
+    this.client.defaults.headers.common[
+      "Authorization"
+    ] = `Token token=${encodeURIComponent(apiKey)}`
+  }
 
-  //   // if (parseInt(serverMajor) > this.clientVersionMajor() && !this.warningPresent) {
+  setClientVersion(version) {
-  //   //   this.warningPresent = true
+    this.client.defaults.headers.common["x-client-version"] = version
-  //   // }
+  }
 
-  //   if (response.headers['x-moco-version'] != this.clientVersion())
+  get defaults() {
-  //     window.updateRequired = true
+    return this.client.defaults
-
+  }
-  //   return response
-  // }
 
   get(url, config = {}) {
     return this.client.get(url, config)
   }
 
   post(url, data) {
-    return this.client.post(url, data, {
+    return this.client.post(url, data)
-      // headers: {'x-csrf-token': this.csrfToken()}
-    })
   }
 
   put(url, data) {
-    return this.client.put(url, data, {
+    return this.client.put(url, data)
-      // headers: { 'x-csrf-token': this.csrfToken() }
-    })
   }
 
   patch(url, data) {
-    return this.client.patch(url, data, {
+    return this.client.patch(url, data)
-      // headers: { 'x-csrf-token': this.csrfToken() }
-    })
   }
 
   delete(url) {
-    return this.client.delete(url, {
+    return this.client.delete(url)
-      // headers: { 'x-csrf-token': this.csrfToken() }
-    })
   }
 }
 

src/js/background.js

@@ -1,15 +1,18 @@
 import DomainCheck from "./services/DomainCheck"
+import apiClient from "api/client"
 import config from "./config"
 
+apiClient.registerStorage(chrome.storage)
+apiClient.setClientVersion(chrome.runtime.getManifest().version)
+
 const domainCheck = new DomainCheck(config)
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  // inject files only after the page is fully loaded
+  // run only after the page is fully loaded
   if (changeInfo.status != "complete") {
     return
   }
 
-  // inject files only for supported services
   const service = domainCheck.match(tab.url)
 
   if (service) {

src/js/components/Setup.js

@@ -9,26 +9,28 @@ class Setup extends Component {
   @observable apiKey = ""
 
   componentDidMount() {
-    chrome.storage.sync.get(null, store => {
+    chrome.storage.sync.get(["subdomain", "apiKey"], store => {
       this.loading = false
       this.subdomain = store.subdomain || ""
-      this.apiKey = store.api_key || ""
+      this.apiKey = store.apiKey || ""
     })
   }
 
   // EVENTS
 
   onChange = event => {
-    this[event.target.name] = event.target.value
+    this[event.target.name] = event.target.value.trim()
   }
 
   onSubmit = _event => {
     chrome.storage.sync.set(
       {
-        subdomain: this.subdomain.trim(),
+        subdomain: this.subdomain,
-        api_key: this.apiKey.trim()
+        apiKey: this.apiKey
       },
-      () => window.close()
+      () => {
+        window.close()
+      }
     )
   }