Skip to content

Commit c6b03d1

Browse files
RGvirerRGvirer
authored
Merge pull request #3 from RGvirer/fix-load-more-btn
Fix the bug of load-more button
2 parents d533daf + 422d784 commit c6b03d1

File tree

1 file changed

+157
-78
lines changed

1 file changed

+157
-78
lines changed

‎src/features/photo/PhotoList.js‎

Lines changed: 157 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
import { useEffect } from "react";
2-
import './PhotoList.css';
2+
import "./PhotoList.css";
33
import { useDispatch, useSelector } from "react-redux";
44
import { getPhotosFromServer } from "./photosApi.js";
55
import { useState } from "react";
66
import CoordinatePoint from "./CoordinatePoint.js";
77
import React from "react";
8-
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, Grid, Skeleton, Typography } from "@mui/material";
8+
import {
9+
Button,
10+
Dialog,
11+
DialogActions,
12+
DialogContent,
13+
DialogTitle,
14+
Divider,
15+
Grid,
16+
Skeleton,
17+
Typography,
18+
} from "@mui/material";
919
import { addPhotoToState } from "./PhotosSlice.js";
1020
import { useNavigate } from "react-router-dom";
11-
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
12-
import FavoriteBorderRoundedIcon from '@mui/icons-material/FavoriteBorderRounded';
21+
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
22+
import FavoriteBorderRoundedIcon from "@mui/icons-material/FavoriteBorderRounded";
1323
import { addProductToCart } from "../order/OrderSlice.js";
1424

