From c73f229b6711b045db929dc11ae3e49b4b3c37a9 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 20 Jan 2026 12:54:30 +0000
Subject: [PATCH] add consumptions

---
 nginx/vue/src/components/home/Feed.vue      |   6 +-
 nginx/vue/src/components/home/Listening.vue |  38 +++---
 nginx/vue/src/components/home/Watching.vue  | 132 +++++++++-----------
 3 files changed, 82 insertions(+), 94 deletions(-)

diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
index 2add9fe..08ef4ca 100644
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -9,7 +9,6 @@ const auth = useAuthStore();
 const userOwnsPost = ref(false);
 
 const post = ref(null);
-const fetched = ref(false);
 const leftCap = ref(false);
 const rightCap = ref(false);
 let posts = [];
@@ -21,14 +20,13 @@ async function fetchPosts() {
         const res = await axios.get("https://www.adam-french.co.uk/api/posts");
         posts = res.data;
         len = posts.length;
-        fetched.value = true;
         post.value = posts[0];
 
         userOwnsPost.value = post.value.author.username == auth.user.username;
 
         leftCap.value = true;
     } catch (err) {
-        console.error(err);
+        console.log("Cannot connect to API");
     }
 }
 
@@ -68,7 +66,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <div v-if="fetched" class="flex-col pad scroll-y left-content">
+    <div v-if="post" class="flex-col pad scroll-y left-content">
         <h2>{{ post.title }}</h2>
         <Markdown class="fill wrap" :source="post.content" />
         <p>by: {{ post.author.username }}</p>
diff --git a/nginx/vue/src/components/home/Listening.vue b/nginx/vue/src/components/home/Listening.vue
index ff35a4e..b64544e 100644
--- a/nginx/vue/src/components/home/Listening.vue
+++ b/nginx/vue/src/components/home/Listening.vue
@@ -1,45 +1,51 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import axios from "axios";
 
 const song = ref(null);
-const fetched = ref(false);
 const intervalId = ref(null);
+const refreshId = ref(null);
+
 let songs = [];
-const len = 3;
 let idx = 0;
 
 async function fetchRecent() {
     try {
         const res = await axios.get("/api/spotify/recent");
-        songs = res.data;
-        fetched.value = true;
-        song.value = songs[0];
+        songs = res.data || [];
+
+        idx = 0;
+        song.value = songs[0] ?? null;
     } catch (err) {
-        console.error(err);
+        console.error("Cannot connect to Spotify API", err);
     }
 }
 
 function nextSong() {
-    clearInterval(intervalId.value);
+    if (!songs.length) return;
+
     song.value = songs[idx];
-    idx = (idx + 1) % len;
-    intervalId.value = setInterval(nextSong, 5000);
+    idx = (idx + 1) % songs.length;
 }
 
-onMounted(() => {
-    fetchRecent();
-    setInterval(fetchRecent, 120000);
+onMounted(async () => {
+    await fetchRecent();
+
     intervalId.value = setInterval(nextSong, 5000);
+    refreshId.value = setInterval(fetchRecent, 120000);
+});
+
+onUnmounted(() => {
+    clearInterval(intervalId.value);
+    clearInterval(refreshId.value);
 });
 </script>
 
 <template>
     <Transition name="fade" mode="out-in">
         <div
-            v-if="fetched"
-            :key="song"
-            v-on:click="nextSong"
+            v-if="song"
+            @click="nextSong"
             class="flex-col center-content center-text"
         >
             <h2>Listening To</h2>
diff --git a/nginx/vue/src/components/home/Watching.vue b/nginx/vue/src/components/home/Watching.vue
index de49e32..f670b53 100644
--- a/nginx/vue/src/components/home/Watching.vue
+++ b/nginx/vue/src/components/home/Watching.vue
@@ -1,81 +1,65 @@
+<script setup>
+import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+
+const arr = [
+    {
+        type: "Substack",
+        name: "By Ellie",
+        link: "https://oceandrops.substack.com/p/japan-is-what-late-stage-capitalist?utm_source=%2Finbox&utm_medium=reader2",
+    },
+    {
+        type: "Substack",
+        name: "By Cricket Guest",
+        link: "https://finalgirldigital.substack.com/p/the-diet-coke-essay?utm_source=%2Finbox&utm_medium=reader2",
+    },
+    {
+        type: "Book",
+        name: "The Defining Decade",
+    },
+    {
+        type: "Movie",
+        name: "Funny Pages",
+    },
+    {
+        type: "Series",
+        name: "Curb Your Enthusiasm",
+    },
+    {
+        type: "Game",
+        name: "Hatsune Miku: Project Mirai DX",
+    },
+    {
+        type: "Movie",
+        name: "Redline",
+    },
+    {
+        type: "Game",
+        name: "Persona 5 Royal",
+    },
+    {
+        type: "Anime",
+        name: "GTO",
+    },
+    {
+        type: "Anime",
+        name: "Revolutionary Girl Utena",
+    },
+    {
+        type: "Anime",
+        name: "Chainsaw man",
+    },
+    {
+        type: "Anime",
+        name: "Azumanga Daioh",
+    },
+];
+</script>
+
 <template>
     <div class="flex-col center-content">
         <h2>Consumption</h2>
         <div class="scroll fill">
-            <table>
-                <tbody>
-                    <tr>
-                        <th>Substack</th>
-                        <td>
-                            <a
-                                href="https://oceandrops.substack.com/p/japan-is-what-late-stage-capitalist?utm_source=%2Finbox&utm_medium=reader2"
-                                >By Ellie</a
-                            >
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>Substack</th>
-                        <td>
-                            <a
-                                href="https://finalgirldigital.substack.com/p/the-diet-coke-essay?utm_source=%2Finbox&utm_medium=reader2"
-                                >By Cricket Guest</a
-                            >
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>Book</th>
-                        <td>The Defining Decade</td>
-                    </tr>
-                    <tr>
-                        <th>Book</th>
-                        <td>Atomic Habits</td>
-                    </tr>
-                    <tr>
-                        <th>Movie</th>
-                        <td>Funny Pages</td>
-                    </tr>
-                    <tr>
-                        <th>Series</th>
-                        <td>Curb Your Enthusiasm</td>
-                    </tr>
-                    <tr>
-                        <th>Game</th>
-                        <td>Hatsune Miku: Project Mirai DX</td>
-                    </tr>
-                    <tr>
-                        <th>Anime</th>
-                        <td>Welcome to the NHK</td>
-                    </tr>
-                    <tr>
-                        <th>Movie</th>
-                        <td>Redline</td>
-                    </tr>
-                    <tr>
-                        <th>Anime</th>
-                        <td>Neon Genesis Evangelion</td>
-                    </tr>
-                    <tr>
-                        <th>Game</th>
-                        <td>Persona 5</td>
-                    </tr>
-                    <tr>
-                        <th>Anime</th>
-                        <td>GTO</td>
-                    </tr>
-                    <tr>
-                        <th>Anime</th>
-                        <td>Revolutionary Girl Utena</td>
-                    </tr>
-                    <tr>
-                        <th>Anime</th>
-                        <td>Chainsaw Man</td>
-                    </tr>
-                    <tr>
-                        <th>Anime</th>
-                        <td>Azumanga Daioh</td>
-                    </tr>
-                </tbody>
-            </table>
+            <OptionalLinkTable :data="arr" />
         </div>
     </div>
 </template>