Refactor socket handling across components to support dual socket connections, enhancing data fetching capabilities and improving overall communication.

src/App.js

@@ -165,7 +165,8 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
   // Check if we're in development mode
   const isDevelopment = process.env.NODE_ENV === "development";
 
-  const socket = useContext(SocketContext);
+  const {socket,socketB} = useContext(SocketContext);
+  console.log("AppContent: socket", socket);
 
   return (
     <Box
@@ -201,7 +202,7 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
             {/* Category page - Render Content in parallel */}
             <Route
               path="/Kategorie/:categoryId"
-              element={<Content socket={socket} />}
+              element={<Content socket={socket} socketB={socketB} />}
             />
             {/* Single product page */}
             <Route
@@ -210,7 +211,7 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
             />
 
             {/* Search page - Render Content in parallel */}
-            <Route path="/search" element={<Content socket={socket} />} />
+            <Route path="/search" element={<Content socket={socket} socketB={socketB} />} />
 
             {/* Profile page */}
             <Route path="/profile" element={<ProfilePageWithSocket />} />
@@ -218,17 +219,17 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
             {/* Reset password page */}
             <Route
               path="/resetPassword"
-              element={<ResetPassword socket={socket} />}
+              element={<ResetPassword socket={socket} socketB={socketB} />}
             />
 
             {/* Admin page */}
-            <Route path="/admin" element={<AdminPage socket={socket} />} />
+            <Route path="/admin" element={<AdminPage socket={socket} socketB={socketB} />} />
             
             {/* Admin Users page */}
-            <Route path="/admin/users" element={<UsersPage socket={socket} />} />
+            <Route path="/admin/users" element={<UsersPage socket={socket} socketB={socketB} />} />
             
             {/* Admin Server Logs page */}
-            <Route path="/admin/logs" element={<ServerLogsPage socket={socket} />} />
+            <Route path="/admin/logs" element={<ServerLogsPage socket={socket} socketB={socketB} />} />
 
             {/* Legal pages */}
             <Route path="/datenschutz" element={<Datenschutz />} />

src/components/CategoryBox.js

@@ -22,7 +22,7 @@ const CategoryBox = ({
   const [imageUrl, setImageUrl] = useState(null);
   const [imageError, setImageError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const socket = useContext(SocketContext);
+  const {socket} = useContext(SocketContext);
 
   useEffect(() => {
     let objectUrl = null;

src/components/Content.js

@@ -685,6 +685,7 @@ class Content extends Component {
             <Box>
               <ProductList
                 socket={this.props.socket}
+                socketB={this.props.socketB}
                 totalProductCount={(this.state.unfilteredProducts || []).length}
                 products={this.state.filteredProducts || []}
                 activeAttributeFilters={this.state.activeAttributeFilters || []}

src/components/Header.js

@@ -37,7 +37,7 @@ class Header extends Component {
 
   render() {
     // Get socket directly from context in render method
-    const socket = this.context;
+    const {socket,socketB} = this.context;
     const { isHomePage, isProfilePage } = this.props;
 
     return (
@@ -77,7 +77,7 @@ class Header extends Component {
             </Box>
           </Container>
         </Toolbar>
-        {(isHomePage || this.props.categoryId || isProfilePage) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId} socket={socket} />}
+        {(isHomePage || this.props.categoryId || isProfilePage) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId} socket={socket} socketB={socketB} />}
       </AppBar>
     );
   }
@@ -91,7 +91,7 @@ const HeaderWithContext = (props) => {
   
   return (
     <SocketContext.Consumer>
-      {socket => <Header {...props} socket={socket} isHomePage={isHomePage} isProfilePage={isProfilePage} />}
+      {({socket,socketB}) => <Header {...props} socket={socket} socketB={socketB} isHomePage={isHomePage} isProfilePage={isProfilePage} />}
     </SocketContext.Consumer>
   );
 };

src/components/Images.js

@@ -77,7 +77,7 @@ class Images extends Component {
   }
 
   loadPic = (size,bildId,index) => {
-    this.props.socket.emit('getPic', { bildId, size }, (res) => {
+    this.props.socketB.emit('getPic', { bildId, size }, (res) => {
       if(res.success){
         const url = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
 

src/components/Product.js

@@ -26,7 +26,8 @@ class Product extends Component {
         this.state = {image:window.smallPicCache[bildId],loading:false, error: false}
       }else{
         this.state = {image: null, loading: true, error: false};
-        this.props.socket.emit('getPic', { bildId, size:'small' }, (res) => {
+        console.log("Product: Fetching image from socketB", this.props.socketB);
+        this.props.socketB.emit('getPic', { bildId, size:'small' }, (res) => {
           if(res.success){
             window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
             if (this._isMounted) {

src/components/ProductDetailPage.js

@@ -110,8 +110,8 @@ class ProductDetailPage extends Component {
                 }
               } else {
                 // Not in cache, fetch from server
-                if (this.props.socket && this.props.socket.connected) {
+                if (this.props.socketB && this.props.socketB.connected) {
-                  this.props.socket.emit(
+                  this.props.socketB.emit(
                     "getAttributePicture",
                     { id: cacheKey },
                     (res) => {
@@ -334,6 +334,7 @@ class ProductDetailPage extends Component {
             {product.pictureList && (
               <Images
                 socket={this.props.socket}
+                socketB={this.props.socketB}
                 pictureList={product.pictureList}
                 fullscreenOpen={this.state.imageDialogOpen}
                 onOpenFullscreen={this.handleOpenDialog}

src/components/ProductDetailWithSocket.js

@@ -11,7 +11,7 @@ const ProductDetailWithSocket = () => {
 
   return (
     <SocketContext.Consumer>
-      {socket => <ProductDetailPage seoName={seoName} navigate={navigate} location={location} socket={socket} />}
+      {({socket,socketB}) => <ProductDetailPage seoName={seoName} navigate={navigate} location={location} socket={socket} socketB={socketB} />}
     </SocketContext.Consumer>
   );
 };

src/components/ProductList.js

@@ -331,6 +331,7 @@ class ProductList extends Component {
                 versandklasse={product.versandklasse}
                 weight={product.weight}
                 socket={this.props.socket}
+                socketB={this.props.socketB}
                 pictureList={product.pictureList}
                 availableSupplier={product.availableSupplier}
               />

src/components/header/CategoryList.js

@@ -124,11 +124,13 @@ class CategoryList extends Component {
 
   componentDidUpdate(prevProps) {
     // 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,
@@ -158,7 +160,7 @@ class CategoryList extends Component {
     }
 
     if (this.state.fetchedCategories) {
-      //console.log('Categories already fetched, skipping');
+      console.log('Categories already fetched, skipping');
       return;
     }
 
@@ -222,7 +224,6 @@ class CategoryList extends Component {
     //console.log('CategoryList: Fetching categories from socket');
     socket.emit("categoryList", { categoryId: 209 }, (response) => {
       if (response && response.categoryTree) {
-        //console.log('Category tree received:', response.categoryTree);
 
         // Store in global cache with timestamp
         try {
@@ -237,7 +238,6 @@ class CategoryList extends Component {
         } catch (err) {
           console.error("Error writing to cache:", err);
         }
-
         this.processCategoryTree(response.categoryTree);
       } else {
         try {

src/components/header/SearchBar.js

@@ -15,7 +15,7 @@ import SocketContext from "../../contexts/SocketContext.js";
 const SearchBar = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const socket = React.useContext(SocketContext);
+  const {socket} = React.useContext(SocketContext);
   const searchParams = new URLSearchParams(location.search);
 
   // State management

src/components/profile/CartTab.js

@@ -67,8 +67,8 @@ class CartTab extends Component {
 
   // @note Add method to fetch and apply order template prefill data
   fetchOrderTemplate = () => {
-    if (this.context && this.context.connected) {
+    if (this.context && this.context.socket && this.context.socket.connected) {
-      this.context.emit('getOrderTemplate', (response) => {
+      this.context.socket.emit('getOrderTemplate', (response) => {
         if (response.success && response.orderTemplate) {
           const template = response.orderTemplate;
           
@@ -433,7 +433,7 @@ class CartTab extends Component {
         {!showPaymentConfirmation && (
           <CartDropdown 
             cartItems={cartItems} 
-            socket={this.context}
+            socket={this.context.socket}
             showDetailedSummary={showStripePayment}
             deliveryMethod={deliveryMethod}
             deliveryCost={deliveryCost}

src/components/profile/OrderProcessingService.js

@@ -120,7 +120,7 @@ class OrderProcessingService {
 
     // If socket is ready, process immediately
     const context = this.getContext();
-    if (context && context.connected) {
+    if (context && context.socket && context.socket.connected) {
       const { isLoggedIn: isAuthenticated } = isUserLoggedIn();
       if (isAuthenticated) {
         this.sendStripeOrder();
@@ -131,7 +131,7 @@ class OrderProcessingService {
     // Wait for socket to be ready
     this.socketHandler = () => {
       const context = this.getContext();
-      if (context && context.connected) {
+      if (context && context.socket && context.socket.connected) {
         const { isLoggedIn: isAuthenticated } = isUserLoggedIn();
         const state = this.getState();
         
@@ -189,7 +189,7 @@ class OrderProcessingService {
 
     // Emit stripe order to backend via socket.io
     const context = this.getContext();
-    context.emit("issueStripeOrder", orderData, (response) => {
+    context.socket.emit("issueStripeOrder", orderData, (response) => {
       if (response.success) {
         this.setState({
           isCompletingOrder: false,
@@ -208,8 +208,8 @@ class OrderProcessingService {
   // Process regular (non-Stripe) orders
   processRegularOrder(orderData) {
     const context = this.getContext();
-    if (context) {
+    if (context && context.socket && context.socket.connected) {
-      context.emit("issueOrder", orderData, (response) => {
+      context.socket.emit("issueOrder", orderData, (response) => {
         if (response.success) {
           // Clear the cart
           window.cart = [];
@@ -246,8 +246,8 @@ class OrderProcessingService {
   // Create Stripe payment intent
   createStripeIntent(totalAmount, loadStripeComponent) {
     const context = this.getContext();
-    if (context) {
+    if (context && context.socket && context.socket.connected) {
-      context.emit(
+      context.socket.emit(
         "createStripeIntent",
         { amount: totalAmount },
         (response) => {

src/components/profile/OrdersTab.js

@@ -68,7 +68,7 @@ const OrdersTab = ({ orderIdFromHash }) => {
   const [selectedOrder, setSelectedOrder] = useState(null);
   const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false);
 
-  const socket = useContext(SocketContext);
+  const {socket} = useContext(SocketContext);
   const navigate = useNavigate();
 
   const handleViewDetails = useCallback(

src/pages/Home.js

@@ -151,7 +151,7 @@ const Home = () => {
   const [rootCategories, setRootCategories] = useState(() =>
     initializeCategories()
   );
-  const socket = useContext(SocketContext);
+  const {socket} = useContext(SocketContext);
 
   useEffect(() => {
     // Only fetch from socket if we don't already have categories and we're in browser

src/pages/ProfilePage.js

@@ -225,8 +225,8 @@ const ProfilePage = (props) => {
 
 // Wrap with socket context
 const ProfilePageWithSocket = (props) => {
-  const socket = useContext(SocketContext);
+  const {socket,socketB} = useContext(SocketContext);
-  return <ProfilePage {...props} socket={socket} />;
+  return <ProfilePage {...props} socket={socket} socketB={socketB} />;
 };
 
 export default ProfilePageWithSocket; 

src/pages/Sitemap.js

@@ -36,7 +36,8 @@ const collectAllCategories = (categoryNode, categories = [], level = 0) => {
 const Sitemap = () => {
   const [categories, setCategories] = useState([]);
   const [loading, setLoading] = useState(true);
-  const socket = useContext(SocketContext);
+  const {socket} = useContext(SocketContext);
+
 
   const sitemapLinks = [
     { title: 'Startseite', url: '/' },

src/providers/SocketProvider.js

@@ -7,8 +7,10 @@ class SocketProvider extends Component {
   constructor(props) {
     super(props);
     this.socket = null;
+    this.socketB = null;
     this.state = {
       connected: false,
+      connectedB: false,
       showPrerenderFallback: true,
     };
   }
@@ -77,6 +79,66 @@ class SocketProvider extends Component {
       console.error("SocketProvider: Failed to reconnect");
       this.handleConnectionFailure();
     });
+
+    this.socketB = io(url, {
+      transports: ["websocket"],
+    });
+
+    this.socketB.on("connect", () => {
+      console.log("SocketProvider: connectedB");
+      //this.setState({ connectedB: true });
+    });
+
+    this.socketB.on("disconnect", () => {
+      //this.setState({ connectedB: false });
+      console.log("SocketProvider: Socket disconnectedB");
+    });
+
+    this.socketB.on("connect_error", (error) => {
+      console.error("SocketProvider: Connection errorB:", error);
+    });
+
+    this.socketB.on("reconnect_attempt", (attemptNumber) => {
+      console.log(`SocketProvider: Reconnection attemptB ${attemptNumber}`);
+    });
+
+    this.socketB.on("reconnect_failed", () => {
+      console.error("SocketProvider: Failed to reconnectB");
+    });
+    this.socketB.waitForConnect = (timeout = 10000) => {
+      return new Promise((resolve, reject) => {
+        if (this.socketB.connected) {
+          resolve();
+          return;
+        }
+
+        let timeoutId;
+        const connectHandler = () => {
+          clearTimeout(timeoutId);
+          this.socketB.off("connect", connectHandler);
+          this.socketB.off("connect_error", errorHandler);
+          resolve();
+        };
+
+        const errorHandler = (error) => {
+          clearTimeout(timeoutId);
+          this.socketB.off("connect", connectHandler);
+          this.socketB.off("connect_error", errorHandler);
+          reject(new Error(`Socket connection failed: ${error.message}`));
+        };
+
+        // Set up timeout
+        timeoutId = setTimeout(() => {
+          this.socketB.off("connect", connectHandler);
+          this.socketB.off("connect_error", errorHandler);
+          reject(new Error(`Socket connection timeout after ${timeout}ms`));
+        }, timeout);
+
+        // Add event listeners
+        this.socketB.on("connect", connectHandler);
+        this.socketB.on("connect_error", errorHandler);
+      });
+    };
   }
 
   handleConnectionFailure() {
@@ -96,6 +158,10 @@ class SocketProvider extends Component {
       console.log("SocketProvider: Disconnecting socket");
       this.socket.disconnect();
     }
+    if (this.socketB) {
+      console.log("SocketProvider: Disconnecting socketB");
+      this.socketB.disconnect();
+    }
   }
 
   render() {
@@ -104,7 +170,7 @@ class SocketProvider extends Component {
       window.__PRERENDER_FALLBACK__;
 
     return (
-      <SocketContext.Provider value={this.socket}>
+      <SocketContext.Provider value={{socket:this.socket,socketB:this.socketB}}>
         {/* Always render children but control visibility */}
         <div style={{ display: this.state.connected ? 'block' : 'none' }}>
           {this.props.children}

webpack.config.js

@@ -314,7 +314,11 @@ export default {
     hot: true,
     port: 9500,
     open: false,
-    historyApiFallback: true,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
+    },
     client: {
       logging: 'verbose',
       overlay: {