From a081549f2dbdc57c126400ed8ae5677899561dd7 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Thu, 22 Jan 2026 15:49:34 +0000
Subject: [PATCH] more stores

---
 nginx/vue/src/components/home/Feed.vue      | 73 +++++--------------
 nginx/vue/src/components/home/Listening.vue | 45 +++---------
 nginx/vue/src/components/quick/Chat.vue     | 26 ++-----
 nginx/vue/src/stores/auth.js                | 10 +--
 nginx/vue/src/stores/messages.js            | 77 +++++++++++++++++++++
 nginx/vue/src/stores/models.js              | 48 +++++++++++++
 nginx/vue/src/stores/posts.js               | 51 ++++++++++++++
 nginx/vue/src/stores/songs.js               | 46 ++++++++++++
 nginx/vue/src/stores/users.js               |  0
 nginx/vue/src/views/Home.vue                |  2 +-
 10 files changed, 262 insertions(+), 116 deletions(-)
 create mode 100644 nginx/vue/src/stores/messages.js
 create mode 100644 nginx/vue/src/stores/models.js
 create mode 100644 nginx/vue/src/stores/posts.js
 create mode 100644 nginx/vue/src/stores/songs.js
 create mode 100644 nginx/vue/src/stores/users.js

diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
index a3391da..43d6856 100644
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -1,76 +1,41 @@
 <script setup>
 import Markdown from "@/components/quick/Markdown.vue";
 
-import { ref, onMounted } from "vue";
-import axios from "axios";
+import { ref, computed, onMounted } from "vue";
 import { useAuthStore } from "@/stores/auth";
+import { usePostsStore } from "@/stores/posts";
 
-const auth = useAuthStore();
-const userOwnsPost = ref(false);
+const authStore = useAuthStore();
+const postsStore = usePostsStore();
 
-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 = [];
-let idx = 0;
-let len = 0;
+const idx = ref(0);
 
