refactor(frontend): add CONNECTION_STATE and SUGGESTION_TYPE constants

- Add CONNECTION_STATE (disconnected, connecting, connected, failed)
- Add SUGGESTION_TYPE (toBeRecorded, toRecord)
- Update useWebRTC.js to use CONNECTION_STATE
- Update MatchChatPage.jsx to use CONNECTION_STATE
- Update RecordingTab.jsx to use SUGGESTION_TYPE

frontend/src/hooks/useWebRTC.js

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { getSocket } from '../services/socket';
+import { CONNECTION_STATE } from '../constants';
 
 // WebRTC configuration with STUN and TURN servers for NAT traversal
 const rtcConfig = {
@@ -39,7 +40,7 @@ const CHUNK_SIZE = 16384;
  * @returns {Object} WebRTC state and control functions
  */
 export const useWebRTC = (matchId, userId) => {
-  const [connectionState, setConnectionState] = useState('disconnected'); // disconnected, connecting, connected, failed
+  const [connectionState, setConnectionState] = useState(CONNECTION_STATE.DISCONNECTED);
   const [transferProgress, setTransferProgress] = useState(0);
   const [isTransferring, setIsTransferring] = useState(false);
   const [receivingFile, setReceivingFile] = useState(null);
@@ -117,7 +118,7 @@ export const useWebRTC = (matchId, userId) => {
       console.log('🔄 Connection state:', pc.connectionState);
       setConnectionState(pc.connectionState);
 
-      if (pc.connectionState === 'failed') {
+      if (pc.connectionState === CONNECTION_STATE.FAILED) {
         console.error('❌ WebRTC connection failed');
         cleanupConnection();
       }
@@ -154,17 +155,17 @@ export const useWebRTC = (matchId, userId) => {
   const setupDataChannelHandlers = useCallback((dc) => {
     dc.onopen = () => {
       console.log('✅ DataChannel opened');
-      setConnectionState('connected');
+      setConnectionState(CONNECTION_STATE.CONNECTED);
     };
 
     dc.onclose = () => {
       console.log('❌ DataChannel closed');
-      setConnectionState('disconnected');
+      setConnectionState(CONNECTION_STATE.DISCONNECTED);
     };
 
     dc.onerror = (error) => {
       console.error('❌ DataChannel error:', error);
-      setConnectionState('failed');
+      setConnectionState(CONNECTION_STATE.FAILED);
     };
 
     dc.onmessage = (event) => {
@@ -239,7 +240,7 @@ export const useWebRTC = (matchId, userId) => {
    */
   const createOffer = useCallback(async () => {
     try {
-      setConnectionState('connecting');
+      setConnectionState(CONNECTION_STATE.CONNECTING);
 
       const pc = initializePeerConnection();
       createDataChannel(pc);
@@ -257,7 +258,7 @@ export const useWebRTC = (matchId, userId) => {
       console.log('📤 Sent WebRTC offer');
     } catch (error) {
       console.error('Failed to create offer:', error);
-      setConnectionState('failed');
+      setConnectionState(CONNECTION_STATE.FAILED);
     }
   }, [initializePeerConnection, createDataChannel]);
 
@@ -266,7 +267,7 @@ export const useWebRTC = (matchId, userId) => {
    */
   const handleOffer = useCallback(async (offer) => {
     try {
-      setConnectionState('connecting');
+      setConnectionState(CONNECTION_STATE.CONNECTING);
 
       const pc = initializePeerConnection();
 
@@ -293,7 +294,7 @@ export const useWebRTC = (matchId, userId) => {
       console.log('📤 Sent WebRTC answer');
     } catch (error) {
       console.error('Failed to handle offer:', error);
-      setConnectionState('failed');
+      setConnectionState(CONNECTION_STATE.FAILED);
     }
   }, [initializePeerConnection, setupDataChannelHandlers]);
 
@@ -312,7 +313,7 @@ export const useWebRTC = (matchId, userId) => {
       console.log('✅ Remote description set (answer). ICE should connect now...');
     } catch (error) {
       console.error('Failed to handle answer:', error);
-      setConnectionState('failed');
+      setConnectionState(CONNECTION_STATE.FAILED);
     }
   }, []);
 
@@ -414,7 +415,7 @@ export const useWebRTC = (matchId, userId) => {
       peerConnectionRef.current = null;
     }
 
-    setConnectionState('disconnected');
+    setConnectionState(CONNECTION_STATE.DISCONNECTED);
     setIsTransferring(false);
     setTransferProgress(0);
     setReceivingFile(null);