From a27feaf36c967ec1acca858f07465f6fd1d3fac6 Mon Sep 17 00:00:00 2001
From: Ethan <ethan@etekweb.net>
Date: Wed, 23 Mar 2022 23:28:57 -0500
Subject: [PATCH] cache home page recommended videos

---
 NUXT/pages/home.vue | 30 +++++++++++++++++++-----------
 NUXT/store/index.js | 12 +++++++++++-
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/NUXT/pages/home.vue b/NUXT/pages/home.vue
index 983b4ec..ceec089 100644
--- a/NUXT/pages/home.vue
+++ b/NUXT/pages/home.vue
@@ -4,28 +4,36 @@
   * This is to allow use of "recommended" videos on other pages such as /watch
   * -Front
   * -->
-  <horizontal-list-renderer :recommends="recommends" />
+  <horizontal-list-renderer :recommends="recommends" class="video-list" />
 </template>
 
 <script>
 import horizontalListRenderer from "../components/horizontalListRenderer.vue";
 export default {
   components: { horizontalListRenderer },
-  data() {
-    return {
-      recommends: [],
-    };
+
+  computed: {
+    recommends: {
+      get() {
+        return this.$store.state.recommendedVideos;
+      },
+      set(val) {
+        this.$store.commit("updateRecommendedVideos", val);
+      },
+    },
   },
 
   // The following code is only a demo for debugging purposes, note that each "shelfRenderer" has a "title" value that seems to align to the categories at the top of the vanilla yt app
 
   mounted() {
-    this.$youtube
-      .recommend()
-      .then((result) => {
-        if (result) this.recommends = result[0];
-      })
-      .catch((error) => this.$logger("Home Page", error, true));
+    if (!this.recommends.length) {
+      this.$youtube
+        .recommend()
+        .then((result) => {
+          if (result) this.recommends = result[0];
+        })
+        .catch((error) => this.$logger("Home Page", error, true));
+    }
   },
 };
 </script>
diff --git a/NUXT/store/index.js b/NUXT/store/index.js
index 6844371..40b6979 100644
--- a/NUXT/store/index.js
+++ b/NUXT/store/index.js
@@ -1 +1,11 @@
-/* activate vuex store */
+import Vue from "vue";
+
+export const state = () => ({
+  recommendedVideos: [],
+});
+
+export const mutations = {
+  updateRecommendedVideos(state, payload) {
+    Vue.set(state, "recommendedVideos", payload);
+  },
+};