From 0e3b2252a56102936d27adfc0ff5b68d0e2fa29e Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sun, 13 Oct 2024 04:51:16 +0100
Subject: [PATCH] update "just now" time

---
 projects/common/src/utils/time-utils.ts       |  2 +-
 .../score/score-feed/score-feed.tsx           |  7 +++--
 ...oresaber-websocket.ts => use-websocket.ts} | 31 ++++++++++---------
 3 files changed, 21 insertions(+), 19 deletions(-)
 rename projects/website/src/hooks/{use-scoresaber-websocket.ts => use-websocket.ts} (63%)

diff --git a/projects/common/src/utils/time-utils.ts b/projects/common/src/utils/time-utils.ts
index 26c14ac..569d25b 100644
--- a/projects/common/src/utils/time-utils.ts
+++ b/projects/common/src/utils/time-utils.ts
@@ -9,7 +9,7 @@ export function timeAgo(input: Date) {
   const now = new Date().getTime();
   const deltaSeconds = Math.floor((now - inputDate) / 1000); // Get time difference in seconds
 
-  if (deltaSeconds <= 60) {
+  if (deltaSeconds <= 10) {
     return "just now";
   }
 
diff --git a/projects/website/src/components/score/score-feed/score-feed.tsx b/projects/website/src/components/score/score-feed/score-feed.tsx
index 7123862..ef07ab2 100644
--- a/projects/website/src/components/score/score-feed/score-feed.tsx
+++ b/projects/website/src/components/score/score-feed/score-feed.tsx
@@ -1,14 +1,15 @@
 "use client";
 
-import { useScoreSaberWebsocket } from "@/hooks/use-scoresaber-websocket";
 import { useEffect, useState } from "react";
 import ScoreSaberPlayerScoreToken from "@ssr/common/types/token/scoresaber/score-saber-player-score-token";
 import Score from "@/components/score/score";
 import { parseDate } from "@ssr/common/utils/time-utils";
 import Link from "next/link";
+import { useWebSocket } from "@/hooks/use-websocket";
+import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message";
 
 export default function ScoreFeed() {
-  const { connected, message } = useScoreSaberWebsocket();
+  const { connected, message } = useWebSocket<ScoreSaberWebsocketMessageToken>("wss://scoresaber.com/ws");
   const [scores, setScores] = useState<ScoreSaberPlayerScoreToken[]>([]);
 
   useEffect(() => {
@@ -21,7 +22,7 @@ export default function ScoreFeed() {
     }
 
     setScores(prev => {
-      const newScores = [...prev, message.commandData];
+      const newScores = [...prev, commandData];
       if (newScores.length > 8) {
         newScores.pop();
       }
diff --git a/projects/website/src/hooks/use-scoresaber-websocket.ts b/projects/website/src/hooks/use-websocket.ts
similarity index 63%
rename from projects/website/src/hooks/use-scoresaber-websocket.ts
rename to projects/website/src/hooks/use-websocket.ts
index 668ef45..db10c8a 100644
--- a/projects/website/src/hooks/use-scoresaber-websocket.ts
+++ b/projects/website/src/hooks/use-websocket.ts
@@ -1,12 +1,14 @@
 import { useEffect, useRef, useState } from "react";
-import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message";
 
 /**
- * Connects to the ScoreSaber websocket.
+ * Generic WebSocket hook for connecting and handling WebSocket messages of type T.
+ *
+ * @param url - The WebSocket server URL.
+ * @param reconnectDelay - Optional delay (in milliseconds) before attempting to reconnect (default is 5000ms).
  */
-export const useScoreSaberWebsocket = () => {
+export const useWebSocket = <T>(url: string, reconnectDelay: number = 5000) => {
   const [connected, setConnected] = useState(false);
-  const [message, setMessage] = useState<ScoreSaberWebsocketMessageToken | null>(null); // Store the incoming message
+  const [message, setMessage] = useState<T | null>(null); // Store the incoming message of type T
   const socketRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [mounted, setMounted] = useState(false);
@@ -21,21 +23,20 @@ export const useScoreSaberWebsocket = () => {
     }
 
     const connectWebSocket = () => {
-      socketRef.current = new WebSocket("wss://scoresaber.com/ws");
+      socketRef.current = new WebSocket(url);
 
       socketRef.current.onopen = () => {
         setConnected(true);
       };
 
       socketRef.current.onmessage = event => {
-        // Ignore welcome message
-        if (event.data === "Connected to the ScoreSaber WSS") {
-          return;
+        try {
+          // Handle incoming messages and store them in state as type T
+          const messageData: T = JSON.parse(event.data);
+          setMessage(messageData);
+        } catch (error) {
+          console.error("Error parsing WebSocket message:", error);
         }
-
-        // Handle incoming messages here and store them in state
-        const messageData = JSON.parse(event.data);
-        setMessage(messageData); // Store the message in the state
       };
 
       socketRef.current.onclose = () => {
@@ -53,10 +54,10 @@ export const useScoreSaberWebsocket = () => {
       if (reconnectTimeoutRef.current) {
         clearTimeout(reconnectTimeoutRef.current);
       }
-      // Try reconnecting after 5 seconds
+      // Try reconnecting after the specified delay
       reconnectTimeoutRef.current = setTimeout(() => {
         connectWebSocket();
-      }, 5000);
+      }, reconnectDelay);
     };
 
     // Initialize WebSocket connection
@@ -72,7 +73,7 @@ export const useScoreSaberWebsocket = () => {
         clearTimeout(reconnectTimeoutRef.current);
       }
     };
-  }, [mounted]);
+  }, [mounted, url, reconnectDelay]);
 
   return { connected, message };
 };