fix too many v-if

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");
+        const res = await axios.get("/api/posts");
-        posts = res.data;
+        if (Array.isArray(res.data)) {
-        len = posts.length;
+            posts = res.data;
-        post.value = posts[0];
+            len = posts.length;
-
+            post.value = posts[0];
-        userOwnsPost.value = post.value.author.username == auth.user.username;
+            userOwnsPost.value =
-
+                post.value.author.username == auth.user.username;
-        leftCap.value = true;
+            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>

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>
+        <OptionalLinkTable class="scroll fill center-text" :data="gym" />
-            <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>
     </div>
 </template>
 

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);
+let intervalId = null;
-const intervalId = ref(null);
+let refreshId = null;
-const refreshId = ref(null);
 
-let songs = [];
+const song = computed(() => songs.value[idx.value]);
-let idx = 0;
+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 || [];
+        if (Array.isArray(res.data)) {
-
+            songs.value = res.data;
-        idx = 0;
+            idx.value = 0;
-        song.value = songs[0] ?? null;
+        } 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;
+    if (!songs.value.length) return;
-
+    idx.value = (idx.value + 1) % songs.value.length;
-    song.value = songs[idx];
-    idx = (idx + 1) % songs.length;
 }
 
 onMounted(async () => {
     await fetchRecent();
-
+    intervalId = setInterval(nextSong, 5000);
-    intervalId.value = setInterval(nextSong, 5000);
+    refreshId = setInterval(fetchRecent, 120000);
-    refreshId.value = setInterval(fetchRecent, 120000);
 });
 
 onUnmounted(() => {
-    clearInterval(intervalId.value);
+    clearInterval(intervalId);
-    clearInterval(refreshId.value);
+    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>