⏪ Pick up the single-page application as frontend

web/src/stores/notifications.ts

@@ -0,0 +1,64 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { checkLoggedIn, getAtk } from "@/stores/userinfo";
+import { request } from "@/scripts/request";
+
+export const useNotifications = defineStore("notifications", () => {
+  let socket: WebSocket;
+
+  const loading = ref(false);
+
+  const notifications = ref<any[]>([]);
+  const total = ref(0)
+
+  async function list() {
+    loading.value = true;
+    const res = await request(
+      "/api/notifications?" +
+      new URLSearchParams({
+        take: (25).toString(),
+        offset: (0).toString()
+      }),
+      {
+        headers: { Authorization: `Bearer ${getAtk()}` }
+      }
+    );
+    if (res.status === 200) {
+      const data = await res.json();
+      notifications.value = data["data"];
+      total.value = data["count"];
+    }
+    loading.value = false;
+  }
+
+  function remove(idx: number) {
+    notifications.value.splice(idx, 1)
+    total.value--;
+  }
+
+  async function connect() {
+    if (!(checkLoggedIn())) return;
+
+    const uri = `ws://${window.location.host}/api/notifications/listen`;
+
+    socket = new WebSocket(uri + `?tk=${getAtk() as string}`);
+
+    socket.addEventListener("open", (event) => {
+      console.log("[NOTIFICATIONS] The listen websocket has been established... ", event.type);
+    });
+    socket.addEventListener("close", (event) => {
+      console.warn("[NOTIFICATIONS] The listen websocket is disconnected... ", event.reason, event.code);
+    });
+    socket.addEventListener("message", (event) => {
+      const data = JSON.parse(event.data);
+      notifications.value.push(data);
+      total.value++;
+    });
+  }
+
+  function disconnect() {
+    socket.close();
+  }
+
+  return { loading, notifications, total, list, remove, connect, disconnect };
+});

web/src/stores/userinfo.ts

@@ -0,0 +1,54 @@
+import Cookie from "universal-cookie"
+import { defineStore } from "pinia"
+import { ref } from "vue"
+import { request } from "@/scripts/request"
+
+export interface Userinfo {
+  isLoggedIn: boolean
+  displayName: string
+  data: any
+}
+
+const defaultUserinfo: Userinfo = {
+  isLoggedIn: false,
+  displayName: "Citizen",
+  data: null,
+}
+
+export function getAtk(): string {
+  return new Cookie().get("__hydrogen_atk")
+}
+
+export function checkLoggedIn(): boolean {
+  return new Cookie().get("__hydrogen_rtk")
+}
+
+export const useUserinfo = defineStore("userinfo", () => {
+  const userinfo = ref(defaultUserinfo)
+  const isReady = ref(false)
+
+  async function readProfiles() {
+    if (!checkLoggedIn()) {
+      isReady.value = true
+    }
+
+    const res = await request("/api/users/me", {
+      headers: { Authorization: `Bearer ${getAtk()}` },
+    })
+
+    if (res.status !== 200) {
+      return
+    }
+
+    const data = await res.json()
+
+    isReady.value = true
+    userinfo.value = {
+      isLoggedIn: true,
+      displayName: data["nick"],
+      data: data,
+    }
+  }
+
+  return { userinfo, isReady, readProfiles }
+})