refactor: clean up imports and remove unused socket context in Header component for improved readability

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useContext, lazy, Suspense } from "react";
+import React, { useState, useEffect, lazy, Suspense } from "react";
 import {
   Routes,
   Route,

src/components/Header.js

@@ -4,7 +4,6 @@ import Toolbar from '@mui/material/Toolbar';
 import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 
-import SocketContext from '../contexts/SocketContext.js';
 import { useLocation } from 'react-router-dom';
 
 // Import extracted components
@@ -12,7 +11,6 @@ import { Logo, SearchBar, ButtonGroupWithRouter, CategoryList } from './header/i
 
 // Main Header Component
 class Header extends Component {
-  static contextType = SocketContext;
 
   constructor(props) {
     super(props);
@@ -36,8 +34,7 @@ class Header extends Component {
   };
 
   render() {
-    // Get socket directly from context in render method
-    const {socket,socketB} = this.context;
+
     const { isHomePage, isProfilePage, isAktionenPage, isFilialePage } = this.props;
 
     return (
@@ -75,7 +72,7 @@ class Header extends Component {
                   transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
                   ml: { xs: 0, sm: 0 }
                 }}>
-                  <ButtonGroupWithRouter socket={socket}/>
+                  <ButtonGroupWithRouter/>
                 </Box>
               </Box>
               
@@ -94,7 +91,7 @@ class Header extends Component {
             </Box>
           </Container>
         </Toolbar>
-        {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId} socket={socket} socketB={socketB} />}
+        {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId}/>}
       </AppBar>
     );
   }
@@ -109,9 +106,9 @@ const HeaderWithContext = (props) => {
   const isFilialePage = location.pathname === '/filiale';
   
   return (
-    <SocketContext.Consumer>
-      {({socket,socketB}) => <Header {...props} socket={socket} socketB={socketB} isHomePage={isHomePage} isProfilePage={isProfilePage} isAktionenPage={isAktionenPage} isFilialePage={isFilialePage} />}
-    </SocketContext.Consumer>
+
+      <Header {...props} isHomePage={isHomePage} isProfilePage={isProfilePage} isAktionenPage={isAktionenPage} isFilialePage={isFilialePage} />
+
   );
 };
 

src/components/ProductDetail.js

@@ -0,0 +1,4 @@
+// This file re-exports ProductDetailWithSocket to maintain compatibility with App.js imports
+import ProductDetailWithSocket from './ProductDetailWithSocket.js';
+
+export default ProductDetailWithSocket; 

src/components/header/CategoryList.js

@@ -152,23 +152,6 @@ class CategoryList extends Component {
       return;
     }
 
-    // Handle socket connection changes
-    const wasConnected = prevProps.socket && prevProps.socket.connected;
-    const isNowConnected = this.props.socket && this.props.socket.connected;
-    
-    if (!wasConnected && isNowConnected && !this.state.fetchedCategories) {
-      // Socket just connected and we haven't fetched categories yet
-      
-      this.setState(
-        {
-          fetchedCategories: false,
-        },
-        () => {
-          this.fetchCategories();
-        }
-      );
-    }
-
     // If activeCategoryId changes, update subcategories
     if (
       prevProps.activeCategoryId !== this.props.activeCategoryId &&
@@ -179,11 +162,6 @@ class CategoryList extends Component {
   }
 
   fetchCategories = () => {
-    const { socket } = this.props;
-    if (!socket || !socket.connected) {
-      console.log("Socket not connected yet, waiting for connection to fetch categories");
-      return;
-    }
 
     if (this.state.fetchedCategories) {
       console.log('Categories already fetched, skipping');
@@ -251,7 +229,7 @@ class CategoryList extends Component {
     this.setState({ fetchedCategories: true });
 
     //console.log('CategoryList: Fetching categories from socket');
-    socket.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
+    window.socketManager.emit("categoryList", { categoryId: 209, language: currentLanguage, requestTranslation: true }, (response) => {
       if (response && response.success) {
         // Use translated data if available, otherwise fall back to original
         const categoryTreeToUse = response.translation || response.categoryTree;

src/index.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App.js";
 import { BrowserRouter } from "react-router-dom";
-import "./services/SocketManager";
+import "./services/SocketManager.js";
 
 // Create a wrapper component with our class-based GoogleAuthProvider
 // This avoids the "Invalid hook call" error from GoogleOAuthProvider