From ba35c4bc0f3c2ef6dd14a6bd5c2ed971ef680102 Mon Sep 17 00:00:00 2001
From: herteleo <leonard.hertel@gmail.com>
Date: Fri, 19 Apr 2019 23:16:58 +0200
Subject: [PATCH] feat: relocated page state from tabs into own store

---
 .eslintrc.js                   |  1 +
 src/components/TabHeader.vue   |  5 ++++-
 src/components/TabMain.vue     | 22 +++++++++-------------
 src/components/TabsNav.vue     |  4 +---
 src/components/TabsNavItem.vue | 33 +++++++++++++--------------------
 src/store/modules/Pages.js     | 24 ++++++++++++++++++++++++
 src/store/modules/Tabs.js      |  6 +-----
 src/store/modules/index.js     |  2 ++
 8 files changed, 55 insertions(+), 42 deletions(-)
 create mode 100644 src/store/modules/Pages.js

diff --git a/.eslintrc.js b/.eslintrc.js
index b4b62f4..788d14e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,6 +10,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-underscore-dangle': ['error', { allow: ['_vm'] }],
     'no-param-reassign': ['error', {
       props: true,
       ignorePropertyModificationsFor: [
diff --git a/src/components/TabHeader.vue b/src/components/TabHeader.vue
index b982ff8..f664d2d 100644
--- a/src/components/TabHeader.vue
+++ b/src/components/TabHeader.vue
@@ -9,7 +9,7 @@
       @click="$emit('doReload')"
     />
     <div :class="$style.title">
-      {{ item.title }}
+      {{ pageState.title }}
     </div>
     <title-bar-button
       icon="code-tags"
@@ -41,6 +41,9 @@ export default {
     isLayoutInverted() {
       return this.$store.getters['Settings/isLayoutInvertedForOs'];
     },
+    pageState() {
+      return this.$store.getters['Pages/state'](this.item.ident);
+    },
   },
 };
 </script>
diff --git a/src/components/TabMain.vue b/src/components/TabMain.vue
index 9183b3c..03bb9c9 100644
--- a/src/components/TabMain.vue
+++ b/src/components/TabMain.vue
@@ -86,23 +86,19 @@ export default {
       }
     });
 
-    this.$refs.view.addEventListener('page-title-updated', (view) => {
-      this.$store.commit('Tabs/update', {
-        ident: this.item.ident,
-        data: {
-          title: view.title,
-        },
+    this.$refs.view.addEventListener('page-title-updated', ({ title }) => {
+      this.$store.commit('Pages/setState', {
+        tabId: this.item.ident,
+        data: { title },
       });
     });
 
-    this.$refs.view.addEventListener('page-favicon-updated', (view) => {
-      const favicon = view.favicons[0];
+    this.$refs.view.addEventListener('page-favicon-updated', ({ favicons }) => {
+      const [favicon] = favicons;
 
-      this.$store.commit('Tabs/update', {
-        ident: this.item.ident,
-        data: {
-          favicon,
-        },
+      this.$store.commit('Pages/setState', {
+        tabId: this.item.ident,
+        data: { favicon },
       });
     });
 
diff --git a/src/components/TabsNav.vue b/src/components/TabsNav.vue
index 6ccd1b9..f0fb325 100644
--- a/src/components/TabsNav.vue
+++ b/src/components/TabsNav.vue
@@ -10,9 +10,7 @@
     <tabs-nav-item
       v-for="tab in tabList"
       :key="tab.ident"
-      :label="tab.label"
-      :image="tab.favicon"
-      :to="{ name: 'tabs', params: { ident: tab.ident } }"
+      :item="tab"
     />
   </vue-draggable>
 </template>
diff --git a/src/components/TabsNavItem.vue b/src/components/TabsNavItem.vue
index 0087ebe..bc58f1b 100644
--- a/src/components/TabsNavItem.vue
+++ b/src/components/TabsNavItem.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link
-    :to="to"
+    :to="{ name: 'tabs', params: { ident: item.ident } }"
     :class="$style.item"
     :active-class="$style.active"
     tag="button"
@@ -8,22 +8,22 @@
     <div
       :class="{
         [$style.thumb]: true,
-        [$style.thumbIsImage]: image,
-        [$style.thumbIsIcon]: !image,
+        [$style.thumbIsImage]: pageState.favicon,
+        [$style.thumbIsIcon]: !pageState.favicon,
       }"
     >
       <img
-        v-if="image"
-        :src="image"
+        v-if="pageState.favicon"
+        :src="pageState.favicon"
         :class="$style.image"
       >
       <app-icon
         v-else
-        :face="icon"
+        face="tab"
       />
     </div>
     <div :class="$style.label">
-      {{ label }}
+      {{ item.label }}
     </div>
   </router-link>
 </template>
@@ -31,23 +31,16 @@
 <script>
 export default {
   props: {
-    icon: {
-      type: String,
-      default: 'tab',
-    },
-    image: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    to: {
+    item: {
       type: Object,
       default: () => ({}),
     },
   },
+  computed: {
+    pageState() {
+      return this.$store.getters['Pages/state'](this.item.ident);
+    },
+  },
 };
 </script>
 
diff --git a/src/store/modules/Pages.js b/src/store/modules/Pages.js
new file mode 100644
index 0000000..d06bc61
--- /dev/null
+++ b/src/store/modules/Pages.js
@@ -0,0 +1,24 @@
+export default {
+  namespaced: true,
+  state: {
+    pages: [],
+  },
+  getters: {
+    state({ pages }) {
+      return tabId => pages.find(page => page.tabId === tabId) || {};
+    },
+  },
+  mutations: {
+    setState({ pages }, { tabId, data = {} }) {
+      const pageIndex = pages.findIndex(page => page.tabId === tabId);
+      const pageState = pages[pageIndex] || {};
+      const newState = { ...pageState, ...data };
+
+      if (pageIndex !== -1) {
+        this._vm.$set(pages, pageIndex, newState);
+      } else {
+        pages.push({ tabId, ...newState });
+      }
+    },
+  },
+};
diff --git a/src/store/modules/Tabs.js b/src/store/modules/Tabs.js
index bdbf5a1..f462f25 100644
--- a/src/store/modules/Tabs.js
+++ b/src/store/modules/Tabs.js
@@ -41,11 +41,7 @@ export default {
     create(state, item) {
       db()
         .get('tabs')
-        .push({
-          ...item,
-          title: '',
-          favicon: '',
-        })
+        .push(item)
         .write();
 
       db()
diff --git a/src/store/modules/index.js b/src/store/modules/index.js
index fd4381b..466e605 100644
--- a/src/store/modules/index.js
+++ b/src/store/modules/index.js
@@ -1,10 +1,12 @@
 import Notifications from './Notifications';
+import Pages from './Pages';
 import Settings from './Settings';
 import Tabs from './Tabs';
 import Window from './Window';
 
 export default {
   Notifications,
+  Pages,
   Settings,
   Tabs,
   Window,