From 4b462da45f83996176c6c6fd0186f387e5a94ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Fri, 27 Sep 2019 13:25:07 +0200
Subject: [PATCH] Integrate watchlist closer into store

---
 .../Assets/js/components/Watchlist.vue        | 10 +++++---
 .../Assets/js/components/WatchlistToggle.vue  |  5 ++--
 .../Private/Assets/js/store/index.js          | 24 +++++++++----------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
index a2117bfe..ccf905de 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/Watchlist.vue
@@ -22,6 +22,7 @@
 
 <script>
     import Vue from 'vue'
+    import { mapState, mapGetters } from 'vuex'
     import axios from 'axios'
     import EventBus from '../_bus'
     import SearchResultItem from './SearchResultItem.vue'
@@ -58,13 +59,13 @@
         },
         methods: {
             loadList () {
-                if (this.watchlist.length === 0) {
+                if (this.watchlistCount === 0) {
                     this.teasers = {};
                     this.total = 0;
                     return;
                 }
                 let query = {};
-                query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
+                query['tx_epproducts_ajax[watchlistUids]'] = this.userData.watchlist;
                 this.loading = true;
                 axios({
                     url: this.watchlistUri,
@@ -83,13 +84,16 @@
                 });
             }
         },
+        computed: {
+            ...mapState(['userData']),
+            ...mapGetters(['watchlistCount', 'onWatchlist'])
+        },
         created () {
             EventBus.$on('watchlistToggle', () => {
                 this.loadList();
             });
         },
         mounted () {
-            this.watchlist = this.$store.state.watchlist.items;
             Vue.nextTick(() => {
                 this.loadList();
             })
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
index 20911cd3..9e5b08f0 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/WatchlistToggle.vue
@@ -9,6 +9,7 @@
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
     import EventBus from '../_bus'
 
     export default {
@@ -29,9 +30,7 @@
             }
         },
         computed: {
-            onWatchlist () {
-                return this.$store.getters.onWatchlist(this.uid);
-            }
+            ...mapGetters(['onWatchlist'])
         }
     }
 </script>
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
index 2b4b6eb9..7ed6e933 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js
@@ -22,7 +22,8 @@ const defaultUserData = {
     city: '',
     phoneMobile: '',
     phonePrivate: '',
-    newsletter: false
+    newsletter: false,
+    watchList: []
 };
 
 export default new Vuex.Store({
@@ -35,7 +36,6 @@ export default new Vuex.Store({
     },
     state: {
         config: {},
-        watchlist: [],
         loading: false,
         authToken: null,
         userData: defaultUserData,
@@ -58,16 +58,17 @@ export default new Vuex.Store({
             axios.defaults.baseURL = state.config.myEpApiBaseUrl;
         },
         initWatchlist (state) {
-            if (!sessionStorage.getItem('watchlist')) {
-                sessionStorage.setItem('watchlist', JSON.stringify([]));
+            if (!sessionStorage.getItem('watchList')) {
+                sessionStorage.setItem('watchList', JSON.stringify([]));
             }
-            state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
+            state.userData.watchList = JSON.parse(sessionStorage.getItem('watchList'));
         },
         setWatchlist (state, list) {
-            state.watchlist = list;
-            sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist));
+            state.userData.watchList = list;
+            sessionStorage.setItem('watchList', JSON.stringify(list));
         },
         setUserData (state, data) {
+            data.watchList = [...state.userData.watchList, ...data.watchList];
             state.userData = data;
         },
         login (state, token) {
@@ -76,7 +77,6 @@ export default new Vuex.Store({
         },
         logout (state) {
             state.authToken = null;
-            state.watchlist = [];
             state.userData = defaultUserData;
             sessionStorage.removeItem('token');
             sessionStorage.removeItem('watchlist');
@@ -186,7 +186,7 @@ export default new Vuex.Store({
             });
         },
         watchlistToggle ({ commit, state }, uid) {
-            let list = state.watchlist;
+            let list = state.userData.watchList;
             let watchlistIndex = list.indexOf(uid);
             if (watchlistIndex === -1) {
                 list.push(uid)
@@ -200,9 +200,9 @@ export default new Vuex.Store({
         },
     },
     getters: {
-        watchlistCount: state => state.watchlist.length,
-        onWatchlist: (state) => (uid) => state.watchlist.indexOf(uid) !== -1,
+        watchlistCount: state => state.userData.watchList.length,
+        onWatchlist: (state) => (uid) => state.userData.watchList.indexOf(uid) !== -1,
         isLoggedIn: state => !!state.authToken,
-        isTeamer: state => state.userData.isTeamer,
+        isTeamer: state => !!state.userData.isTeamer,
     }
 });