From 138bb84ab6484a2c53ef3ce3b486850031c9a586 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Wed, 19 Dec 2018 19:07:17 +0100
Subject: [PATCH] Implement global store, refactor session handling

---
 .../Resources/Private/Assets/js/_app.js       | 45 ++--------
 .../Private/Assets/js/{myep => }/_store.js    | 86 ++++++++++++++-----
 .../Assets/js/components/HotelList.vue        |  4 +-
 .../Assets/js/components/ProductDetail.vue    | 16 ++--
 .../Assets/js/components/ReferrerLink.vue     |  2 +-
 .../Assets/js/components/SearchResult.vue     | 12 +--
 .../Assets/js/components/SearchResultItem.vue |  8 +-
 .../Assets/js/components/Watchlist.vue        | 11 +--
 .../Assets/js/components/WatchlistToggle.vue  |  9 +-
 .../Private/Assets/js/myep/_router.js         |  2 +-
 .../Private/Assets/js/myep/components/App.vue |  2 +-
 .../Private/Assets/js/myep/stores/teamer.js   |  4 +-
 .../Private/Partials/ContactBar.html          |  4 +-
 .../Private/Templates/Product/Detail.html     |  4 +-
 .../Private/Templates/Product/HotelList.html  |  1 -
 .../Templates/Search/Searchresult.html        |  4 +-
 .../Private/Templates/Watchlist/List.html     |  3 +-
 webpack.config.js                             |  2 +-
 18 files changed, 101 insertions(+), 118 deletions(-)
 rename web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/{myep => }/_store.js (62%)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
index 5cd97587..02628ee2 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
@@ -2,7 +2,6 @@
 
 // Import dependencies
 import Vue from 'vue'
-import VueSession from 'vue-session'
 import $ from 'jquery'
 import dayjs from 'dayjs'
 import 'dayjs/locale/de'
@@ -40,17 +39,18 @@ const sliderPrevArrow = '<button class="slider-pagination__arrow slider-paginati
 const sliderNextArrow = '<button class="slider-pagination__arrow slider-pagination__arrow--next"><i class="fa fa-2x fa-chevron-right"></i></button>';
 const sliderDot = '<button class="slider-pagination__dot" data-role="none" role="button" tabindex="0" />';
 
-// Enable session handling
-Vue.use(VueSession, { persist: true });
-
 // Define date filter for vue templates
 Vue.filter('date', (value) => {
     return dayjs(value).format('DD.MM.YYYY');
 });
 
