Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Commit

Permalink
set loading in product page
Browse files Browse the repository at this point in the history
  • Loading branch information
@billowdev
billowdev committed May 26, 2023
1 parent 8ff4585 commit 3507278
Showing 1 changed file with 143 additions and 124 deletions.
267 changes: 143 additions & 124 deletions src/pages/product/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const ProductTest = ({ }: Props) => {
const isSmallDevice = useMediaQuery(theme.breakpoints.down("xs"));
const [searchTerm, setSearchTerm] = useState("");



const [categories, setCategories] = useState<any>([]);
const [isModalOpen, setIsModalOpen] = useState(false);
Expand Down Expand Up @@ -128,7 +128,7 @@ const ProductTest = ({ }: Props) => {
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
}, 200);
}, 800);
return () => {
clearInterval(timer);
};
Expand All @@ -140,25 +140,21 @@ const ProductTest = ({ }: Props) => {
const payload = await productService.getAllProduct();
const categoriesPayload = await categoryService.getAllCategory();
const colorSchemesPayload = await colorSchemeService.getAllColorScheme();

setProducts(payload);
setCategories(categoriesPayload);
setColorSchemes(colorSchemesPayload);
setLoading(false)


} catch (error) {

console.error(error);
}
}
fetchData();

}, []);




}, []);


const handleClearFilters = () => {
Expand Down Expand Up @@ -258,18 +254,22 @@ const ProductTest = ({ }: Props) => {
};

const [progress, setProgress] = React.useState(10);
if (loading) {
return <MainLayout>
<Box style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '768px',
}}>
<CircularProgressWithLabel value={progress} /> กำลังโหลดกรุณารอสักครู่
</Box>
</MainLayout>
}

// if (loading) {
// return <MainLayout>
// <Box style={{
// display: 'flex',
// justifyContent: 'center',
// alignItems: 'center',
// minHeight: '768px',
// }}>
// <React.Fragment>
// <CircularProgressWithLabel value={progress} />
// <Typography style={{ marginLeft: "16px" }}>กำลังโหลดกรุณารอสักครู่</Typography>
// </React.Fragment>
// </Box>
// </MainLayout>
// }

