Merge pull request #145 from nextcloud/techdebt/noid/move-to-src-and-import

Move to src/, import and axios

12 files changed, 176 insertions, 210 deletions

diff --git a/js-src/app.js b/js-src/app.js
deleted file mode 100644
index 879c161..0000000
--- a/js-src/app.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * @copyright (c) 2016 Joas Schilling <coding@schilljs.com>
- * @copyright (c) 2015 Tom Needham <tom@owncloud.com>
- *
- * @author Tom Needham <tom@owncloud.com>
- * @author Joas Schilling <coding@schilljs.com>
- *
- * This file is licensed under the Affero General Public License version 3 or
- * later. See the COPYING file.
- */
-
-/* global OC, OCA, $, _, t, oc_config, define, console */
-
-define(function (require) {
-	"use strict";
-
-	return {
-
-		/** @type {number} */
-		pollInterval: 30000, // milliseconds
-
-		/** @type {number|null} */
-		interval: null,
-
-		/** @type {Vue|null} */
-		vm: null,
-
-		/**
-		 * Initialise the app
-		 */
-		initialise: function() {
-
-			// Add to the UI
-			$('form.searchbox').after($('<div>').attr('id', 'notifications'));
-
-			// Setup Vue
-			var Vue = require('vue');
-			Vue.mixin({
-				methods: {
-					t: function(app, text, vars, count, options) {
-						return OC.L10N.translate(app, text, vars, count, options);
-					},
-					n: function(app, textSingular, textPlural, count, vars, options) {
-						return OC.L10N.translatePlural(app, textSingular, textPlural, count, vars, options);
-					}
-				}
-			});
-
-			this.vm = new Vue(require('./components/root.vue'));
-
-			// Initial call to the notification endpoint
-			this._fetch();
-
-			// Setup the background checker
-			if (oc_config.session_keepalive) {
-				this.interval = setInterval(this._backgroundFetch.bind(this), this.pollInterval);
-			}
-		},
-
-		/**
-		 * Performs the AJAX request to retrieve the notifications
-		 */
-		_fetch: function() {
-			var request = $.ajax({
-				url: OC.linkToOCS('apps/notifications/api/v2', 2) + 'notifications',
-				type: 'GET',
-				beforeSend: function (request) {
-					request.setRequestHeader('Accept', 'application/json');
-				}
-			});
-
-			request.done(function(data, statusText, xhr) {
-				if (xhr.status === 204) {
-					// 204 No Content - Intercept when no notifiers are there.
-					this._shutDownNotifications();
-				} else if (!_.isUndefined(data) && !_.isUndefined(data.ocs) && !_.isUndefined(data.ocs.data) && _.isArray(data.ocs.data)) {
-					this.vm.notifications = data.ocs.data;
-				} else {
-					console.debug("data.ocs.data is undefined or not an array");
-				}
-			}.bind(this));
-			request.fail(function(xhr) {
-				if (xhr.status === 503) {
-					// 503 - Maintenance mode
-					console.debug('Shutting down notifications: instance is in maintenance mode.');
-				} else if (xhr.status === 404) {
-					// 404 - App disabled
-					console.debug('Shutting down notifications: app is disabled.');
-				} else {
-					console.error('Shutting down notifications: [' + xhr.status + '] ' + xhr.statusText);
-				}
-
-				this._shutDownNotifications();
-			}.bind(this));
-		},
-
-		_backgroundFetch: function() {
-			this.vm.backgroundFetching = true;
-			this._fetch();
-		},
-
-		/**
-		 * The app was disabled or has no notifiers, so we can stop polling
-		 * And hide the UI as well
-		 */
-		_shutDownNotifications: function() {
-			window.clearInterval(this.interval);
-			this.vm.shutdown = true;
-		}
-	};
-});
diff --git a/js-src/components/action.vue b/js-src/components/action.vue
deleted file mode 100644
index 56607c0..0000000
--- a/js-src/components/action.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-	<button class="action-button pull-right" :class="{ primary: primary }"
-		:data-type="type" :data-href="link" @click="onClickActionButton">{{label}}</button>
-</template>
-
-<script>
-	export default {
-		name: "action",
-
-		props: [
-			'label',
-			'link',
-			'type',
-			'primary'
-		],
-
-		methods: {
-			onClickActionButton: function () {
-				$.ajax({
-					url: this.link,
-					type: this.type || 'GET',
-					success: function () {
-						this.$parent._$el.fadeOut(OC.menuSpeed);
-						this.$parent.$emit('remove');
-						$('body').trigger(new $.Event('OCA.Notification.Action', {
-							notification: this.$parent,
-							action: {
-								url: this.link,
-								type: this.type || 'GET'
-							}
-						}));
-					}.bind(this),
-					error: function () {
-						OC.Notification.showTemporary(t('notifications', 'Failed to perform action'));
-					}
-				});
-			}
-		}
-	}
-</script>
diff --git a/package-lock.json b/package-lock.json
index 49af7ef..0865c60 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -522,6 +522,15 @@
         "postcss-value-parser": "^3.2.3"
       }
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -2499,6 +2508,24 @@
         "readable-stream": "^2.0.4"
       }
     },
