more stores

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>
 

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>
 

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>