diff --git a/frontend/src/components/Auth/TwoFactorAuthSignIn.js b/frontend/src/components/Auth/TwoFactorAuthSignIn.js index d65b4065..db353296 100644 --- a/frontend/src/components/Auth/TwoFactorAuthSignIn.js +++ b/frontend/src/components/Auth/TwoFactorAuthSignIn.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import { useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; import axios from "axios"; @@ -20,15 +20,16 @@ const TwoFactorAuthSignIn = ({ username, password, setIsTwoFactorAuth, available const [otpSent, setOtpSent] = useState(false); const [error, setError] = useState(""); const { t } = useTranslation(); + const tRef = useRef(t); useEffect(() => { if (!otpSent) return; - addNotification('info', t('auth.twoFactor.successMessage')); + addNotification('info', tRef.current('auth.twoFactor.successMessage')); const timeout = setTimeout(() => { setOtpSent(false); }, 5000); return () => clearTimeout(timeout); - }, [otpSent, addNotification, t]); + }, [otpSent, addNotification]); const handlePlatform = platform => { if (otpSent) return; diff --git a/frontend/src/components/Root/index.js b/frontend/src/components/Root/index.js index 481a0cbd..ebdad5e1 100644 --- a/frontend/src/components/Root/index.js +++ b/frontend/src/components/Root/index.js @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState, useRef } from 'react'; import { Outlet, useLocation } from 'react-router-dom'; import NavBar from '../Navigation/Navigation'; import Chat from '../Chat/Chat'; @@ -19,6 +19,7 @@ const Root = () => { const [audio] = useState(new Audio('/sounds/pong-theme.mp3')); const [audioGame] = useState(new Audio('/sounds/pong-ingame.mp3')); const { t } = useTranslation(); + const tRef = useRef(t); const activateMusic = useCallback(() => { if (!hasInteracted) { @@ -45,7 +46,7 @@ const Root = () => { const leaveTournament = async () => { try { await API.delete(`/tournaments/@me`); - addNotification('info', t('game.tournaments.leaveMessage')); + addNotification('info', tRef.current('game.tournaments.leaveMessage')); } catch (error) { addNotification('error', error?.response?.data?.error || 'Error leaving tournament'); } @@ -54,7 +55,7 @@ const Root = () => { leaveTournament(); console.log('index.js: leaving tournament'); } - }, [location, user?.tournamentID, addNotification, setUser, t]); + }, [location, user?.tournamentID, addNotification, setUser]); useEffect(() => { if (hasInteracted && showPersistentUI && isLoggedIn) { diff --git a/frontend/src/context/ChatContext.js b/frontend/src/context/ChatContext.js index 1fd0b23d..b3af4f97 100644 --- a/frontend/src/context/ChatContext.js +++ b/frontend/src/context/ChatContext.js @@ -20,6 +20,7 @@ export const ChatProvider = ({ children }) => { const [unreadCounts, setUnreadCounts] = useState({}); const [sendNotification, setSendNotification] = useState(null); const { t } = useTranslation(); + const tRef = useRef(t); // State for managing direct messages const [directMessage, setDirectMessage] = useState({ @@ -104,10 +105,10 @@ export const ChatProvider = ({ children }) => { useEffect(() => { if (sendNotification) { - addNotification('info', t('chat.notifications.messageReceived', { username: `${sendNotification}` })); + addNotification('info', tRef.current('chat.notifications.messageReceived', { username: `${sendNotification}` })); setSendNotification(null); } - }, [sendNotification, addNotification, t]); + }, [sendNotification, addNotification]); useEffect(() => { const connectWSChat = async () => { @@ -177,11 +178,11 @@ export const ChatProvider = ({ children }) => { }); setIsRefetch(true); if (userFrom.status === 'pending') { - addNotification('info', t('chat.notifications.friendRequest.received', { username: `${userFrom.displayName}` })); + addNotification('info', tRef.current('chat.notifications.friendRequest.received', { username: `${userFrom.displayName}` })); } else if (userFrom.status === 'rejected') { - addNotification('info', t('chat.notifications.friendRequest.declined', { username: `${userTo.displayName}` })); + addNotification('info', tRef.current('chat.notifications.friendRequest.declined', { username: `${userTo.displayName}` })); } else if (userFrom.status === 'accepted') { - addNotification('info', t('chat.notifications.friendRequest.accepted', { username: `${userTo.displayName}` })); + addNotification('info', tRef.current('chat.notifications.friendRequest.accepted', { username: `${userTo.displayName}` })); }; } else if (response.type === 'challenge_update') { const formattedData = { @@ -191,9 +192,9 @@ export const ChatProvider = ({ children }) => { } if (formattedData.invite.status === 'DECLINED') { - addNotification('info', t('chat.notifications.challenge.accepted', { username: `${formattedData.invite.invitee.displayName}` })); + addNotification('info', tRef.current('chat.notifications.challenge.accepted', { username: `${formattedData.invite.invitee.displayName}` })); } else if (formattedData.invite.status === 'ACCEPTED') { - addNotification('info', t('chat.notifications.challenge.declined', { username: `${formattedData.invite.invitee.displayName}` })); + addNotification('info', tRef.current('chat.notifications.challenge.declined', { username: `${formattedData.invite.invitee.displayName}` })); navigate('/game-challenge'); } } @@ -223,7 +224,7 @@ export const ChatProvider = ({ children }) => { console.log('WebSocket for Chat closed'); } }; - }, [addNotification, setIsRefetch, navigate, t]); + }, [addNotification, setIsRefetch, navigate]); const contextValue = useMemo(() => ({ conversations, diff --git a/frontend/src/context/TournamentContext.js b/frontend/src/context/TournamentContext.js index 022e01ff..d993497f 100644 --- a/frontend/src/context/TournamentContext.js +++ b/frontend/src/context/TournamentContext.js @@ -22,6 +22,7 @@ const TournamentProvider = ({ children }) => { const userIDRef = useRef(null); const heartbeatIntervalRef = useRef(null); const { t } = useTranslation(); + const tRef = useRef(t); const sendMessage = useCallback((message) => { if (socketTournament.current && socketTournament.current.readyState === WebSocket.OPEN) { @@ -185,7 +186,7 @@ const TournamentProvider = ({ children }) => { const newToken = await refreshToken(); if (newToken) { connectWSTournament(); - addNotification('info', t('game.tournaments.reconnectMessage')); + addNotification('info', tRef.current('game.tournaments.reconnectMessage')); } else { console.log('WebSocket for Tournaments failed to refresh the token'); } @@ -202,7 +203,7 @@ const TournamentProvider = ({ children }) => { console.log('WebSocket for Tournaments closed'); } }; - }, [identify, heartbeat, navigate, updateTournament, addNotification, t]); + }, [identify, heartbeat, navigate, updateTournament, addNotification]); return (