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

refactor: remove socket context dependencies and streamline socket handling in components for improved performance and readability

Browse Source
This commit is contained in:
sebseb7
2025-07-23 07:57:13 +02:00
parent bde001c39b
commit 9982527f35
8 changed files with 99 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/ProductDetailPage.js
View File

@@ -105,15 +105,6 @@ class ProductDetailPage extends Component {
{ product: null, loading: true, error: null, imageDialogOpen: false },
this.loadProductData
);
// 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.loading) {
// Socket just connected and we're still loading, retry loading data
this.loadProductData();
}
}
loadKomponentImage = (komponentId, pictureList) => {
@@ -141,14 +132,8 @@ class ProductDetailPage extends Component {
return;
}
// Check if socketB is available
if (!this.props.socketB || !this.props.socketB.connected) {
console.log("SocketB not connected yet, skipping image load for komponent:", komponentId);
return;
}
// Fetch image from server
this.props.socketB.emit('getPic', { bildId, size: 'small' }, (res) => {
window.socketManager.emit('getPic', { bildId, size: 'small' }, (res) => {
if (res.success) {
// Cache the image
window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
@@ -229,12 +214,6 @@ class ProductDetailPage extends Component {
return;
}
// If not cached, fetch from server (similar to loadProductData)
//if (!this.props.socket || !this.props.socket.connected) {
// console.log("Socket not connected yet, waiting for connection to load komponent data");
// return;
//}
// Mark this komponent as loading
this.setState(prevState => ({
komponentenData: {
@@ -248,7 +227,7 @@ class ProductDetailPage extends Component {
}
}));
this.props.socket.emit(
window.socketManager.emit(
"getProductView",
{ articleId: id },
(res) => {
@@ -359,13 +338,8 @@ class ProductDetailPage extends Component {
}
loadProductData = () => {
if (!this.props.socket || !this.props.socket.connected) {
// Socket not connected yet, but don't show error immediately on first load
// The componentDidUpdate will retry when socket connects
return;
}
this.props.socket.emit(
window.socketManager.emit(
"getProductView",
{ seoName: this.props.seoName },
(res) => {
@@ -434,8 +408,8 @@ class ProductDetailPage extends Component {
}
} else {
// Not in cache, fetch from server
if (this.props.socketB && this.props.socketB.connected) {
this.props.socketB.emit(
window.socketManager.emit(
"getAttributePicture",
{ id: cacheKey },
(res) => {
@@ -469,7 +443,7 @@ class ProductDetailPage extends Component {
}
}
);
}
}
}
@@ -698,8 +672,6 @@ class ProductDetailPage extends Component {
>
<ProductImage
product={product}
socket={this.props.socket}
socketB={this.props.socketB}
fullscreenOpen={this.state.imageDialogOpen}
onOpenFullscreen={this.handleOpenDialog}
onCloseFullscreen={this.handleCloseDialog}
@@ -1032,7 +1004,6 @@ class ProductDetailPage extends Component {
<ArticleQuestionForm
productId={product.id}
productName={cleanProductName(product.name)}
socket={this.props.socket}
/>
</div>
</Collapse>
@@ -1043,7 +1014,6 @@ class ProductDetailPage extends Component {
<ArticleRatingForm
productId={product.id}
productName={cleanProductName(product.name)}
socket={this.props.socket}
/>
</div>
</Collapse>
@@ -1054,7 +1024,6 @@ class ProductDetailPage extends Component {
<ArticleAvailabilityForm
productId={product.id}
productName={cleanProductName(product.name)}
socket={this.props.socket}
/>
</Collapse>
)}