refactor: standardize socket communication by replacing socket prop usage with window.socketManager across multiple components for improved consistency and maintainability

src/components/profile/OrderProcessingService.js

@@ -145,26 +145,24 @@ class OrderProcessingService {
     }
 
     // If socket is ready, process immediately
-    const context = this.getContext();
-    if (context && context.socket && context.socket.connected) {
+
       const { isLoggedIn: isAuthenticated } = isUserLoggedIn();
       if (isAuthenticated) {
         this.sendStripeOrder();
         return;
       }
-    }
+
 
     // Wait for socket to be ready
     this.socketHandler = () => {
-      const context = this.getContext();
-      if (context && context.socket && context.socket.connected) {
+
         const { isLoggedIn: isAuthenticated } = isUserLoggedIn();
         const state = this.getState();
         
         if (isAuthenticated && state.showPaymentConfirmation && !state.isCompletingOrder) {
           this.sendStripeOrder();
         }
-      }
+
       // Clean up
       if (this.socketHandler) {
         window.removeEventListener('cart', this.socketHandler);
@@ -213,9 +211,8 @@ class OrderProcessingService {
       saveAddressForFuture,
     };
 
-    // Emit stripe order to backend via socket.io
-    const context = this.getContext();
-    context.socket.emit("issueStripeOrder", orderData, (response) => {
+
+    window.socketManager.emit("issueStripeOrder", orderData, (response) => {
       if (response.success) {
         this.setState({
           isCompletingOrder: false,
@@ -247,9 +244,8 @@ class OrderProcessingService {
 
   // Process regular (non-Stripe) orders
   processRegularOrder(orderData) {
-    const context = this.getContext();
-    if (context && context.socket && context.socket.connected) {
-      context.socket.emit("issueOrder", orderData, (response) => {
+
+      window.socketManager.emit("issueOrder", orderData, (response) => {
         if (response.success) {
           // Clear the cart
           window.cart = [];
@@ -274,20 +270,12 @@ class OrderProcessingService {
           });
         }
       });
-    } else {
-      console.error("Socket context not available");
-      this.setState({
-        isCompletingOrder: false,
-        completionError: "Cannot connect to server. Please try again later.",
-      });
-    }
   }
 
   // Create Stripe payment intent
   createStripeIntent(totalAmount, loadStripeComponent) {
-    const context = this.getContext();
-    if (context && context.socket && context.socket.connected) {
-      context.socket.emit(
+
+      window.socketManager.emit(
         "createStripeIntent",
         { amount: totalAmount },
         (response) => {
@@ -302,20 +290,13 @@ class OrderProcessingService {
           }
         }
       );
-    } else {
-      console.error("Socket context not available");
-      this.setState({
-        isCompletingOrder: false,
-        completionError: "Cannot connect to server. Please try again later.",
-      });
-    }
-  }
+  };
+
+
 
   // Create Mollie payment intent
   createMollieIntent(mollieOrderData) {
-    const context = this.getContext();
-    if (context && context.socket && context.socket.connected) {
-      context.socket.emit(
+      window.socketManager.emit(
         "createMollieIntent",
         mollieOrderData,
         (response) => {
@@ -336,13 +317,6 @@ class OrderProcessingService {
           }
         }
       );
-    } else {
-      console.error("Socket context not available");
-      this.setState({
-        isCompletingOrder: false,
-        completionError: "Cannot connect to server. Please try again later.",
-      });
-    }
   }
 
   // Calculate delivery cost

src/components/profile/OrdersTab.js

@@ -98,10 +98,10 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
   );
 
   const fetchOrders = useCallback(() => {
-    if (socket && socket.connected) {
+
       setLoading(true);
       setError(null);
-      socket.emit("getOrders", (response) => {
+      window.socketManager.emit("getOrders", (response) => {
         if (response.success) {
           setOrders(response.orders);
         } else {
@@ -109,12 +109,8 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
         }
         setLoading(false);
       });
-    } else {
-      // Socket not connected yet, but don't show error immediately on first load
-      console.log("Socket not connected yet, waiting for connection to fetch orders");
-      setLoading(false); // Stop loading when socket is not connected
-    }
-  }, [socket]);
+
+  }, []);
 
   useEffect(() => {
     fetchOrders();
@@ -166,10 +162,10 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
 
   // Handle cancel confirmation
   const handleConfirmCancel = () => {
-    if (!orderToCancel || !socket) return;
+    if (!orderToCancel) return;
     
     setIsCancelling(true);
-    socket.emit('cancelOrder', { orderId: orderToCancel.orderId }, (response) => {
+    window.socketManager.emit('cancelOrder', { orderId: orderToCancel.orderId }, (response) => {
       setIsCancelling(false);
       setCancelConfirmOpen(false);
       

src/components/profile/SettingsTab.js

@@ -48,7 +48,7 @@ class SettingsTab extends Component {
         this.setState({ newEmail: user.email || '' });
         
         // Check if user has an API key
-        this.props.socket.emit('isApiKey', (response) => {
+        window.socketManager.emit('isApiKey', (response) => {
           if (response.success && response.hasApiKey) {
             this.setState({ 
               hasApiKey: true,
@@ -90,7 +90,7 @@ class SettingsTab extends Component {
     this.setState({ loading: true });
     
     // Call socket.io endpoint to update password
-    this.props.socket.emit('updatePassword', 
+    window.socketManager.emit('updatePassword', 
       { oldPassword: this.state.currentPassword, newPassword: this.state.newPassword }, 
       (response) => {
         this.setState({ loading: false });
@@ -134,7 +134,7 @@ class SettingsTab extends Component {
     this.setState({ loading: true });
     
     // Call socket.io endpoint to update email
-    this.props.socket.emit('updateEmail', 
+    window.socketManager.emit('updateEmail', 
       { password: this.state.password, email: this.state.newEmail }, 
       (response) => {
         this.setState({ loading: false });
@@ -184,7 +184,7 @@ class SettingsTab extends Component {
     try {
       const user = JSON.parse(storedUser);
       
-      this.props.socket.emit('createApiKey', user.id, (response) => {
+      window.socketManager.emit('createApiKey', user.id, (response) => {
         this.setState({ loadingApiKey: false });
         
         if (response.success) {