Updated frontend dependencies

Started migration away from django-channels

front/package.json

@@ -16,55 +16,53 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "axios-auth-refresh": "^2.2.6",
-    "core-js": "^3.6.4",
-    "diff": "^4.0.1",
-    "django-channels": "1.1.6",
-    "focus-trap": "^5.1.0",
-    "fomantic-ui-css": "^2.8.3",
+    "axios-auth-refresh": "^3.1.0",
+    "core-js": "^3.12.1",
+    "diff": "^5.0.0",
+    "focus-trap": "^6.4.0",
+    "fomantic-ui-css": "^2.8.7",
     "howler": "^2.2.1",
-    "js-logger": "^1.4.1",
+    "js-logger": "^1.6.1",
     "lodash": "^4.17.21",
-    "moment": "^2.22.2",
-    "qs": "^6.7.0",
-    "register-service-worker": "^1.6.2",
+    "moment": "^2.29.1",
+    "qs": "^6.10.1",
+    "register-service-worker": "^1.7.2",
     "sanitize-html": "^2.3.3",
-    "sass": "^1.26.5",
+    "sass": "^1.32.12",
     "showdown": "^1.8.6",
-    "text-clipper": "^1.3.0",
-    "vue": "^2.6.10",
-    "vue-gettext": "^2.1.0",
+    "text-clipper": "^2.1.0",
+    "vue": "^2.6.12",
+    "vue-gettext": "^2.1.12",
     "vue-lazyload": "^1.2.6",
-    "vue-plyr": "^5.0.4",
-    "vue-router": "^3.0.1",
-    "vue-upload-component": "^2.8.11",
-    "vuedraggable": "^2.16.0",
-    "vuex": "^3.0.1",
-    "vuex-persistedstate": "^2.5.4",
+    "vue-plyr": "^7.0.0",
+    "vue-router": "^3.5.1",
+    "vue-upload-component": "^2.8.22",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "vuex-persistedstate": "^3.2.0",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.2.2",
-    "@vue/cli-plugin-eslint": "~4.2.2",
-    "@vue/cli-plugin-pwa": "~4.2.2",
-    "@vue/cli-plugin-unit-mocha": "~4.2.2",
-    "@vue/cli-service": "~4.2.2",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-plugin-pwa": "^4.5.13",
+    "@vue/cli-plugin-unit-mocha": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/test-utils": "^1.2.0",
     "babel-eslint": "^10.0.3",
-    "chai": "^4.1.2",
-    "easygettext": "^2.6.3",
-    "eslint": "^5.16.0",
-    "eslint-plugin-html": "^4.0.5",
-    "eslint-plugin-vue": "^6.1.2",
+    "chai": "^4.3.4",
+    "easygettext": "^2.17.0",
+    "eslint": "^7.26.0",
+    "eslint-plugin-html": "^6.1.2",
+    "eslint-plugin-vue": "^7.9.0",
     "glob-all": "^3.1.0",
-    "mocha": "^5.2.0",
+    "mocha": "^8.4.0",
     "mocha-junit-reporter": "^2.0.0",
     "moxios": "^0.4.0",
     "preload-webpack-plugin": "^3.0.0-beta.4",
