update "just now" time
Some checks are pending
Deploy Website / deploy (push) Waiting to run
Deploy Backend / deploy (push) Successful in 4m25s

This commit is contained in:
Lee 2024-10-13 04:51:16 +01:00
parent 684ac4660e
commit 0e3b2252a5
3 changed files with 21 additions and 19 deletions

@ -9,7 +9,7 @@ export function timeAgo(input: Date) {
const now = new Date().getTime(); const now = new Date().getTime();
const deltaSeconds = Math.floor((now - inputDate) / 1000); // Get time difference in seconds const deltaSeconds = Math.floor((now - inputDate) / 1000); // Get time difference in seconds
if (deltaSeconds <= 60) { if (deltaSeconds <= 10) {
return "just now"; return "just now";
} }

@ -1,14 +1,15 @@
"use client"; "use client";
import { useScoreSaberWebsocket } from "@/hooks/use-scoresaber-websocket";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import ScoreSaberPlayerScoreToken from "@ssr/common/types/token/scoresaber/score-saber-player-score-token"; import ScoreSaberPlayerScoreToken from "@ssr/common/types/token/scoresaber/score-saber-player-score-token";
import Score from "@/components/score/score"; import Score from "@/components/score/score";
import { parseDate } from "@ssr/common/utils/time-utils"; import { parseDate } from "@ssr/common/utils/time-utils";
import Link from "next/link"; 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() { export default function ScoreFeed() {
const { connected, message } = useScoreSaberWebsocket(); const { connected, message } = useWebSocket<ScoreSaberWebsocketMessageToken>("wss://scoresaber.com/ws");
const [scores, setScores] = useState<ScoreSaberPlayerScoreToken[]>([]); const [scores, setScores] = useState<ScoreSaberPlayerScoreToken[]>([]);
useEffect(() => { useEffect(() => {
@ -21,7 +22,7 @@ export default function ScoreFeed() {
} }
setScores(prev => { setScores(prev => {
const newScores = [...prev, message.commandData]; const newScores = [...prev, commandData];
if (newScores.length > 8) { if (newScores.length > 8) {
newScores.pop(); newScores.pop();
} }

@ -1,12 +1,14 @@
import { useEffect, useRef, useState } from "react"; 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 [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 socketRef = useRef<WebSocket | null>(null);
const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null); const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
@ -21,21 +23,20 @@ export const useScoreSaberWebsocket = () => {
} }
const connectWebSocket = () => { const connectWebSocket = () => {
socketRef.current = new WebSocket("wss://scoresaber.com/ws"); socketRef.current = new WebSocket(url);
socketRef.current.onopen = () => { socketRef.current.onopen = () => {
setConnected(true); setConnected(true);
}; };
socketRef.current.onmessage = event => { socketRef.current.onmessage = event => {
// Ignore welcome message try {
if (event.data === "Connected to the ScoreSaber WSS") { // Handle incoming messages and store them in state as type T
return; 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 = () => { socketRef.current.onclose = () => {
@ -53,10 +54,10 @@ export const useScoreSaberWebsocket = () => {
if (reconnectTimeoutRef.current) { if (reconnectTimeoutRef.current) {
clearTimeout(reconnectTimeoutRef.current); clearTimeout(reconnectTimeoutRef.current);
} }
// Try reconnecting after 5 seconds // Try reconnecting after the specified delay
reconnectTimeoutRef.current = setTimeout(() => { reconnectTimeoutRef.current = setTimeout(() => {
connectWebSocket(); connectWebSocket();
}, 5000); }, reconnectDelay);
}; };
// Initialize WebSocket connection // Initialize WebSocket connection
@ -72,7 +73,7 @@ export const useScoreSaberWebsocket = () => {
clearTimeout(reconnectTimeoutRef.current); clearTimeout(reconnectTimeoutRef.current);
} }
}; };
}, [mounted]); }, [mounted, url, reconnectDelay]);
return { connected, message }; return { connected, message };
}; };