+// Store
+import store from './_store';
+
 // Initialize vue app
 new Vue({
     el: '#app',
+    store,
     components: {
         SearchBar,
         SearchBox,
@@ -70,7 +70,6 @@ new Vue({
     },
     data () {
         return {
-            config: {},
             maxWindowWidth: 991,
             lastScrollPosition: 0,
             scrollTopVisible: false,
@@ -78,20 +77,10 @@ new Vue({
             navbarLocked: false,
             searchbarFixed: false,
             mobileMode: false,
-            backgroundImageMode: 'mobile',
-            watchlist: []
-        }
-    },
-    computed: {
-        watchlistCount () {
-            return this.watchlist.length;
+            backgroundImageMode: 'mobile'
         }
     },
     methods: {
-        parseConfig () {
-            const configElement = document.getElementById('appconfig');
-            this.config = JSON.parse(configElement.innerHTML);
-        },
         setMobileMode () {
             this.mobileMode = $window.outerWidth() < this.maxWindowWidth;
         },
@@ -334,7 +323,7 @@ new Vue({
                 });
         },
         appendPaCode () {
-            const paCode = this.config.paCode;
+            const paCode = this.$store.state.config.paCode;
             if (!paCode) {
                 return;
             }
@@ -356,7 +345,8 @@ new Vue({
         }
     },
     created () {
-        this.parseConfig();
+        this.$store.commit('initConfig');
+        this.$store.commit('initWatchlist');
         EventBus.$on('ajaxContentLoaded', () => {
             Vue.nextTick(() => {
                 this.initContentsliders();
@@ -373,25 +363,6 @@ new Vue({
         EventBus.$on('scrollTo', (anchorId, offset) => {
             this.scrollTo(anchorId, offset);
         });
-        EventBus.$on('watchlistToggle', uid => {
-            let list = this.watchlist;
-            let watchlistIndex = list.indexOf(uid);
-            if (watchlistIndex === -1) {
-                list.push(uid)
-            } else {
-                list.splice(watchlistIndex, 1)
-            }
-            this.watchlist = list;
-            this.$session.set('watchlist', this.watchlist);
-
-        });
-        if (!this.$session.exists()) {
-            this.$session.start();
-        }
-        if (!this.$session.has('watchlist')) {
-            this.$session.set('watchlist', []);
-        }
-        this.watchlist = this.$session.get('watchlist');
     },
     mounted () {
         Vue.nextTick(() => {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
similarity index 62%
rename from web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
rename to web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
index 8c6cffb4..921b33f7 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_store.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_store.js
@@ -2,16 +2,11 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
 
-import AddressStore from './stores/address'
-import CrmDataStore from './stores/crmdata'
-import TeamerStore from './stores/teamer'
-import EventsStore from './stores/events'
-import NewsletterStore from './stores/newsletter'
-
-const configElement = document.getElementById('appconfig');
-const config = JSON.parse(configElement.innerHTML);
-
-axios.defaults.baseURL = config.myEpApiBaseUrl;
+import AddressStore from './myep/stores/address'
+import CrmDataStore from './myep/stores/crmdata'
+import TeamerStore from './myep/stores/teamer'
+import EventsStore from './myep/stores/events'
+import NewsletterStore from './myep/stores/newsletter'
 
 Vue.use(Vuex);
 
@@ -24,12 +19,14 @@ export default new Vuex.Store({
         newsletter: NewsletterStore
     },
     state: {
-        config: config,
+        config: {},
+        watchlist: [],
+        watchlistId: null,
         loading: false,
         authToken: sessionStorage.getItem('token'),
         loggedIn: !!sessionStorage.getItem('token'),
-        isTeamer: JSON.parse(sessionStorage.getItem('teamerId')) !== null,
-        teamerId: JSON.parse(sessionStorage.getItem('teamerId')),
+        isTeamer: JSON.parse(sessionStorage.getItem('isTeamer')),
+        memberId: JSON.parse(sessionStorage.getItem('memberId')),
         countries: [],
         abilities: [],
         timeFrames: [],
@@ -40,6 +37,40 @@ export default new Vuex.Store({
         }
     },
     mutations: {
+        initConfig (state) {
+            const configElement = document.getElementById('appconfig');
+            state.config = JSON.parse(configElement.innerHTML);
+            axios.defaults.baseURL = state.config.myEpApiBaseUrl;
+        },
+        initWatchlist (state, list = null) {
+            if (list) {
+                sessionStorage.setItem('watchlist', JSON.stringify(list.items));
+                sessionStorage.setItem('watchlistId', JSON.stringify(list.id));
+            } else if (!sessionStorage.getItem('watchlist')) {
+                sessionStorage.setItem('watchlist', JSON.stringify([]));
+                sessionStorage.setItem('watchlistId', JSON.stringify(null));
+            }
+            state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
+            state.watchlistId = JSON.parse(sessionStorage.getItem('watchlistId'));
+        },
+        watchlistToggle (state, uid) {
+            let list = state.watchlist;
+            let watchlistIndex = list.indexOf(uid);
+            if (watchlistIndex === -1) {
+                list.push(uid)
+            } else {
+                list.splice(watchlistIndex, 1)
+            }
+            state.watchlist = list;
+            sessionStorage.setItem('watchlist', JSON.stringify(list));
+            if (state.watchlistId) {
+                axios({
+                    url: '/api/watchlists/' + state.watchlistId,
+                    data: state.watchlist,
+                    method: 'put'
+                });
+            }
+        },
         loginSuccess (state, token) {
             state.loggedIn = true;
             state.authToken = token;
@@ -54,16 +85,20 @@ export default new Vuex.Store({
             state.teamerId = null;
             state.authToken = null;
             sessionStorage.removeItem('token');
-            sessionStorage.removeItem('teamerId');
+            sessionStorage.removeItem('isTeamer');
+            sessionStorage.removeItem('memberId');
         },
         alert (state, payload) {
             state.message.text = payload.message;
             state.message.class = payload.class;
         },
-        isTeamer (state, teamerId) {
+        isTeamer (state) {
             state.isTeamer = true;
-            state.teamerId = teamerId;
-            sessionStorage.setItem('teamerId', teamerId);
+            sessionStorage.setItem('isTeamer', JSON.stringify(true));
+        },
+        setMember (state, memberId) {
+            state.memberId = memberId;
+            sessionStorage.setItem('memberId', memberId);
         },
         loadingBegin (state) {
             state.loading = true;
@@ -98,9 +133,13 @@ export default new Vuex.Store({
                 method: 'post',
                 withCredentials: true
             }).then((response) => {
-                let teamerId = parseInt(response.data.teamer_id);
-                if (teamerId > 0) {
-                    commit('isTeamer', teamerId);
+                let memberId = parseInt(response.data.member_id);
+                commit('setMember', memberId);
+                if (response.data.watchlist) {
+                    commit('initWatchlist', response.data.watchlist);
+                }
+                if (response.data.is_teamer) {
+                    commit('isTeamer');
                 }
                 commit('loginSuccess', response.data.token);
                 commit('loadingFinish');
@@ -164,6 +203,12 @@ export default new Vuex.Store({
         }
     },
     getters: {
+        watchlistCount: state => {
+            return state.watchlist.length;
+        },
+        onWatchlist: (state) => (uid) => {
+            return state.watchlist.indexOf(uid) !== -1;
+        },
         authToken: state => {
             return state.authToken;
         },
@@ -175,4 +220,3 @@ export default new Vuex.Store({
         }
     }
 });
-
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
index 30dc9d8b..7ccef431 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/HotelList.vue
@@ -31,8 +31,8 @@
             }
         },
         created () {
-            if (this.$session.has('filterSettings')) {
-                this.filterSettings = this.$session.get('filterSettings')
+            if (sessionStorage.getItem('filterSettings')) {
+                this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
             }
         }
     }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
index f102232d..32a113b8 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue
@@ -72,12 +72,6 @@
                     return {}
                 }
             },
-            watchlist: {
-                type: Array,
-                default () {
-                    return []
-                }
-            },
             daytrip: {
                 type: Number,
                 default: 0
@@ -188,12 +182,12 @@
             }
         },
         created () {
-            if (this.$session.has('filterSettings')) {
-                this.filterSettings = this.$session.get('filterSettings')
+            if (sessionStorage.getItem('filterSettings')) {
+                this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
             }
-            if (this.$session.has('referringPage')) {
-                this.referringPage = this.$session.get('referringPage');
-                this.$session.remove('referringPage');
+            if (sessionStorage.getItem('referringPage')) {
+                this.referringPage = JSON.parse(sessionStorage.getItem('referringPage'));
+                sessionStorage.removeItem('referringPage');
             }
             EventBus.$on('loadDatesTable', () => {
                 this.loadDatesView();
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ReferrerLink.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ReferrerLink.vue
index aa7054ff..fbed24df 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ReferrerLink.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ReferrerLink.vue
@@ -20,7 +20,7 @@
         methods: {
             storeReferringPage () {
                 if (this.referringPage.url && this.referringPage.label) {
-                    this.$session.set('referringPage', this.referringPage)
+                    sessionStorage.setItem('referringPage', JSON.stringify(this.referringPage))
                 }
             }
         }
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 68260f94..6d30206f 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
@@ -71,12 +71,6 @@
                 default () {
                     return {};
                 }
-            },
-            watchlist: {
-                type: Array,
-                default () {
-                    return [];
-                }
             }
         },
         computed: {
@@ -211,14 +205,14 @@
             },
             updateFilterSettings (settings) {
                 this.filterSettings = { ...this.filterSettings, ...settings };
-                this.$session.set('filterSettings', this.filterSettings);
+                sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
             }
         },
         created () {
             if (!$.isEmptyObject(this.initialFilterSettings)) {
                 this.updateFilterSettings(this.initialFilterSettings)
-            } else if (this.$session.has('filterSettings')) {
-                this.updateFilterSettings(this.$session.get('filterSettings'))
+            } else if (sessionStorage.getItem('filterSettings')) {
+                this.updateFilterSettings(JSON.parse(sessionStorage.getItem('filterSettings')))
             }
         },
         mounted () {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
index b41b5c22..d2951a88 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResultItem.vue
@@ -62,7 +62,7 @@
                 </referrer-link>
             </div>
         </div>
-        <watchlist-toggle :uid="item.key" :watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
+        <watchlist-toggle :uid="item.key" class="teaserbox-watchlist"></watchlist-toggle>
     </div>
 </template>
 
@@ -86,12 +86,6 @@
                 type: Object,
                 required: true
             },
-            watchlist: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
             referringPage: {
                 type: Object,
                 default () {
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 e5067bdc..707dbfa1 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
@@ -8,8 +8,7 @@
                         :key="item.key"
                         :item="item"
                         :section="section"
-                        :referring-page="referringPage"
-                        :watchlist="watchlist"></search-result-item>
+                        :referring-page="referringPage"></search-result-item>
             </div>
         </template>
         <div class="alert alert-info" v-if="total === 0">
@@ -40,12 +39,6 @@
                 type: String,
                 required: true
             },
-            watchlist: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
             referringPageUrl: {
                 type: String,
                 default: null
@@ -53,6 +46,7 @@
         },
         data () {
             return {
+                watchlist: [],
                 teasers: {},
                 total: 0,
                 loading: false,
@@ -94,6 +88,7 @@
             });
         },
         mounted () {
+            this.watchlist = this.$store.state.watchlist;
             Vue.nextTick(() => {
                 this.loadList();
             })
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
index 42b3eb0b..de6056ef 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
@@ -17,10 +17,6 @@
                 type: String,
                 required: true
             },
-            watchlist: {
-                type: Array,
-                required: true
-            },
             layout: {
                 type: String,
                 default: 'toggle'
@@ -28,12 +24,13 @@
         },
         methods: {
             toggleWatchlist () {
-                EventBus.$emit('watchlistToggle', this.uid);
+                this.$store.commit('watchlistToggle', this.uid);
+                EventBus.$emit('watchlistToggle');
             }
         },
         computed: {
             onWatchlist () {
-                return this.watchlist.indexOf(this.uid) !== -1;
+                return this.$store.getters.onWatchlist(this.uid);
             }
         }
     }
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
index 1236b3c8..e59aa952 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import store from './_store';
+import store from './../_store';
 
 Vue.use(VueRouter);
 
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
index 99ad182e..cc1f19c3 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-    import store from '../_store'
+    import store from '../../_store'
     import router from '../_router'
     import EventBus from '../../_bus'
 
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js
index 28799096..63e1ebd9 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js
@@ -14,7 +14,7 @@ export default {
                 }
             });
 
-            return client.get('/api/teamers/' + rootState.teamerId)
+            return client.get('/api/teamers/' + rootState.memberId)
                 .then((response) => {
                     commit('loadingFinish', null, { root: true });
                     return response.data;
@@ -38,7 +38,7 @@ export default {
                 }
             });
 
-            return client.put('/api/teamers/' + rootState.teamerId, data)
+            return client.put('/api/teamers/' + rootState.memberId, data)
                 .then(() => {
                     commit('loadingFinish', null, { root: true });
                     commit('alert', {
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
index 922cee51..695c025f 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
@@ -1,9 +1,9 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 <div class="ep-contactnav">
     <a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}" class="bg-red watchlist"
-       v-show="watchlistCount > 0" v-cloak rel="nofollow">
+       v-show="$store.getters.watchlistCount > 0" v-cloak rel="nofollow">
         <span class="fa fa-list" aria-hidden="true"></span>
-        <div>Merkliste ({{ watchlistCount }})</div>
+        <div>Merkliste ({{ $store.getters.watchlistCount }})</div>
     </a>
     <a href="tel:{settings.phoneNumberLink}" class="bg-red phone" title="Telefonische Beratung" rel="nofollow">
         <span class="fa fa-phone" aria-hidden="true"></span>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
index 875e1773..8ef39487 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
@@ -18,7 +18,6 @@
             argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
             :hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
             :fb-pixel-data="{ productUid: <f:format.raw>{product.busProId}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
-            :watchlist="watchlist"
             :daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
             inline-template>
             <article>
@@ -78,8 +77,7 @@
                                     </div>
                                     <div class="col-xs-12">
                                         <p>
-                                            <watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}"
-                                                             layout="link"></watchlist-toggle>
+                                            <watchlist-toggle uid="{hotel.uid}:{product.uid}" layout="link"></watchlist-toggle>
                                         </p>
                                     </div>
                                 </div>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
index 2626ccc3..12253fc7 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
@@ -6,7 +6,6 @@
 
     <f:section name="Main">
         <hotel-list
-            :watchlist="watchlist"
             referring-page-url="{f:uri.typolink(parameter: currentPageUid)}"
             inline-template>
             <article>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
index 6c05d66f..c286f0ef 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
@@ -13,7 +13,6 @@
                 referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
                 argument-prefix="{ep:argumentPrefix(pluginName: 'ajax')}"
                 :date-presets='{settings.datePickerPresets -> v:format.json.encode()}'
-                :watchlist="watchlist"
                 inline-template>
                 <div class="searchresult-wrapper">
                     <div class="pagehead pagehead--searchresult">
@@ -303,8 +302,7 @@
                                                 :key="item.key"
                                                 :item="item"
                                                 :section="section"
-                                                :referring-page="referringPage"
-                                                :watchlist="watchlist"></search-result-item>
+                                                :referring-page="referringPage"></search-result-item>
                                         </div>
                                     </template>
                                 </div>
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html
index a6d03250..4ee3fefd 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html
@@ -6,8 +6,7 @@
 
     <f:section name="Main">
 
-        <watchlist :watchlist="watchlist"
-                   loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
+        <watchlist loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
                    referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
                    watchlist-uri="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', pageUid: settings.defaultAjaxUid)}"></watchlist>
     </f:section>
diff --git a/webpack.config.js b/webpack.config.js
index c331e3ee..e658c9e2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,7 +10,7 @@ Encore
     .addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
     .addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
     .createSharedEntry('vendor', [
-        'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'lazysizes',
+        'jquery', 'vue', 'vuex', 'vue-router', 'axios', 'flatpickr', 'lazysizes',
         'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
         'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
     ])