seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

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

Browse Source
This commit is contained in:
seb
2025-07-03 05:36:41 +02:00
parent 1ed06804a0
commit 245f5067ed
19 changed files with 113 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.js
View File

@@ -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 />} />

2
src/components/CategoryBox.js
View File

@@ -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;

1
src/components/Content.js
View File

@@ -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 || []}

6
src/components/Header.js
View File

@@ -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>
);
};

2
src/components/Images.js
View File

@@ -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' }));

3
src/components/Product.js
View File

@@ -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) {

5
src/components/ProductDetailPage.js
View File

@@ -110,8 +110,8 @@ class ProductDetailPage extends Component {
}
} else {
// Not in cache, fetch from server
if (this.props.socket && this.props.socket.connected) {
this.props.socket.emit(
if (this.props.socketB && this.props.socketB.connected) {
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}

2
src/components/ProductDetailWithSocket.js
View File

@@ -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>
);
};

1
src/components/ProductList.js
View File

@@ -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}
/>

6
src/components/header/CategoryList.js
View File

@@ -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 {

2
src/components/header/SearchBar.js
View File

@@ -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

6
src/components/profile/CartTab.js
View File

@@ -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) {
this.context.emit('getOrderTemplate', (response) => {
if (this.context && this.context.socket && this.context.socket.connected) {
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}

14
src/components/profile/OrderProcessingService.js
View File

@@ -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) {
context.emit("issueOrder", orderData, (response) => {
if (context && context.socket && context.socket.connected) {
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) {
context.emit(
if (context && context.socket && context.socket.connected) {
context.socket.emit(
"createStripeIntent",
{ amount: totalAmount },
(response) => {

2
src/components/profile/OrdersTab.js
View File

@@ -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(

2
src/pages/Home.js
View File

@@ -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

4
src/pages/ProfilePage.js
View File

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

3
src/pages/Sitemap.js
View File

@@ -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: '/' },

68
src/providers/SocketProvider.js
View File

@@ -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}

6
webpack.config.js
View File

@@ -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: {