translations: Fixed dependency loop with useEffect

okbrandon · Nov 14, 2024 · 5801405 · 5801405
1 parent aed298d
commit 5801405
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
 		<TournamentContext.Provider value={{