const handleSearchInputChange = (
event: React.ChangeEvent<HTMLInputElement>
Expand All @@ -278,7 +278,9 @@ const ProductTest = ({ }: Props) => {
};

return (

<MainLayout>

<Box sx={{ flexGrow: 1, p: isSmallDevice ? 0 : 4 }}>

<NextSeo
Expand Down Expand Up @@ -349,112 +351,127 @@ const ProductTest = ({ }: Props) => {
</Grid>
</Box>





<CategoryFilterModal />

<ColorSchemeFilterModal />

<Grid container spacing={2} minHeight={"100vh"}>
{currentProducts.length === 0 ? (
<Typography variant="h4" style={{ textAlign: "center", margin: "auto" }}>
ไม่พบข้อมูลสินค้า
</Typography>
) : (
currentProducts.map((product: ProductPayload, index: number) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={index}>
<Card
key={product.id}
style={{ padding: "20px", margin: "20px", maxWidth: "345" }}
>
<CardContent>
<Carousel
showArrows
showStatus={false}
showIndicators={false}
showThumbs={false}
emulateTouch
autoPlay
infiniteLoop
interval={3000}
transitionTime={350}
swipeable
dynamicHeight
width="100%"
{
loading ? <Box style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '768px',
}}>
<React.Fragment>
<CircularProgressWithLabel value={progress} />
<Typography style={{ marginLeft: "16px" }}>กำลังโหลดข้อมูลกรุณารอสักครู่</Typography>
</React.Fragment>
</Box>

:


<Grid container spacing={2} minHeight={"100vh"}>
{currentProducts.length === 0 ? (
<Typography variant="h4" style={{ textAlign: "center", margin: "auto" }}>
ไม่พบข้อมูลสินค้า
</Typography>
) : (
currentProducts.map((product: ProductPayload, index: number) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={index}>
<Card
key={product.id}
style={{ padding: "20px", margin: "20px", maxWidth: "345" }}
>
{product?.productImages?.map((image: any, index: number) => (
<div key={index}>
<Image
src={productImageURL(image?.image)}
alt={`Product image ${index}`}
width="250"
height="250"
style={{ borderRadius: "5%", objectFit: "cover" }}
/>
</div>
))}
</Carousel>

<Typography gutterBottom variant="h5" component="div">
{product.name}
</Typography>
<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> โทนสี:</span>
{product?.colorScheme?.nameTH} (
{product?.colorScheme?.nameEN})
</Typography>
{product?.colorScheme ? (
<Grid container alignItems="center">
<Grid item>
<Box
sx={{
width: 50, // Adjust width for the rectangle
height: 50,
backgroundColor: product?.colorScheme.hex,
borderRadius: "5%", // Adjust borderRadius for the rectangle
border: "1px solid black",
marginRight: 2,
}}
/>
</Grid>
<Grid item sx={{ marginRight: "16px" }}>
<Typography gutterBottom component="div">
{product?.colorScheme?.id} &nbsp;
</Typography>
</Grid>
</Grid>
) : null}

<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> ประเภทสินค้า:</span>
{product?.category?.name}
</Typography>

<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> ราคา:</span> {product?.price} THB
</Typography>
<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> รายละเอียดสินค้า:</span> {product?.desc}
</Typography>

</CardContent>

<Button
variant="contained"
color="primary"
onClick={() => {
router.push("/product/" + product?.id)
}}
>
รายละเอียดเพิ่มเติม
</Button>
</Card>
</Grid>
))
)}
</Grid>
<CardContent>
<Carousel
showArrows
showStatus={false}
showIndicators={false}
showThumbs={false}
emulateTouch
autoPlay
infiniteLoop
interval={3000}
transitionTime={350}
swipeable
dynamicHeight
width="100%"
>
{product?.productImages?.map((image: any, index: number) => (
<div key={index}>
<Image
src={productImageURL(image?.image)}
alt={`Product image ${index}`}
width="250"
height="250"
style={{ borderRadius: "5%", objectFit: "cover" }}
/>
</div>
))}
</Carousel>

<Typography gutterBottom variant="h5" component="div">
{product.name}
</Typography>
<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> โทนสี:</span>
{product?.colorScheme?.nameTH} (
{product?.colorScheme?.nameEN})
</Typography>
{product?.colorScheme ? (
<Grid container alignItems="center">
<Grid item>
<Box
sx={{
width: 50, // Adjust width for the rectangle
height: 50,
backgroundColor: product?.colorScheme.hex,
borderRadius: "5%", // Adjust borderRadius for the rectangle
border: "1px solid black",
marginRight: 2,
}}
/>
</Grid>
<Grid item sx={{ marginRight: "16px" }}>
<Typography gutterBottom component="div">
{product?.colorScheme?.id} &nbsp;
</Typography>
</Grid>
</Grid>
) : null}

<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> ประเภทสินค้า:</span>
{product?.category?.name}
</Typography>

<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> ราคา:</span> {product?.price} THB
</Typography>
<Typography variant="body1" color="text.secondary">
<span style={{ fontWeight: 'bold' }}> รายละเอียดสินค้า:</span> {product?.desc}
</Typography>

</CardContent>

<Button
variant="contained"
color="primary"
onClick={() => {
router.push("/product/" + product?.id)
}}
>
รายละเอียดเพิ่มเติม
</Button>
</Card>
</Grid>
))
)}
</Grid>
}



{totalPages > 1 && (
<Box display="flex" justifyContent="center" mt={4}>
Expand All @@ -466,6 +483,8 @@ const ProductTest = ({ }: Props) => {


</Box>


</MainLayout>
);
};
Expand Down

0 comments on commit 3507278

Please sign in to comment.