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

32
src/components/Product.js
View File

@@ -27,17 +27,8 @@ class Product extends Component {
this.state = {image:window.smallPicCache[bildId],loading:false, error: false}
}else{
this.state = {image: null, loading: true, error: false};
console.log("Product: Fetching image from socketB", this.props.socketB);
// Check if socketB is available and connected before emitting
if (this.props.socketB && this.props.socketB.connected) {
this.loadImage(bildId);
} else {
// Socket not available, set error state or wait
console.log("Product: socketB not available, will retry when connected");
this.state.error = true;
this.state.loading = false;
}
this.loadImage(bildId);
}
}else{
this.state = {image: null, loading: false, error: false};
@@ -48,24 +39,9 @@ class Product extends Component {
this._isMounted = true;
}
componentDidUpdate(prevProps) {
// Retry loading image if socket just became available
const wasConnected = prevProps.socketB && prevProps.socketB.connected;
const isNowConnected = this.props.socketB && this.props.socketB.connected;
if (!wasConnected && isNowConnected && this.state.error && this.props.pictureList) {
// Socket just connected and we had an error, retry loading
const bildId = this.props.pictureList.split(',')[0];
if (!window.smallPicCache[bildId]) {
this.setState({loading: true, error: false});
this.loadImage(bildId);
}
}
}
loadImage = (bildId) => {
if (this.props.socketB && this.props.socketB.connected) {
this.props.socketB.emit('getPic', { bildId, size:'small' }, (res) => {
window.socketManager.emit('getPic', { bildId, size:'small' }, (res) => {
if(res.success){
window.smallPicCache[bildId] = URL.createObjectURL(new Blob([res.imageBuffer], { type: 'image/jpeg' }));
if (this._isMounted) {
@@ -85,7 +61,7 @@ class Product extends Component {
}
});
}
}
componentWillUnmount() {
this._isMounted = false;