fix: broken websockets

src/background.js

@@ -1,43 +1,15 @@
 /* eslint-disable no-undef */
 import browser from "webextension-polyfill";
-import ReconnectingWebSocket from "reconnecting-websocket";
 import axios from "axios";
+import setupRws from "./rws";
 import store from "./store";
 import config from "./config";
 
 browser.runtime.onInstalled.addListener(() => {
   browser.tabs.create({});
 });
 
-let rws;
-const setupRws = () => {
-  // eslint-disable-next-line no-console
-  console.log("setupRws() called");
-  if (rws) rws.close();
-  rws = new ReconnectingWebSocket(
-    `wss://api.getmakerlog.com/stream/?token=${store.state.token}`
-  );
-  // eslint-disable-next-line no-console
-  rws.onmessage = (e) => {
-    const data = JSON.parse(e.data);
-    switch (data.type) {
-      case "task.created":
-        store.commit("ADD_TASK", data.payload);
-        break;
-      case "task.deleted":
-        store.commit("DELETE_TASK", data.payload);
-        break;
-      case "task.updated":
-        store.commit("UPDATE_TASK", data.payload);
-        break;
-      default:
-        // eslint-disable-next-line no-console
-        console.log("rws other event catched", data.payload);
-        break;
-    }
-  };
-};
-
+// eslint-disable-next-line import/prefer-default-export
 const setup = async () => {
   axios.defaults.baseURL = config.makerlogApiUrl;
 
@@ -46,13 +18,13 @@ const setup = async () => {
     // Set token in axios headers
     axios.defaults.headers.common.Authorization = `Token ${store.state.token}`;
 
-    setupRws();
-
     // Reload user when background.js runs for the first time
-    store.dispatch("getUser");
+    await store.dispatch("getUser");
 
     // Load tasks when background.js runs for the first time
-    store.dispatch("getTasks");
+    await store.dispatch("getTasks");
+
+    setupRws();
   }
 };
 

src/rws.js

@@ -0,0 +1,35 @@
+import ReconnectingWebSocket from "reconnecting-websocket";
+
+import store from "./store";
+
+let rws;
+
+const setupRws = () => {
+  // eslint-disable-next-line no-console
+  console.log("setupRws() called");
+  if (rws) rws.close();
+  rws = new ReconnectingWebSocket(
+    `wss://api.getmakerlog.com/users/${store.state.user.id}/stream/`
+  );
+  // eslint-disable-next-line no-console
+  rws.onmessage = (e) => {
+    const data = JSON.parse(e.data);
+    switch (data.type) {
+      case "task.created":
+        store.commit("ADD_TASK", data.payload);
+        break;
+      case "task.deleted":
+        store.commit("DELETE_TASK", data.payload);
+        break;
+      case "task.updated":
+        store.commit("UPDATE_TASK", data.payload);
+        break;
+      default:
+        // eslint-disable-next-line no-console
+        console.log("rws other event catched", data.payload);
+        break;
+    }
+  };
+};
+
+export default setupRws;

src/store/index.js

@@ -8,6 +8,7 @@ import browser from "webextension-polyfill";
 import sharedMutations from "vuex-shared-mutations";
 import config from "../config";
 import task from "./modules/task";
+import setupRws from "../rws";
 
 axios.defaults.baseURL = config.makerlogApiUrl;
 
@@ -46,7 +47,7 @@ export default new Vuex.Store({
     },
   },
   actions: {
-    async auth({ commit, dispatch }, credentials) {
+    async auth({ commit, dispatch, state }, credentials) {
       try {
         const resp = await axios({
           method: "post",
@@ -60,8 +61,10 @@ export default new Vuex.Store({
           axios.defaults.headers.common.Authorization = `Token ${token}`;
           axios.defaults.baseURL = config.makerlogApiUrl;
           commit("SET_TOKEN", token);
+          console.log(token);
           await dispatch("getUser");
           await dispatch("getTasks");
+          setupRws();
           if (resp.status === 200) return true;
           return false;
         }