refactor: remove SocketContext and related dependencies from OrdersTab and ProfilePage components for improved performance and code clarity

src/components/CartDropdown.js

@@ -74,7 +74,6 @@ class CartDropdown extends Component {
               {cartItems.map((item) => (
                 <CartItem
                   key={item.id}
-                  socket={this.props.socket}
                   item={item}
                   id={item.id}
                 />

src/components/ProductList.js

@@ -471,8 +471,6 @@ class ProductList extends Component {
                 floweringWeeks={product.floweringWeeks}
                 versandklasse={product.versandklasse}
                 weight={product.weight}
-                socket={this.props.socket}
-                socketB={this.props.socketB}
                 pictureList={product.pictureList}
                 availableSupplier={product.availableSupplier}
                 komponenten={product.komponenten}

src/components/profile/OrdersTab.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { withI18n } from "../../i18n/withTranslation.js";
 import {
@@ -23,7 +23,6 @@ import {
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import CancelIcon from "@mui/icons-material/Cancel";
-import SocketContext from "../../contexts/SocketContext.js";
 import OrderDetailsDialog from "./OrderDetailsDialog.js";
 
 // Constants
@@ -81,7 +80,6 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
   const [orderToCancel, setOrderToCancel] = useState(null);
   const [isCancelling, setIsCancelling] = useState(false);
 
-  const {socket} = useContext(SocketContext);
   const navigate = useNavigate();
 
   const handleViewDetails = useCallback(
@@ -116,14 +114,6 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
     fetchOrders();
   }, [fetchOrders]);
 
-  // Monitor socket connection changes
-  useEffect(() => {
-    if (socket && socket.connected && orders.length === 0) {
-      // Socket just connected and we don't have orders yet, fetch them
-      fetchOrders();
-    }
-  }, [socket, socket?.connected, orders.length, fetchOrders]);
-
   useEffect(() => {
     if (orderIdFromHash && orders.length > 0) {
       handleViewDetails(orderIdFromHash);

src/contexts/SocketContext.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-// Create a new context for Socket.IO
-const SocketContext = React.createContext(null);
-
-export const SocketConsumer = SocketContext.Consumer;
-export default SocketContext; 

src/pages/ProfilePage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import { 
   Container, 
   Paper, 
@@ -10,7 +10,6 @@ import {
 } from '@mui/material';
 import { useLocation, useNavigate, Navigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import SocketContext from '../contexts/SocketContext.js';
 
 // Import extracted components
 import OrdersTab from '../components/profile/OrdersTab.js';
@@ -19,7 +18,7 @@ import CartTab from '../components/profile/CartTab.js';
 import LoginComponent from '../components/LoginComponent.js';
 
 // Functional Profile Page Component
-const ProfilePage = (props) => {
+const ProfilePage = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -211,7 +210,7 @@ const ProfilePage = (props) => {
   }
 
   if (showLogin) {
-    return <LoginComponent open={showLogin} handleClose={handleLoginClose} location={location} socket={props.socket} />;
+    return <LoginComponent open={showLogin} handleClose={handleLoginClose} location={location}/>;
   }
 
   if (loading) {
@@ -284,7 +283,7 @@ const ProfilePage = (props) => {
 
           {tabValue === 0 && <CartTab onOrderSuccess={handleGoToOrders} paymentCompletion={paymentCompletion} onClearPaymentCompletion={handleClearPaymentCompletion} />}
           {tabValue === 1 && <OrdersTab orderIdFromHash={orderIdFromHash} />}
-          {tabValue === 2 && <SettingsTab socket={props.socket} />}
+          {tabValue === 2 && <SettingsTab/>}
 
         </Box>
       </Paper>
@@ -294,8 +293,7 @@ const ProfilePage = (props) => {
 
 // Wrap with socket context
 const ProfilePageWithSocket = (props) => {
-  const {socket,socketB} = useContext(SocketContext);
+  return <ProfilePage {...props}/>;
-  return <ProfilePage {...props} socket={socket} socketB={socketB} />;
 };
 
 export default ProfilePageWithSocket;