refactor: Moved menu toggle into it's own component. (#688)

Co-authored-by: Priyanshu-ryu <[email protected]>

client/src/components/Anonymous.jsx

@@ -14,7 +14,7 @@ import { Dropdown, IconButton, Tooltip, Whisper } from 'rsuite';
 import { Icon } from '@rsuite/icons';
 
 // Icons
-import { BiArrowBack, BiDotsVerticalRounded } from 'react-icons/bi';
+import { BiArrowBack} from 'react-icons/bi';
 
 // Store
 import { socket } from 'src/lib/socketConnection';
@@ -30,15 +30,12 @@ import useKeyPress, { ShortcutFlags } from 'src/hooks/useKeyPress';
 import useCheckTimePassed from 'src/hooks/useCheckTimePassed';
 import { useAuth } from 'src/context/AuthContext';
 import { api } from 'src/lib/axios';
-
+import MenuToggle from './MenuToggle';
 const centerItems = `flex items-center justify-center`;
 
-const Anonymous = ({ 
-	onChatClosed,  
-
-}) => {
+const Anonymous = ({ onChatClosed }) => {
 	const { app, endSearch } = useApp();
-	const { authState } = useAuth()
+	const { authState } = useAuth();
 	const { currentChatId, onlineStatus } = app;
 	const { clearTimer } = useCheckTimePassed();
 
@@ -77,7 +74,7 @@ const Anonymous = ({
 		typingStatusTimeoutRef.current = setTimeout(() => {
 			setIsTyping(false);
 		}, 3000);
-	}, [])
+	}, []);
 
 	const onOnlineStatushandler = useCallback((onlineStatusState) => {
 		if (!onlineStatusState.includes('online')) {
@@ -111,7 +108,7 @@ const Anonymous = ({
 
 	const onNewMessage = useCallback(() => {
 		setIsTyping(false);
-	}, [])
+	}, []);
 
 	const emitClose = useCallback((err, chatClosed) => {
 		if (err) {
@@ -137,8 +134,7 @@ const Anonymous = ({
 		}
 
 		clearTimer();
-	}, [])
-
+	}, []);
 
 	const closeChatHandler = (autoSearch = false) => {
 		const currentChatId = currentChatIdRef.current;
@@ -150,19 +146,7 @@ const Anonymous = ({
 
 		setAutoSearchAfterClose(autoSearch);
 
-		socket.timeout(30000).emit(NEW_EVENT_CLOSE, currentChatId, emitClose)
-	};
-
-	const MenuToggle = (props, ref) => {
-		return (
-			<IconButton
-				{...props}
-				ref={ref}
-				icon={<Icon as={BiDotsVerticalRounded} />}
-				appearance="subtle"
-				circle
-			/>
-		);
+		socket.timeout(30000).emit(NEW_EVENT_CLOSE, currentChatId, emitClose);
 	};
 
 	const handleClose = (autoSearch = false) => {
@@ -174,57 +158,57 @@ const Anonymous = ({
 	};
 
 	const blockUser = async () => {
-		// Get the other user id 
+		// Get the other user id
 		const chattingPartnersId = state[currentChatId]?.userIds.find(
-			id => id !== authState.loginId && id !== authState.email
-		  );
+			(id) => id !== authState.loginId && id !== authState.email
+		);
 
-		  if (!chattingPartnersId) {
-			return { success: false, message: "could not find user to block" };
-		  }
+		if (!chattingPartnersId) {
+			return { success: false, message: 'could not find user to block' };
+		}
 
-	 	 try {
+		try {
 			const res = await api.post('/blockUser', {
-			  userIdToBlock: chattingPartnersId,
-			  currentUserId: authState.loginId
+				userIdToBlock: chattingPartnersId,
+				currentUserId: authState.loginId,
 			});
-		
+
 			if (res.status === 200) {
-			  return { success: true };
+				return { success: true };
 			} else {
-			  return { success: false, message: "Error reporting user" };
+				return { success: false, message: 'Error reporting user' };
 			}
-		  } catch (error) {
-			console.error("Error in reportUser:", error);
-			return { success: false, message: "An unexpected error occurred" };
-		  }
-	}
+		} catch (error) {
+			console.error('Error in reportUser:', error);
+			return { success: false, message: 'An unexpected error occurred' };
+		}
+	};
 
 	const handleBlock = async () => {
 		// Check if user have an account i.e. not a anonymous user
-		if(authState.loginType === "anonymous") {
-			 setDialog({
+		if (authState.loginType === 'anonymous') {
+			setDialog({
 				isOpen: true,
-				text: "You have to create an account first to access this feature!",
-				yesBtnText: "Create an account",
-				noBtnText: "Back to chat",
-				handler: () => navigate("/profile")
-			 })
-			 return
+				text: 'You have to create an account first to access this feature!',
+				yesBtnText: 'Create an account',
+				noBtnText: 'Back to chat',
+				handler: () => navigate('/profile'),
+			});
+			return;
 		}
 
 		try {
 			const result = await blockUser();
 			if (result.success) {
-			  alert('User blocked successfully');
-			  closeChatHandler(false)
+				alert('User blocked successfully');
+				closeChatHandler(false);
 			} else {
-			  alert(result.message || "Error blocking user. Please try again later.");
+				alert(result.message || 'Error blocking user. Please try again later.');
 			}
-		  } catch (err) {
-			console.error("Error in handleBlock:", err);
-		  }
-	}
+		} catch (err) {
+			console.error('Error in handleBlock:', err);
+		}
+	};
 
 	useKeyPress(['x'], () => handleClose(), ShortcutFlags.ctrl | ShortcutFlags.shift);
 	useKeyPress(['n'], () => handleClose(true), ShortcutFlags.ctrl | ShortcutFlags.alt);
@@ -322,7 +306,12 @@ const Anonymous = ({
 					</div>
 				</div>
 
-				<Dropdown placement="leftStart" style={{ zIndex: 3 }} renderToggle={MenuToggle} noCaret>
+				<Dropdown
+					placement="leftStart"
+					style={{ zIndex: 3 }}
+					renderToggle={(props, ref) => <MenuToggle {...props} ref={ref} />}
+					noCaret
+				>
 					<Dropdown.Item onClick={() => handleClose()} className="sm:w-[200px]">
 						<div className="flex items-center justify-between gap-2 flex-wrap">
 							<span>Close Chat</span>
@@ -337,7 +326,7 @@ const Anonymous = ({
 					</Dropdown.Item>
 					<Dropdown.Item onClick={() => handleBlock()} className="sm:w-[200px]">
 						<div className="flex  items-center justify-between gap-2 flex-wrap">
-							<span className='text-red'>Block User</span>
+							<span className="text-red">Block User</span>
 						</div>
 					</Dropdown.Item>
 				</Dropdown>
@@ -351,9 +340,7 @@ const Anonymous = ({
 					'flex-auto',
 				])}
 			>
-				<Chat 
-
-				/>
+				<Chat />
 			</div>
 		</div>
 	);
@@ -363,4 +350,4 @@ export default Anonymous;
 
 Anonymous.propTypes = {
 	onChatClosed: PropTypes.func,
-};
+};

client/src/components/MenuToggle.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@rsuite/icons';
+import { IconButton } from 'rsuite';
+import { BiDotsVerticalRounded } from 'react-icons/bi';
+
+const MenuToggle = React.forwardRef((props, ref) => {
+	return (
+		<IconButton
+			{...props}
+			ref={ref}
+			icon={<Icon as={BiDotsVerticalRounded} />}
+			appearance="subtle"
+			circle
+		/>
+	);
+});
+MenuToggle.displayName = 'MenuToggle';
+MenuToggle.propTypes = {
+	appearance: PropTypes.string,
+	circle: PropTypes.bool,
+};
+
+export default MenuToggle;