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

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(