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

36
src/components/Content.js
View File

@@ -224,19 +224,6 @@ class Content extends Component {
this.fetchSearchData(this.props.searchParams?.get('q'));
})
}
// 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.loaded) {
// Socket just connected and we haven't loaded data yet, retry loading
if (this.props.params.categoryId) {
this.fetchCategoryData(this.props.params.categoryId);
} else if (this.props.searchParams?.get('q')) {
this.fetchSearchData(this.props.searchParams?.get('q'));
}
}
}
processData(response) {
@@ -278,19 +265,13 @@ class Content extends Component {
return;
}
//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
// console.log("Socket not connected yet, waiting for connection to fetch category data");
// return;
//}
console.log(`productList:${categoryId}`);
this.props.socket.off(`productList:${categoryId}`);
window.socketManager.off(`productList:${categoryId}`);
// Track if we've received the full response to ignore stub response if needed
let receivedFullResponse = false;
this.props.socket.on(`productList:${categoryId}`,(response) => {
window.socketManager.on(`productList:${categoryId}`,(response) => {
console.log("getCategoryProducts full response", response);
receivedFullResponse = true;
setCachedCategoryData(categoryId, response);
@@ -301,7 +282,7 @@ class Content extends Component {
}
});
this.props.socket.emit("getCategoryProducts", { categoryId: categoryId },
window.socketManager.emit("getCategoryProducts", { categoryId: categoryId },
(response) => {
console.log("getCategoryProducts stub response", response);
// Only process stub response if we haven't received the full response yet
@@ -365,14 +346,7 @@ class Content extends Component {
}
fetchSearchData(query) {
// 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
// console.log("Socket not connected yet, waiting for connection to fetch search data");
// return;
// }
this.props.socket.emit("getSearchProducts", { query },
window.socketManager.emit("getSearchProducts", { query },
(response) => {
if (response && response.products) {
this.processData(response);
@@ -734,8 +708,6 @@ 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 || []}