+    "follow-redirects": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.1.tgz",
+      "integrity": "sha512-v9GI1hpaqq1ZZR6pBD1+kI7O24PhDvNGNodjS3MdcEqyrahCp8zbtpv+2B/krUnSmUH80lbAS7MrdeK5IylgKg==",
+      "requires": {
+        "debug": "^3.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2583,14 +2610,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2605,20 +2630,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2735,8 +2757,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2748,7 +2769,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2763,7 +2783,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -2771,14 +2790,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -2797,7 +2814,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2878,8 +2894,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2891,7 +2906,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3013,7 +3027,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3549,8 +3562,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-data-descriptor": {
       "version": "0.1.4",
@@ -4067,8 +4079,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "mute-stream": {
       "version": "0.0.7",
diff --git a/package.json b/package.json
index ae80e29..ea6f4a4 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,12 @@
   "license": "agpl",
   "private": true,
   "scripts": {
-    "dev": "webpack --config js-src/webpack.dev.js",
-    "watch": "webpack --progress --watch --config js-src/webpack.dev.js",
-    "build": "webpack --progress --hide-modules --config js-src/webpack.prod.js"
+    "dev": "webpack --config src/webpack.dev.js",
+    "watch": "webpack --progress --watch --config src/webpack.dev.js",
+    "build": "webpack --progress --hide-modules --config src/webpack.prod.js"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vue": "^2.5.16"
   },
   "browserslist": [
diff --git a/js-src/components/root.vue b/src/App.vue
index 2e3bb8c..1b890e7 100644
--- a/js-src/components/root.vue
+++ b/src/App.vue
@@ -18,17 +18,24 @@
 </template>
 
 <script>
-	export default {
-		name: "root",
+	import notification from './components/notification';
+	import axios from 'axios';
 
-		el: '#notifications',
+	export default {
+		name: 'app',
 
 		data: function () {
 			return {
 				hadNotifications: false,
 				backgroundFetching: false,
 				shutdown: false,
-				notifications: []
+				notifications: [],
+
+				/** @type {number} */
+				pollInterval: 30000, // milliseconds
+
+				/** @type {number|null} */
+				interval: null,
 			};
 		},
 
@@ -55,24 +62,67 @@
 
 		methods: {
 			onDismissAll: function() {
-				$.ajax({
-					url: OC.linkToOCS('apps/notifications/api/v2', 2) + 'notifications',
-					type: 'DELETE',
-					success: function () {
+				axios
+					.delete(OC.linkToOCS('apps/notifications/api/v2', 2) + 'notifications', { headers: { requesttoken: OC.requestToken } })
+					.then(response => {
 						this.notifications = [];
-					}.bind(this),
-					error: function () {
+					})
+					.catch(err => {
 						OC.Notification.showTemporary(t('notifications', 'Failed to dismiss all notifications'));
-					}
-				});
+					});
 			},
 			onRemove: function(index) {
 				this.notifications.splice(index, 1);
+			},
+
+			/**
+			 * Performs the AJAX request to retrieve the notifications
+			 */
+			_fetch: function() {
+				axios
+					.get(OC.linkToOCS('apps/notifications/api/v2', 2) + 'notifications', { headers: { requesttoken: OC.requestToken } })
+					.then(response => {
+						if (response.status === 204) {
+							// 204 No Content - Intercept when no notifiers are there.
+							this._shutDownNotifications();
+						} else if (!_.isUndefined(response.data) && !_.isUndefined(response.data.ocs) && !_.isUndefined(response.data.ocs.data) && _.isArray(response.data.ocs.data)) {
+							this.notifications = response.data.ocs.data;
+						} else {
+							console.debug("data.ocs.data is undefined or not an array");
+						}
+					})
+					.catch(err => {
+						if (err.response.status === 503) {
+							// 503 - Maintenance mode
+							console.debug('Shutting down notifications: instance is in maintenance mode.');
+						} else if (err.response.status === 404) {
+							// 404 - App disabled
+							console.debug('Shutting down notifications: app is disabled.');
+						} else {
+							console.error('Shutting down notifications: [' + err.response.status + '] ' + err.response.statusText);
+						}
+
+						this._shutDownNotifications();
+					});
+			},
+
+			_backgroundFetch: function() {
+				this.backgroundFetching = true;
+				this._fetch();
+			},
+
+			/**
+			 * The app was disabled or has no notifiers, so we can stop polling
+			 * And hide the UI as well
+			 */
+			_shutDownNotifications: function() {
+				window.clearInterval(this.interval);
+				this.shutdown = true;
 			}
 		},
 
 		components: {
-			'notification': require('./notification.vue')
+			notification
 		},
 
 		mounted: function () {
@@ -80,6 +130,14 @@
 
 			// Bind the button click event
 			OC.registerMenu($(this.$refs.button), $(this.$refs.container), undefined, true);
+
+			// Initial call to the notification endpoint
+			this._fetch();
+
+			// Setup the background checker
+			if (oc_config.session_keepalive) {
+				this.interval = setInterval(this._backgroundFetch.bind(this), this.pollInterval);
+			}
 		},
 
 		updated: function() {
diff --git a/src/components/action.vue b/src/components/action.vue
new file mode 100644
index 0000000..1c89c12
--- /dev/null
+++ b/src/components/action.vue
@@ -0,0 +1,42 @@
+<template>
+	<button class="action-button pull-right" :class="{ primary: primary }"
+		:data-type="type" :data-href="link" @click="onClickActionButton">{{label}}</button>
+</template>
+
+<script>
+	import axios from 'axios';
+	export default {
+		name: 'action',
+
+		props: [
+			'label',
+			'link',
+			'type',
+			'primary'
+		],
+
+		methods: {
+			onClickActionButton: function () {
+				axios({
+					method: this.type || 'GET',
+					url: this.link,
+					headers: { requesttoken: OC.requestToken }
+				})
+				.then(response => {
+					this.$parent._$el.fadeOut(OC.menuSpeed);
+					this.$parent.$emit('remove');
+					$('body').trigger(new $.Event('OCA.Notification.Action', {
+						notification: this.$parent,
+						action: {
+							url: this.link,
+							type: this.type || 'GET'
+						}
+					}));
+				})
+				.catch(err => {
+					OC.Notification.showTemporary(t('notifications', 'Failed to perform action'));
+				});
+			}
+		}
+	}
+</script>
diff --git a/js-src/components/notification.vue b/src/components/notification.vue
index 4be15e6..1d904a5 100644
--- a/js-src/components/notification.vue
+++ b/src/components/notification.vue
@@ -23,10 +23,12 @@
 </template>
 
 <script>
-	var parser = require('../richObjectStringParser');
+	import axios from 'axios';
+	import action from './action';
+	import parser from '../richObjectStringParser';
 
 	export default {
-		name: "notification",
+		name: 'notification',
 
 		props: [
 			'notification_id',
@@ -94,17 +96,17 @@
 			},
 
 			onDismissNotification: function() {
-				$.ajax({
-					url: OC.linkToOCS('apps/notifications/api/v2', 2) + 'notifications/' + this.notification_id,
-					type: 'DELETE',
-					success: function () {
+				axios
+					.delete(OC.linkToOCS('apps/notifications/api/v2', 2) + 'notifications/' + this.notification_id,
+						{ headers: { requesttoken: OC.requestToken } }
+					)
+					.then(response => {
 						this._$el.fadeOut(OC.menuSpeed);
 						this.$emit('remove');
-					}.bind(this),
-					error: function () {
+					})
+					.catch(err => {
 						OC.Notification.showTemporary(t('notifications', 'Failed to dismiss notification'));
-					}
-				});
+					});
 			},
 
 			/**
@@ -185,7 +187,7 @@
 		},
 
 		components: {
-			'action': require('./action.vue')
+			action
 		}
 	}
 </script>
diff --git a/js-src/init.js b/src/init.js
index 7730aff..5d77ca7 100644
--- a/js-src/init.js
+++ b/src/init.js
@@ -18,14 +18,17 @@
  *
  */
 
-/* global define, $ */
+import Vue from 'vue';
+import App from './App';
 
-define(function(require) {
-	'use strict';
+Vue.prototype.t = t;
+Vue.prototype.n = n;
+Vue.prototype.OC = OC;
+Vue.prototype.OCA = OCA;
 
-	var App = require('./app');
+$('form.searchbox').after($('<div>').attr('id', 'notifications'));
 
-	$(function() {
-		App.initialise();
-	});
+new Vue({
+	el: '#notifications',
+	render: h => h(App)
 });
diff --git a/js-src/richObjectStringParser.js b/src/richObjectStringParser.js
index 8cfaa5b..8cfaa5b 100644
--- a/js-src/richObjectStringParser.js
+++ b/src/richObjectStringParser.js
diff --git a/js-src/webpack.common.js b/src/webpack.common.js
index c81f24e..c81f24e 100644
--- a/js-src/webpack.common.js
+++ b/src/webpack.common.js
diff --git a/js-src/webpack.dev.js b/src/webpack.dev.js
index c4d7cf1..c4d7cf1 100644
--- a/js-src/webpack.dev.js
+++ b/src/webpack.dev.js
diff --git a/js-src/webpack.prod.js b/src/webpack.prod.js
index 672b9c6..672b9c6 100644
--- a/js-src/webpack.prod.js
+++ b/src/webpack.prod.js