Skip to content

Commit

Permalink
update home page product listing component
Browse files Browse the repository at this point in the history
  • Loading branch information
@VenketeshRushi
VenketeshRushi committed Oct 30, 2023
1 parent 5ead7a7 commit 1b095db
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 135 deletions.
270 changes: 137 additions & 133 deletions src/components/home/ClothSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,145 +4,149 @@ import { HomeDescText, HomeText } from "./HomeText";
import { useNavigate } from "react-router-dom";

export const ClothSection = ({ clothData }) => {
// console.log(clothData)
// console.log("Render Card clothData",clothData)
const navigate = useNavigate();
return (
<>
<Box
m={"60px auto 60px"}
w={["94%", "94%", "94%", "94%", "80%"]}
textAlign={"center"}
fontWeight={"bolder"}
>
<HomeText>Nike Unleash Your Potential</HomeText>
{/* <HomeDescText>{description}</HomeDescText> */}
{[...Object.keys(clothData)].length > 0 &&
<>
<Box
m={"60px auto 60px"}
w={["94%", "94%", "94%", "94%", "80%"]}
textAlign={"center"}
fontWeight={"bolder"}
>
<HomeText>Nike Unleash Your Potential</HomeText>
{/* <HomeDescText>{description}</HomeDescText> */}

<Grid
gap={["10px", "10px", "10px", "10px", "20px"]}
templateColumns={[
"repeat(2, 1fr)",
"repeat(2, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
]}
>
<ClothGridBox
source={clothData?.a[0]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[0].id}`);
}}
/>
<ClothGridBox
source={clothData?.a[1]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[1].id}`);
}}
/>
<ClothGridBox
source={clothData?.a[2]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[2].id}`);
}}
/>
<ClothGridBox
source={clothData?.a[3]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[3].id}`);
}}
/>
</Grid>
</Box>
<Box
m={"60px auto 60px"}
w={["94%", "94%", "94%", "94%", "80%"]}
textAlign={"center"}
fontWeight={"bolder"}
>
<HomeText>Elevate Your Workout</HomeText>
{/* <HomeDescText>{description}</HomeDescText> */}
<Grid
gap={["10px", "10px", "10px", "10px", "20px"]}
templateColumns={[
"repeat(2, 1fr)",
"repeat(2, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
]}
>
<ClothGridBox
source={clothData?.a[0]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[0].id}`);
}}
/>
<ClothGridBox
source={clothData?.a[1]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[1].id}`);
}}
/>
<ClothGridBox
source={clothData?.a[2]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[2].id}`);
}}
/>
<ClothGridBox
source={clothData?.a[3]?.image}
onClick={() => {
navigate(`/description/${clothData?.a[3].id}`);
}}
/>
</Grid>
</Box>
<Box
m={"60px auto 60px"}
w={["94%", "94%", "94%", "94%", "80%"]}
textAlign={"center"}
fontWeight={"bolder"}
>
<HomeText>Elevate Your Workout</HomeText>
{/* <HomeDescText>{description}</HomeDescText> */}

<Grid
gap={["10px", "10px", "10px", "10px", "20px"]}
templateColumns={[
"repeat(2, 1fr)",
"repeat(2, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
]}
>
<ClothGridBox
source={clothData.b[0]?.image}
onClick={() => {
navigate(`/description/${clothData.b[0].id}`);
}}
/>
<ClothGridBox
source={clothData.b[1]?.image}
onClick={() => {
navigate(`/description/${clothData.b[1].id}`);
}}
/>
<ClothGridBox
source={clothData.b[2]?.image}
onClick={() => {
navigate(`/description/${clothData.b[2].id}`);
}}
/>
<ClothGridBox
source={clothData.b[3]?.image}
onClick={() => {
navigate(`/description/${clothData.b[3].id}`);
}}
/>
</Grid>
</Box>
<Box
m={"60px auto 60px"}
w={["94%", "94%", "94%", "94%", "80%"]}
textAlign={"center"}
fontWeight={"bolder"}
>
<HomeText>Gear Up and Just Do It!</HomeText>
{/* <HomeDescText>{description}</HomeDescText> */}
<Grid
gap={["10px", "10px", "10px", "10px", "20px"]}
templateColumns={[
"repeat(2, 1fr)",
"repeat(2, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
]}
>
<ClothGridBox
source={clothData?.b[0]?.image}
onClick={() => {
navigate(`/description/${clothData.b[0].id}`);
}}
/>
<ClothGridBox
source={clothData?.b[1]?.image}
onClick={() => {
navigate(`/description/${clothData?.b[1].id}`);
}}
/>
<ClothGridBox
source={clothData?.b[2]?.image}
onClick={() => {
navigate(`/description/${clothData?.b[2].id}`);
}}
/>
<ClothGridBox
source={clothData?.b[3]?.image}
onClick={() => {
navigate(`/description/${clothData?.b[3].id}`);
}}
/>
</Grid>
</Box>
<Box
m={"60px auto 60px"}
w={["94%", "94%", "94%", "94%", "80%"]}
textAlign={"center"}
fontWeight={"bolder"}
>
<HomeText>Gear Up and Just Do It!</HomeText>
{/* <HomeDescText>{description}</HomeDescText> */}

<Grid
gap={["10px", "10px", "10px", "10px", "20px"]}
templateColumns={[
"repeat(2, 1fr)",
"repeat(2, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
]}
>
<ClothGridBox
source={clothData.c[0]?.image}
onClick={() => {
navigate(`/description/${clothData.c[0].id}`);
}}
/>
<ClothGridBox
source={clothData.c[1]?.image}
onClick={() => {
navigate(`/description/${clothData.c[1].id}`);
}}
/>
<ClothGridBox
source={clothData.c[2]?.image}
onClick={() => {
navigate(`/description/${clothData.c[2].id}`);
}}
/>
<ClothGridBox
source={clothData.c[3]?.image}
onClick={() => {
navigate(`/description/${clothData.c[3].id}`);
}}
/>
</Grid>
</Box>
<Grid
gap={["10px", "10px", "10px", "10px", "20px"]}
templateColumns={[
"repeat(2, 1fr)",
"repeat(2, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
"repeat(4, 1fr)",
]}
>
<ClothGridBox
source={clothData?.c[0]?.image}
onClick={() => {
navigate(`/description/${clothData?.c[0].id}`);
}}
/>
<ClothGridBox
source={clothData?.c[1]?.image}
onClick={() => {
navigate(`/description/${clothData?.c[1].id}`);
}}
/>
<ClothGridBox
source={clothData?.c[2]?.image}
onClick={() => {
navigate(`/description/${clothData?.c[2]?.id}`);
}}
/>
<ClothGridBox
source={clothData?.c[3]?.image}
onClick={() => {
navigate(`/description/${clothData?.c[3].id}`);
}}
/>
</Grid>
</Box>
</>
}
</>
);
};
11 changes: 10 additions & 1 deletion src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,18 @@ function Home() {
);
const [isLargerThan420] = useMediaQuery("(min-width: 420px)");
useEffect(() => {
dispatch(getClothData());
getHomeClothData()
}, []);

async function getHomeClothData() {
try {
// console.log("getClothData called")
const response = await dispatch(getClothData()).unwrap();
console.log(response)
} catch (rejectedValueOrSerializedError) {
console.log(rejectedValueOrSerializedError)
}
}
return (
<Box width={"100%"}>
<Box
Expand Down
2 changes: 1 addition & 1 deletion src/redux/Reducers/homeReducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export const homeSlice = createSlice({
state.loading = true;
});
builder.addCase(getClothData.fulfilled, (state, action) => {
state.loading = false;
state.clothData = action.payload.data;
state.clothDataHomepage = action.payload.clothDataHomepage;
state.loading = false;
state.error = false;
});
builder.addCase(getClothData.rejected, (state, action) => {
Expand Down

0 comments on commit 1b095db

Please sign in to comment.