From 4ed4d3a26fadffd96b019b0dd9909e0b1753e9e5 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 20 Jan 2026 20:27:24 +0000
Subject: [PATCH] fix too many v-if

---
 nginx/vue/src/components/home/Feed.vue      | 49 ++++++++----------
 nginx/vue/src/components/home/Gym.vue       | 26 ++++------
 nginx/vue/src/components/home/Listening.vue | 55 +++++++++++----------
 3 files changed, 60 insertions(+), 70 deletions(-)

diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
index 08ef4ca..f6c027e 100644
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -8,7 +8,15 @@ import { useAuthStore } from "@/stores/auth";
 const auth = useAuthStore();
 const userOwnsPost = ref(false);
 
-const post = ref(null);
+const post = ref({
+    title: "Can't fetch from the db yo",
+    content:
+        "This is meant to be pulling from a database, but for some reason that isn't working and this is filler text that should hopefully never see the light of day. If you are reading this, something has gone horribly, horribly wrong. Please start crying and prepare for the incoming wrath of hell. Furthermore, this is very, very long because I am trying to test the scroll feature so thank you ^_^.",
+    author: {
+        username: "stp",
+    },
+    createdAt: Date.now(),
+});
 const leftCap = ref(false);
 const rightCap = ref(false);
 let posts = [];
@@ -17,14 +25,17 @@ let len = 0;
 
 async function fetchPosts() {
     try {
-        const res = await axios.get("https://www.adam-french.co.uk/api/posts");
-        posts = res.data;
-        len = posts.length;
-        post.value = posts[0];
-
-        userOwnsPost.value = post.value.author.username == auth.user.username;
-
-        leftCap.value = true;
+        const res = await axios.get("/api/posts");
+        if (Array.isArray(res.data)) {
+            posts = res.data;
+            len = posts.length;
+            post.value = posts[0];
+            userOwnsPost.value =
+                post.value.author.username == auth.user.username;
+            leftCap.value = true;
+        } else {
+            throw new Error("Invalid response from API");
+        }
     } catch (err) {
         console.log("Cannot connect to API");
     }
@@ -66,7 +77,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <div v-if="post" class="flex-col pad scroll-y left-content">
+    <div 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>
@@ -81,24 +92,6 @@ onMounted(() => {
         </div>
         <button v-if="userOwnsPost" @click="deletePost">Delete</button>
     </div>
-    <div class="flex-col pad left-content" v-else>
-        <h2>Can't fetch from the db yo</h2>
-        <div class="fill wrap scroll-y">
-            This is meant to be pulling from a database, but for some reason
-            that isn't working and this is filler text that should hopefully
-            never see the light of day. If you are reading this, something has
-            gone horribly, horribly wrong. Please start crying and prepare for
-            the incoming wrath of hell. Furthermore, this is very, very long
-            because I am trying to test the scroll feature so thank you ^_^.
-        </div>
-        <p>by: stp</p>
-        <small>Created at: 0/0/0</small>
-        <div class="flex-row fill-width">
-            <button class="fill">Prev</button>
-            <button class="fill">Next</button>
-        </div>
-        <button>Delete</button>
-    </div>
 </template>
 
 <style scoped>
diff --git a/nginx/vue/src/components/home/Gym.vue b/nginx/vue/src/components/home/Gym.vue
index 877323c..054a4c6 100644
--- a/nginx/vue/src/components/home/Gym.vue
+++ b/nginx/vue/src/components/home/Gym.vue
@@ -1,23 +1,17 @@
+<script setup>
+import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+const gym = [
+    { name: "Row", type: "30 min" },
+    { name: "Run", type: "5k" },
+    { name: "Pushup & Squat", type: "50" },
+];
+</script>
+
 <template>
     <div class="flex-col center-content">
         <h2>Gym</h2>
         <p>I'm not a gym geek but I have a consistent routine:</p>
-        <table>
-            <tbody>
-                <tr>
-                    <th>Row</th>
-                    <td>30 min</td>
-                </tr>
-                <tr>
-                    <th>Run</th>
-                    <td>5k</td>
-                </tr>
-                <tr>
-                    <th>Pushup & Squat</th>
-                    <td>50</td>
-                </tr>
-            </tbody>
-        </table>
+        <OptionalLinkTable class="scroll fill center-text" :data="gym" />
     </div>
 </template>
 
diff --git a/nginx/vue/src/components/home/Listening.vue b/nginx/vue/src/components/home/Listening.vue
index 850d1dc..2e84390 100644
--- a/nginx/vue/src/components/home/Listening.vue
+++ b/nginx/vue/src/components/home/Listening.vue
@@ -1,48 +1,57 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
 import axios from "axios";
 
-const song = ref(null);
-const intervalId = ref(null);
-const refreshId = ref(null);
+let intervalId = null;
+let refreshId = null;
 
-let songs = [];
-let idx = 0;
+const song = computed(() => songs.value[idx.value]);
+const songs = ref([
+    {
+        id: 1,
+        track: {
+            id: 1,
+            name: "^_^",
+            album: { images: [{ url: "/img/Untitled.png" }] },
+            artists: [{ name: ">_<" }],
+        },
+    },
+]);
+const idx = ref(0);
 
 async function fetchRecent() {
     try {
         const res = await axios.get("/api/spotify/recent");
-        songs = res.data || [];
-
-        idx = 0;
-        song.value = songs[0] ?? null;
+        if (Array.isArray(res.data)) {
+            songs.value = res.data;
+            idx.value = 0;
+        } else {
+            throw new Error("Invalid response from Spotify API");
+        }
     } catch (err) {
         console.error("Cannot connect to Spotify API", err);
     }
 }
 
 function nextSong() {
-    if (!songs.length) return;
-
-    song.value = songs[idx];
-    idx = (idx + 1) % songs.length;
+    if (!songs.value.length) return;
+    idx.value = (idx.value + 1) % songs.value.length;
 }
 
 onMounted(async () => {
     await fetchRecent();
-
-    intervalId.value = setInterval(nextSong, 5000);
-    refreshId.value = setInterval(fetchRecent, 120000);
+    intervalId = setInterval(nextSong, 5000);
+    refreshId = setInterval(fetchRecent, 120000);
 });
 
 onUnmounted(() => {
-    clearInterval(intervalId.value);
-    clearInterval(refreshId.value);
+    clearInterval(intervalId);
+    clearInterval(refreshId);
 });
 </script>
 
 <template>
-    <Transition v-if="song" name="fade" mode="out-in">
+    <Transition name="fade" mode="out-in">
         <div
             @click="nextSong"
             :key="song.track.id"
@@ -54,12 +63,6 @@ onUnmounted(() => {
             <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
         </div>
     </Transition>
-    <div v-else class="flex-col center-content center-text">
-        <h2>Listening To</h2>
-        <img src="/img/Untitled.png" />
-        <p><strong>Song:</strong> >_<</p>
-        <p><strong>Artist:</strong> ^_^</p>
-    </div>
 </template>
 
 <style scoped>