-    "purgecss-webpack-plugin": "^1.6.0",
-    "sass-loader": "^8.0.2",
-    "sinon": "^6.1.5",
-    "vue-template-compiler": "^2.5.17",
+    "sass-loader": "^10.1.1",
+    "sinon": "^10.0.1",
+    "vue-template-compiler": "^2.6.12",
     "webpack-bundle-size-analyzer": "^3.0.0"
   },
   "eslintConfig": {

front/src/App.vue

@@ -37,10 +37,8 @@
 import Vue from 'vue'
 import axios from 'axios'
 import _ from '@/lodash'
-import {mapState, mapGetters, mapActions} from 'vuex'
-import { WebSocketBridge } from 'django-channels'
+import {mapState, mapGetters} from 'vuex'
 import GlobalEvents from '@/components/utils/global-events'
-import moment from  'moment'
 import locales from './locales'
 import {getClientOnlyRadio} from '@/radios'
 
@@ -219,7 +217,6 @@ export default {
     autodetectLanguage () {
       let userLanguage = navigator.language || navigator.userLanguage
       let available = locales.locales.map(e => { return e.code })
-      let self = this
       let candidate
       let matching = available.filter((a) => {
         return userLanguage.replace('-', '_') === a
@@ -240,7 +237,7 @@ export default {
       if (!this.bridge) {
         return
       }
-      this.bridge.socket.close(1000, 'goodbye', {keepClosed: true})
+      this.bridge.close()
     },
     openWebsocket () {
       if (!this.$store.state.auth.authenticated) {
@@ -250,21 +247,19 @@ export default {
       let self = this
       let token = this.$store.state.auth.token
       // let token = 'test'
-      const bridge = new WebSocketBridge()
-      this.bridge = bridge
       let url = this.$store.getters['instance/absoluteUrl'](`api/v1/activity?token=${token}`)
       url = url.replace('http://', 'ws://')
       url = url.replace('https://', 'wss://')
-      bridge.connect(
-        url,
-        [],
-        {reconnectInterval: 1000 * 60})
-      bridge.listen(function (event) {
+      const bridge = new WebSocket(url)
+      this.bridge = bridge
+      bridge.onmessage = function (event) {
+        console.log(event)
         self.$store.dispatch('ui/websocketEvent', event)
-      })
-      bridge.socket.addEventListener('open', function () {
+      }
+      bridge.onopen = function (event) {
+        console.log(event)
         console.log('Connected to WebSocket')
-      })
+      }
     },
     getTrackInformationText(track) {
       const trackTitle = track.title
@@ -342,6 +337,8 @@ export default {
     customStylesheets () {
       if (this.$store.state.instance.frontSettings) {
         return this.$store.state.instance.frontSettings.additionalStylesheets || []
+      } else {
+        return []
       }
     },
   },

front/src/service-worker.js

@@ -1,8 +1,11 @@
 // This is the code piece that GenerateSW mode can't provide for us.
 // This code listens for the user's confirmation to update the app.
-workbox.loadModule('workbox-routing');
-workbox.loadModule('workbox-strategies');
-workbox.loadModule('workbox-expiration');
+import { Route, Router, RegExpRoute } from 'workbox-routing';
+import NetworkFirst from 'workbox-strategies';
+import Plugin from 'workbox-expiration';
+import precacheAndRoute from 'workbox-precaching';
+import clientsClaim from 'workbox-core'
+
 
 self.addEventListener('message', (e) => {
   if (!e.data) {
@@ -15,14 +18,16 @@ self.addEventListener('message', (e) => {
       break;
     case 'serverChosen':
       self.registerServerRoutes(e.data.serverUrl)
+      break;
     default:
       // NOOP
       break;
   }
 });
-workbox.core.clientsClaim();
 
-const router = new workbox.routing.Router();
+clientsClaim();
+
+const router = new Router();
 router.addCacheListener()
 router.addFetchListener()
 
@@ -45,17 +50,17 @@ self.registerServerRoutes = (serverUrl) => {
   var networkFirstExcludedPaths = [
     'api/v1/listen'
   ]
-  var strategy = new workbox.strategies.NetworkFirst({
+  var strategy = new NetworkFirst({
     cacheName: "api-cache:" + serverUrl,
     plugins: [
-      new workbox.expiration.Plugin({
+      new Plugin({
         maxAgeSeconds: 24 * 60 * 60 * 7,
       }),
     ]
   })
   var networkFirstRoutes = networkFirstPaths.map((path) => {
     var regex = new RegExp(regexReadyServerUrl + path)
-    return new workbox.routing.RegExpRoute(regex, () => {})
+    return new RegExpRoute(regex, () => {})
   })
   var matcher = ({url, event}) => {
     for (let index = 0; index < networkFirstExcludedPaths.length; index++) {
@@ -77,7 +82,7 @@ self.registerServerRoutes = (serverUrl) => {
     return false
   }
 
-  var route = new workbox.routing.Route(matcher, strategy)
+  var route = new Route(matcher, strategy)
   console.log('[sw] registering new API route...', route)
   router.registerRoute(route)
   registeredServerRoutes.push(route)
@@ -87,4 +92,4 @@ self.registerServerRoutes = (serverUrl) => {
 self.__precacheManifest = [].concat(self.__precacheManifest || []);
 
 // workbox.precaching.suppressWarnings(); // Only used with Vue CLI 3 and Workbox v3.
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+precacheAndRoute(self.__precacheManifest, {});

front/src/utils.js

@@ -10,7 +10,7 @@ export function setUpdate(obj, statuses, value) {
 export function parseAPIErrors(responseData, parentField) {
   let errors = []
   for (var field in responseData) {
-    if (responseData.hasOwnProperty(field)) {
+    if (responseData.prototype.hasOwnProperty.call(field)) {
       let value = responseData[field]
       let fieldName = lodash.startCase(field.replace('_', ' '))
       if (parentField) {