From fdfd982d47c3d7ee4f93935f814c4907728e9699 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Fri, 26 Oct 2018 21:40:11 +0200
Subject: [PATCH] Use axios for all ajax requests

---
 .../Assets/js/components/AjaxContent.vue      | 10 +++++++--
 .../Private/Assets/js/components/Calendar.vue | 12 ++++++++---
 .../js/components/DestinationAutocomplete.vue | 13 +++++++++---
 .../Assets/js/components/SearchBar.vue        | 21 ++++++++++++-------
 .../Assets/js/components/SearchBox.vue        | 20 ++++++++++++------
 .../Assets/js/components/SearchResult.vue     | 15 +++++++++----
 .../Assets/js/components/Watchlist.vue        | 15 ++++++++++---
 7 files changed, 78 insertions(+), 28 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/AjaxContent.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/AjaxContent.vue
index ec659c7b..87c1bd31 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/AjaxContent.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/AjaxContent.vue
@@ -8,6 +8,7 @@
 </template>
 <script>
     import $ from 'jquery'
+    import axios from 'axios'
     import EventBus from '../_bus'
     const $window = $(window);
 
@@ -22,11 +23,16 @@
         props: [ 'uri', 'loaderUri' ],
         methods: {
             loadContent () {
-                $.get(this.uri, (html) => {
+                axios({
+                    url: this.uri,
+                    responseType: 'text'
+                }).then((response) => {
                     this.loading = false;
-                    this.html = html;
+                    this.html = response.data;
                     $(this.$refs.trigger).remove();
                     EventBus.$emit('ajaxContentLoaded');
+                }).catch(() => {
+                    this.loading = false;
                 });
             },
             isInViewport ($triggerElement) {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
index 41d5e7c8..bdc91a15 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Calendar.vue
@@ -25,7 +25,7 @@
 </template>
 <script>
     import Vue from 'vue'
-    import $ from 'jquery'
+    import axios from 'axios'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
@@ -85,8 +85,14 @@
                 query[this.argumentPrefix + '[months]'] = this.months;
                 this.loading = true;
                 this.showPrev = this.startDate.isAfter(dayjs());
-                $.get(this.uri, query, (html) => {
-                    this.calendarHtml = html;
+                axios({
+                    url: this.uri,
+                    responseType: 'text',
+                    params: query
+                }).then((response) => {
+                    this.calendarHtml = response.data;
+                    this.loading = false;
+                }).catch(() => {
                     this.loading = false;
                 });
             },
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DestinationAutocomplete.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DestinationAutocomplete.vue
index a1703436..23995c9a 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DestinationAutocomplete.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DestinationAutocomplete.vue
@@ -26,6 +26,7 @@
 
 <script>
     import $ from 'jquery'
+    import axios from 'axios'
 
     export default {
         props: {
@@ -74,14 +75,20 @@
                 let query = {};
                 query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
                 query[this.argumentPrefix + '[search]'] = this.destination;
-                $.post(this.ajaxUri, query, (json) => {
-                    this.autocompleteOptions = json;
+                axios({
+                    url: this.ajaxUri,
+                    method: 'post',
+                    data: $.param(query)
+                }).then((response) => {
+                    this.autocompleteOptions = response.data;
                     this.showAutocompleteOptions = this.hasOptions();
                     if (this.showAutocompleteOptions) {
                         this.openDropdown();
                     }
                     this.loading = false;
-                }, 'json');
+                }).catch(() => {
+                    this.loading = false;
+                });
             },
             toggleOptions () {
                 if (!this.hasOptions()) {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBar.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBar.vue
index 2cb5eca6..37fde676 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBar.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBar.vue
@@ -1,5 +1,5 @@
 <script>
-    import $ from 'jquery'
+    import axios from 'axios'
     import DaterangeSelect from './DaterangeSelect.vue'
     import DestinationSelect from './DestinationSelect.vue'
     import PaxSelect from './PaxSelect.vue'
@@ -25,9 +25,13 @@
             loadOptions () {
                 const query = {};
                 query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
-                $.post(this.optionsUri, query, (json) => {
-                    this.applyOptions(json);
-                }, 'json');
+                axios({
+                    url: this.optionsUri,
+                    method: 'post',
+                    data: $.param(query)
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                });
             },
             applyOptions (json) {
                 this.filterOptions.totalResults = json.totalResults;
@@ -65,9 +69,12 @@
                 this.loadOptions();
             },
             resetDestination () {
-                $.post(this.resetUri, (json) => {
-                    this.searchParams = json.searchParams;
-                    this.applyOptions(json);
+                axios({
+                    url: this.resetUri,
+                    method: 'post'
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                    this.searchParams = response.data.searchParams;
                 });
             }
         }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBox.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBox.vue
index ce940824..6b20bc43 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBox.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchBox.vue
@@ -1,5 +1,6 @@
 <script>
     import $ from 'jquery'
+    import axios from 'axios'
     import DestinationSelect from './DestinationSelect.vue'
     import PriceRangeSelect from './PriceRangeSelect.vue'
 
@@ -19,9 +20,13 @@
             loadOptions () {
                 const query = {};
                 query[this.argumentPrefix + '[searchParams]'] = this.searchParams;
-                $.post(this.optionsUri, query, (json) => {
-                    this.applyOptions(json);
-                }, 'json');
+                axios({
+                    url: this.optionsUri,
+                    method: 'post',
+                    data: $.param(query)
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                });
             },
             applyOptions (json) {
                 this.filterOptions.totalResults = json.totalResults;
@@ -52,9 +57,12 @@
                 this.loadOptions();
             },
             resetDestination () {
-                $.post(this.resetUri, (json) => {
-                    this.searchParams = json.searchParams;
-                    this.applyOptions(json);
+                axios({
+                    url: this.resetUri,
+                    method: 'post'
+                }).then((response) => {
+                    this.applyOptions(response.data);
+                    this.searchParams = response.data.searchParams;
                 });
             }
         }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue
index a25088b3..68260f94 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue
@@ -1,6 +1,7 @@
 <script>
     import Vue from 'vue';
     import $ from 'jquery'
+    import axios from 'axios'
     import EventBus from '../_bus'
     import DaterangeSelect from './DaterangeSelect.vue'
     import DestinationCheckboxes from './DestinationCheckboxes.vue'
@@ -128,12 +129,18 @@
                 query[this.argumentPrefix + '[filterSettings]'] = this.filterSettings;
                 this.loading = true;
                 this.resultMeta = null;
-                $.post(this.resultsUri, query, (json) => {
-                    this.resultData = json.data;
-                    this.filterOptions = json.filterOptions;
-                    this.resultMeta = json.meta;
+                axios({
+                    url: this.resultsUri,
+                    method: 'post',
+                    data: $.param(query)
+                }).then((response) => {
+                    this.resultData = response.data.data;
+                    this.filterOptions = response.data.filterOptions;
+                    this.resultMeta = response.data.meta;
                     this.loading = false;
                     EventBus.$emit('ajaxContentLoaded');
+                }).catch(() => {
+                    this.loading = false;
                 });
             },
             resetFilterSettings () {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
index 13278ecb..e5067bdc 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
@@ -23,6 +23,7 @@
 
 <script>
     import Vue from 'vue'
+    import axios from 'axios'
     import EventBus from '../_bus'
     import SearchResultItem from './SearchResultItem.vue'
 
@@ -71,11 +72,19 @@
                 let query = {};
                 query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
                 this.loading = true;
-                $.post(this.watchlistUri, query, (json) => {
-                    this.teasers = json.data;
-                    this.total = json.total;
+                axios({
+                    url: this.watchlistUri,
+                    headers: {
+                        'Accept': 'application/json'
+                    },
+                    params: query
+                }).then((response) => {
+                    this.teasers = response.data.data;
+                    this.total = response.data.total;
                     this.loading = false;
                     EventBus.$emit('ajaxContentLoaded');
+                }).catch(() => {
+                    this.loading = false;
                 });
             }
         },