-async function fetchPosts() {
-    try {
-        const res = await axios.get("/api/posts");
-        if (!Array.isArray(res.data)) {
-            throw new Error("Invalid response from posts API");
-        }
-        posts = res.data;
-        len = posts.length;
-        post.value = posts[0];
-        userOwnsPost.value = post.value.author.username == auth.user.username;
-        leftCap.value = true;
-    } catch (err) {
-        console.log("Cannot connect to API");
-    }
-}
+const leftCap = computed(() => idx.value === 0);
+const rightCap = computed(() => idx.value === postsStore.postsCount - 1);
+
+const post = computed(() => postsStore.posts[idx.value]);
+const userOwnsPost = computed(
+    () => post.value.author.username == authStore.user.username,
+);
 
 function nextPost() {
-    if (idx < len - 1) {
-        idx++;
-        rightCap.value = idx === len - 1;
-        leftCap.value = idx === 0;
-        post.value = posts[idx];
+    if (idx.value < postsStore.postsCount - 1) {
+        idx.value++;
     }
 }
 
 function prevPost() {
-    if (idx > 0) {
-        idx--;
-        rightCap.value = idx === len - 1;
-        leftCap.value = idx === 0;
-        post.value = posts[idx];
+    if (idx.value > 0) {
+        idx.value--;
     }
 }
 
-async function deletePost() {
-    try {
-        const res = await axios.delete(
-            `/api/posts/${encodeURIComponent(post.value.id)}`,
-        );
-        console.log("Deleted:", res.data);
-        fetchPosts();
-    } catch (err) {
-        console.error("Delete failed:", err);
-    }
+function deletePost() {
+    postsStore.deletePost(post.value);
 }
 
 onMounted(() => {
-    fetchPosts();
+    postsStore.fetchPosts();
 });
 </script>
 
diff --git a/nginx/vue/src/components/home/Listening.vue b/nginx/vue/src/components/home/Listening.vue
index bdcab4c..f84b5a9 100644
--- a/nginx/vue/src/components/home/Listening.vue
+++ b/nginx/vue/src/components/home/Listening.vue
@@ -1,55 +1,28 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from "vue";
-import axios from "axios";
+import { useSongsStore } from "@/stores/songs";
+
+const songsStore = useSongsStore();
+const idx = ref(0);
+const song = computed(() => songsStore.songs[idx.value]);
 
 let nextId = null;
 let refreshId = null;
 
-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");
-        if (!Array.isArray(res.data)) {
-            throw new Error("Invalid response from Spotify API");
-        }
-
-        songs.value = res.data;
-        idx.value = 0;
-    } catch (err) {
-        console.error("Cannot connect to Spotify API", err);
-    }
-    refreshId = setTimeout(fetchRecent, 120000);
-}
-
 function nextSong() {
     clearTimeout(nextId);
-    if (!songs.value.length) return;
-    idx.value = (idx.value + 1) % songs.value.length;
     nextId = setTimeout(nextSong, 5000);
+    idx.value = (idx.value + 1) % songsStore.songsCount;
 }
 
-onMounted(async () => {
-    await fetchRecent();
+onMounted(() => {
     nextId = setTimeout(nextSong, 5000);
-    refreshId = setTimeout(fetchRecent, 120000);
+    refreshId = setInterval(songsStore.fetchSongs, 120000);
 });
 
 onUnmounted(() => {
     clearTimeout(nextId);
-    clearTimeout(refreshId);
+    clearInterval(refreshId);
 });
 </script>
 
diff --git a/nginx/vue/src/components/quick/Chat.vue b/nginx/vue/src/components/quick/Chat.vue
index d5d4d0a..719309b 100644
--- a/nginx/vue/src/components/quick/Chat.vue
+++ b/nginx/vue/src/components/quick/Chat.vue
@@ -1,30 +1,14 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue";
-// Connect to websocket
-const url = "/api/ws";
+import { useMessagesStore } from "@/stores/messages";
 
-const socket = ref(null);
-const messages = ref([]);
-const messageInput = ref(
-    "This will work soon but for now is bait, please don't worry... it will all come together soon :)",
-);
+const messagesStore = useMessagesStore();
+const messages = computed(() => messagesStore.messages);
 
 onMounted(() => {
-    socket.value = new WebSocket(url);
-
-    socket.value.addEventListener("message", (event) => {
-        const message = JSON.parse(event.data);
-        messages.value.push(message);
-    });
+    messagesStore.connect();
 });
-
-function sendMessage() {
-    socket.value.send(JSON.stringify({ content: messageInput.value }));
-    messageInput.value = "";
-}
-
 onUnmounted(() => {
-    socket.value?.close();
+    messagesStore.disconnect();
 });
 </script>
 
diff --git a/nginx/vue/src/stores/auth.js b/nginx/vue/src/stores/auth.js
index 091070c..93110e3 100644
--- a/nginx/vue/src/stores/auth.js
+++ b/nginx/vue/src/stores/auth.js
@@ -4,10 +4,10 @@ import axios from "axios";
 
 export const useAuthStore = defineStore("auth", () => {
   const user = ref({});
-  checkToken();
-
   const loggedIn = computed(() => !!user.value.username);
 
+  checkToken();
+
   async function logOut() {
     try {
       const res = await axios.post("/api/auth/logout");
@@ -61,11 +61,13 @@ export const useAuthStore = defineStore("auth", () => {
 
   return {
     user,
-    checkToken,
+
+    loggedIn,
+
     logIn,
+    checkToken,
     refreshToken,
     logOut,
     createUser,
-    loggedIn,
   };
 });
diff --git a/nginx/vue/src/stores/messages.js b/nginx/vue/src/stores/messages.js
new file mode 100644
index 0000000..51b5730
--- /dev/null
+++ b/nginx/vue/src/stores/messages.js
@@ -0,0 +1,77 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+const URL = "/api/ws";
+
+const message_template = {
+  id: 0,
+  content: "Yo",
+};
+
+export const useMessagesStore = defineStore("messages", () => {
+  const socket = ref(null);
+  const messages = ref([message_template]);
+  const isConnected = ref(false);
+  const lastError = ref(null);
+
+  const messagesCount = computed(() => messages.value.length);
+
+  function connect() {
+    if (socket.value && isConnected.value) return;
+
+    socket.value = new WebSocket(URL);
+
+    socket.value.onopen = () => {
+      isConnected.value = true;
+      lastError.value = null;
+    };
+
+    socket.value.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        messages.value.push(data);
+      } catch {
+        // fallback if server sends plain text
+        messages.value.push(event.data);
+      }
+    };
+
+    socket.value.onerror = (error) => {
+      lastError.value = error;
+    };
+
+    socket.value.onclose = () => {
+      isConnected.value = false;
+      socket.value = null;
+    };
+  }
+
+  function disconnect() {
+    if (!socket.value) return;
+    socket.value.close();
+    socket.value = null;
+    isConnected.value = false;
+  }
+
+  function sendMessage(payload) {
+    if (!socket.value || !isConnected.value) return;
+    socket.value.send(JSON.stringify(payload));
+  }
+
+  function clearMessages() {
+    messages.value = [];
+  }
+
+  return {
+    messages,
+    isConnected,
+    lastError,
+
+    messagesCount,
+
+    connect,
+    disconnect,
+    sendMessage,
+    clearMessages,
+  };
+});
diff --git a/nginx/vue/src/stores/models.js b/nginx/vue/src/stores/models.js
new file mode 100644
index 0000000..20ce55d
--- /dev/null
+++ b/nginx/vue/src/stores/models.js
@@ -0,0 +1,48 @@
+export class User {
+  constructor({ id, createdAt, updatedAt, deletedAt, username, admin }) {
+    this.id = id;
+    this.createdAt = new Date(createdAt);
+    this.updatedAt = new Date(updatedAt);
+    this.deletedAt = deletedAt ? new Date(deletedAt) : null;
+    this.username = username;
+    this.admin = admin;
+  }
+}
+
+export class Message {
+  constructor({ id, text, author, createdAt, deletedAt }) {
+    this.id = id;
+    this.content = text;
+    this.author = author ? new User(author) : null;
+    this.createdAt = new Date(createdAt);
+    this.deletedAt = deletedAt ? new Date(deletedAt) : null;
+  }
+}
+
+export class Post {
+  constructor({
+    id,
+    title,
+    author,
+    authorID,
+    content,
+    createdAt,
+    updatedAt,
+    deletedAt,
+  }) {
+    this.id = id;
+    this.title = title;
+    this.authorID = authorID;
+    this.author = author ? new User(author) : null;
+    this.content = content;
+    this.createdAt = new Date(createdAt);
+    this.updatedAt = new Date(updatedAt);
+    this.deletedAt = deletedAt ? new Date(deletedAt) : null;
+  }
+}
+
+// Utility function to parse posts from API
+export function parsePosts(postsArray) {
+  if (!Array.isArray(postsArray)) return [];
+  return postsArray.map((post) => new Post(post));
+}
diff --git a/nginx/vue/src/stores/posts.js b/nginx/vue/src/stores/posts.js
new file mode 100644
index 0000000..46a98d3
--- /dev/null
+++ b/nginx/vue/src/stores/posts.js
@@ -0,0 +1,51 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import axios from "axios";
+
+const post_template = {
+  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(),
+};
+
+export const usePostsStore = defineStore("posts", () => {
+  const posts = ref([post_template]);
+
+  const postsCount = computed(() => posts.value.length);
+
+  async function fetchPosts() {
+    try {
+      const res = await axios.get("/api/posts");
+      if (!Array.isArray(res.data)) {
+        throw new Error("Invalid response from posts API");
+      }
+      posts.value = res.data;
+    } catch (err) {
+      console.error("Cannot connect to Post API", err);
+    }
+  }
+
+  async function deletePost(post) {
+    try {
+      const res = await axios.delete(
+        `/api/posts/${encodeURIComponent(post.id)}`,
+      );
+      console.log("Deleted:", res.data);
+      fetchPosts();
+    } catch (err) {
+      console.error("Delete failed:", err);
+    }
+  }
+  return {
+    posts,
+
+    postsCount,
+
+    fetchPosts,
+    deletePost,
+  };
+});
diff --git a/nginx/vue/src/stores/songs.js b/nginx/vue/src/stores/songs.js
new file mode 100644
index 0000000..75bca4e
--- /dev/null
+++ b/nginx/vue/src/stores/songs.js
@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import axios from "axios";
+
+const song_template = {
+  id: 1,
+  track: {
+    id: 1,
+    name: "^_^",
+    album: { images: [{ url: "/img/Untitled.png" }] },
+    artists: [{ name: ">_<" }],
+  },
+};
+
+export const useSongsStore = defineStore("songs", () => {
+  const songs = ref([song_template]);
+
+  const songsCount = computed(() => songs.value.length);
+
+  fetchSongs();
+
+  let refreshId = null;
+  refreshId = setTimeout(fetchSongs, 120000);
+
+  async function fetchSongs() {
+    try {
+      const res = await axios.get("/api/spotify/recent");
+      if (!Array.isArray(res.data)) {
+        throw new Error("Invalid response from Spotify API");
+      }
+      songs.value = res.data;
+      refreshId = setTimeout(fetchSongs, 120000);
+      console.log("lol");
+    } catch (err) {
+      console.error("Cannot connect to Spotify API", err);
+    }
+  }
+
+  return {
+    songs,
+
+    songsCount,
+
+    fetchSongs,
+  };
+});
diff --git a/nginx/vue/src/stores/users.js b/nginx/vue/src/stores/users.js
new file mode 100644
index 0000000..e69de29
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index c1ed42f..040103d 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -20,7 +20,7 @@ import Watching from "@/components/home/Watching.vue";
         <div class="flex-col tr">
             <Time class="bdr-2 bg-primary" />
             <Timer class="bdr-2 bg-primary" />
-            <Chat class="bdr-2 bg-primary" />
+            <!-- <Chat class="bdr-2 bg-primary" /> -->
         </div>
     </div>
     <div class="background halftone" />