From 4c7c3c2ff48ce358a82425c3ed202afce1ced9c4 Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Mon, 10 Feb 2020 02:05:28 +0100
Subject: [PATCH] Using router-link slots for header link indicators. Added
 release cache to store.

---
 assets/components/header/header.vue | 48 ++++++++++++++++-------------
 assets/components/home/home.vue     |  5 +++
 assets/js/releases/mutations.js     | 15 ++++++++-
 assets/js/releases/state.js         |  4 ++-
 4 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index bdf8e9dd8..31635e846 100644
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -1,7 +1,7 @@
 <template>
     <header class="header">
         <router-link
-            to="/"
+            to="/home"
             class="logo-link"
         ><h1 class="logo"><Icon icon="logo" /></h1></router-link>
 
@@ -9,31 +9,46 @@
             <ul class="nolist">
                 <li class="nav-item">
                     <router-link
+                        v-slot="{ isActive, navigate }"
                         to="/actors"
-                        class="nav-link"
-                        :class="{ active: active === 'actors' }"
                     >
-                        <Icon icon="stars" /><span class="nav-label">Actors</span>
+                        <a
+                            class="nav-link"
+                            :class="{ active: isActive }"
+                            @click="navigate"
+                        >
+                            <Icon icon="stars" /><span class="nav-label">Actors</span>
+                        </a>
                     </router-link>
                 </li>
 
                 <li class="nav-item">
                     <router-link
+                        v-slot="{ isActive, navigate }"
                         to="/networks"
-                        class="nav-link"
-                        :class="{ active: active === 'networks' }"
                     >
-                        <Icon icon="earth2" /><span class="nav-label">Networks</span>
+                        <a
+                            class="nav-link"
+                            :class="{ active: isActive }"
+                            @click="navigate"
+                        >
+                            <Icon icon="earth2" /><span class="nav-label">Networks</span>
+                        </a>
                     </router-link>
                 </li>
 
                 <li class="nav-item">
                     <router-link
+                        v-slot="{ isActive, navigate }"
                         to="/tags"
-                        class="nav-link"
-                        :class="{ active: active === 'tags' }"
                     >
-                        <Icon icon="price-tags" /><span class="nav-label">Tags</span>
+                        <a
+                            class="nav-link"
+                            :class="{ active: isActive }"
+                            @click="navigate"
+                        >
+                            <Icon icon="price-tags" /><span class="nav-label">Tags</span>
+                        </a>
                     </router-link>
                 </li>
             </ul>
@@ -41,18 +56,6 @@
     </header>
 </template>
 
-<script>
-function active() {
-    return this.$route.name;
-}
-
-export default {
-    computed: {
-        active,
-    },
-};
-</script>
-
 <style lang="scss" scoped>
 @import 'theme';
 
@@ -97,6 +100,7 @@ export default {
     text-decoration: none;
     font-size: .9rem;
     font-weight: bold;
+    cursor: pointer;
 
     .icon {
         fill: $shadow;
diff --git a/assets/components/home/home.vue b/assets/components/home/home.vue
index 2b69461a6..2f54247dc 100644
--- a/assets/components/home/home.vue
+++ b/assets/components/home/home.vue
@@ -17,6 +17,10 @@ import Releases from '../releases/releases.vue';
 
 async function fetchReleases() {
     this.releases = await this.$store.dispatch('fetchReleases', { limit: 100 });
+    this.$store.commit('setCache', {
+        target: 'home',
+        releases: this.releases,
+    });
 }
 
 async function mounted() {
@@ -39,6 +43,7 @@ export default {
     },
     data() {
         return {
+            // releases: this.$store.state.releases.cache.home || [], // slows down apparent page load
             releases: [],
             networks: [],
             pageTitle: null,
diff --git a/assets/js/releases/mutations.js b/assets/js/releases/mutations.js
index ff8b4c563..d2c2c16a2 100644
--- a/assets/js/releases/mutations.js
+++ b/assets/js/releases/mutations.js
@@ -1 +1,14 @@
-export default {};
+import Vue from 'vue';
+
+function setCache(state, { target, releases }) {
+    Vue.set(state.cache, target, releases);
+}
+
+function deleteCache(state, target) {
+    Vue.delete(state.cache, target);
+}
+
+export default {
+    setCache,
+    deleteCache,
+};
diff --git a/assets/js/releases/state.js b/assets/js/releases/state.js
index ff8b4c563..4b0777750 100644
--- a/assets/js/releases/state.js
+++ b/assets/js/releases/state.js
@@ -1 +1,3 @@
-export default {};
+export default {
+    cache: {},
+};