1525
const PhotoList = () => {
@@ -19,7 +29,7 @@ const PhotoList = () => {
1929
let dispatch = useDispatch();
2030
const [loading, setLoading] = useState(false);
2131
const baseUrl = "https://storeserver-uoax.onrender.com/";
22-
let photosArr = useSelector(state => state.photo.photosArr);
32+
let photosArr = useSelector((state) => state.photo.photosArr);
2333
const navigate = useNavigate();
2434
const [scrollTopLeft, setScrollTopLeft] = useState(0);
2535
useEffect(() => {
@@ -29,7 +39,7 @@ const PhotoList = () => {
2939
const response = await getPhotosFromServer(page, 6, "");
3040
dispatch(addPhotoToState(response.data));
3141
} catch (error) {
32-
console.error('Error fetching photos:', error);
42+
console.error("Error fetching photos:", error);
3343
} finally {
3444
setLoading(false);
3545
}
@@ -40,19 +50,23 @@ const PhotoList = () => {
4050

4151
const PhotoSkeleton = () => (
4252
<li className="photo-grid-item">
43-
<Skeleton animation="wave" variant="rectangular" width="32vw" height="80vh" />
53+
<Skeleton
54+
animation="wave"
55+
variant="rectangular"
56+
width="32vw"
57+
height="80vh"
58+
/>
4459
</li>
4560
);
4661

4762
const openDetails = (product) => {
4863
navigate(`/details/${product._id}`, { state: { product } });
49-
}
64+
};
5065
const handleDetailClick = (item) => {
5166
setSelectedPhoto(item);
5267
setDialogOpen(true); // פתיחת ה-Drawer כאשר לוחצים על התמונה
5368
};
5469

55-
5670
const handleCloseDialog = () => {
5771
setDialogOpen(false); // סגירת ה-Dialog
5872
};
@@ -81,100 +95,165 @@ const PhotoList = () => {
8195
fontSize: "300%"
8296
}}>--- PERFECT DESIGN ---</Typography>
8397
</Box> */}
84-
{loading ?
98+
{loading ? (
8599
<ul className="photo-grid" container spacing={2}>
86100
{[...Array(6)].map((_, index) => (
87101
<PhotoSkeleton key={index} />
88102
))}
89-
</ul> :
103+
</ul>
104+
) : (
90105
<>
91-
{
92-
photosArr.length > 0 && (
93-
<>
94-
<ul className="photo-grid">
95-
{photosArr.map((item) => (
96-
<div key={item._id}>
97-
<li className="photo-grid-item" onClick={() => handleDetailClick(item)}>
98-
<CoordinatePoint one={item} />
99-
</li>
100-
</div>
101-
))}
102-
</ul>
103-
104-
{photosArr.length > (page - 1) * 6 && (
105-
<Button style={{ display: 'block', margin: '0 auto'}} onClick={() => { loadMorePhotos() }}>
106-
הצג 6 נוספים
107-
</Button>
108-
)}
106+
{photosArr.length > 0 && (
107+
<>
108+
<ul className="photo-grid">
109+
{photosArr.map((item) => (
110+
<div key={item._id}>
111+
<li
112+
className="photo-grid-item"
113+
onClick={() => handleDetailClick(item)}
114+
>
115+
<CoordinatePoint one={item} />
116+
</li>
117+
</div>
118+
))}
119+
</ul>
109120

110-
111-
</>
112-
)
113-
}
121+
{photosArr.length > page * 6 - 1 ? (
122+
<Button
123+
style={{ display: "block", margin: "0 auto" }}
124+
onClick={() => {
125+
loadMorePhotos();
126+
}}
127+
>
128+
הצג 6 נוספים
129+
</Button>
130+
) : null}
131+
</>
132+
)}
114133
</>
115-
}
134+
)}
116135

117-
<Dialog maxWidth="lg" sx={{ margin: 'auto', display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', overflow: 'hidden' }} open={dialogOpen} onClose={handleCloseDialog}>
136+
<Dialog
137+
maxWidth="lg"
138+
sx={{
139+
margin: "auto",
140+
display: "flex",
141+
flexDirection: "column",
142+
justifyContent: "flex-start",
143+
overflow: "hidden",
144+
}}
145+
open={dialogOpen}
146+
onClose={handleCloseDialog}
147+
>
118148
<Grid container rowSpacing={1} sx={{ direction: "rtl" }}>
119149
<Grid item xs={6} md={8}>
120150
<DialogTitle height={3}>פרטי התמונה </DialogTitle>
121151
</Grid>
122-
<Grid item xs={6} md={4} >
152+
<Grid item xs={6} md={4}>
123153
<DialogActions>
124-
<Button style={{ height: "60px", borderRadius: "100%" }} onClick={handleCloseDialog}>
154+
<Button
155+
style={{ height: "60px", borderRadius: "100%" }}
156+
onClick={handleCloseDialog}
157+
>
125158
<CloseRoundedIcon />
126159
</Button>
127160
</DialogActions>
128161
</Grid>
129162
</Grid>
130163
<DialogContent
131164
sx={{
132-
display: 'flex',
133-
justifyContent: 'space-between',
134-
direction: 'rtl',
165+
display: "flex",
166+
justifyContent: "space-between",
167+
direction: "rtl",
135168
}}
136169
>
137-
<div style={{ width: "80%", overflowY: 'auto', flex: 1, scrollbarWidth: 'none' }}>
138-
{selectedPhoto && (
139-
<CoordinatePoint one={selectedPhoto} />
140-
)}
170+
<div
171+
style={{
172+
width: "80%",
173+
overflowY: "auto",
174+
flex: 1,
175+
scrollbarWidth: "none",
176+
}}
177+
>
178+
{selectedPhoto && <CoordinatePoint one={selectedPhoto} />}
141179
</div>
142-
<div style={{ overflowY: 'auto', flex: 1, overflowX: 'hidden' }}>
143-
<ul style={{ width: "75%" }} onScroll={handleScrollLeft} scrollTop={scrollTopLeft}>
144-
{selectedPhoto && selectedPhoto.imageDetails.map((detail) => (
145-
<React.Fragment key={detail.product._id}>
146-
<li style={{ width: "480px", height: "200px", display: "flex", alignItems: "center", marginBottom: "10px" }}>
147-
<img
148-
alt={detail.product.name}
149-
onClick={() => openDetails(detail.product)}
150-
src={`${baseUrl}${detail.product.routingToImage[0]}`}
151-
style={{ cursor: "pointer", width: "23%", marginRight: "10px" }}
152-
onMouseEnter={(e) => { e.currentTarget.src = `${baseUrl}${detail.product.routingToImage[1]}`; }}
153-
onMouseLeave={(e) => { e.currentTarget.src = `${baseUrl}${detail.product.routingToImage[0]}`; }} />
154-
<div style={{ width: "60%", marginRight: "10px" }}>
155-
<p style={{ cursor: "pointer", marginRight: "40px" }} onClick={() => openDetails(detail.product)}>
156-
<Typography sx={{ fontSize: "16px", textDecoration: "underline" }} variant='h6' className="tooltipDetails">{detail.product.name}</Typography>
157-
<Typography style={{ fontSize: "15px" }} className="tooltipDetails">{detail.product.description}</Typography>
158-
<Typography variant='h5' className="tooltipDetails">₪{detail.product.price}</Typography>
159-
</p>
160-
</div>
161-
<Button style={{ width: "10%" }} onClick={() => { dispatch(addProductToCart(detail.product)); }}>
162-
<FavoriteBorderRoundedIcon />
163-
</Button>
164-
</li>
165-
<Divider width="125%" />
166-
</React.Fragment>
167-
))}
180+
<div style={{ overflowY: "auto", flex: 1, overflowX: "hidden" }}>
181+
<ul
182+
style={{ width: "75%" }}
183+
onScroll={handleScrollLeft}
184+
scrollTop={scrollTopLeft}
185+
>
186+
{selectedPhoto &&
187+
selectedPhoto.imageDetails.map((detail) => (
188+
<React.Fragment key={detail.product._id}>
189+
<li
190+
style={{
191+
width: "480px",
192+
height: "200px",
193+
display: "flex",
194+
alignItems: "center",
195+
marginBottom: "10px",
196+
}}
197+
>
198+
<img
199+
alt={detail.product.name}
200+
onClick={() => openDetails(detail.product)}
201+
src={`${baseUrl}${detail.product.routingToImage[0]}`}
202+
style={{
203+
cursor: "pointer",
204+
width: "23%",
205+
marginRight: "10px",
206+
}}
207+
onMouseEnter={(e) => {
208+
e.currentTarget.src = `${baseUrl}${detail.product.routingToImage[1]}`;
209+
}}
210+
onMouseLeave={(e) => {
211+
e.currentTarget.src = `${baseUrl}${detail.product.routingToImage[0]}`;
212+
}}
213+
/>
214+
<div style={{ width: "60%", marginRight: "10px" }}>
215+
<p
216+
style={{ cursor: "pointer", marginRight: "40px" }}
217+
onClick={() => openDetails(detail.product)}
218+
>
219+
<Typography
220+
sx={{
221+
fontSize: "16px",
222+
textDecoration: "underline",
223+
}}
224+
variant="h6"
225+
className="tooltipDetails"
226+
>
227+
{detail.product.name}
228+
</Typography>
229+
<Typography
230+
style={{ fontSize: "15px" }}
231+
className="tooltipDetails"
232+
>
233+
{detail.product.description}
234+
</Typography>
235+
<Typography variant="h5" className="tooltipDetails">
236+
₪{detail.product.price}
237+
</Typography>
238+
</p>
239+
</div>
240+
<Button
241+
style={{ width: "10%" }}
242+
onClick={() => {
243+
dispatch(addProductToCart(detail.product));
244+
}}
245+
>
246+
<FavoriteBorderRoundedIcon />
247+
</Button>
248+
</li>
249+
<Divider width="125%" />
250+
</React.Fragment>
251+
))}
168252
</ul>
169253
</div>
170254
</DialogContent>
171-
172-
173-
174-
175255
</Dialog>
176-
</div >
177-
256+
</div>
178257
);
179-
}
180-
export default PhotoList;
258+
};
259+
export default PhotoList;

0 commit comments

Comments
 (0)