Skip to content

Commit 47f6a70

Browse files
joblessgodjoblessgod
committed
Some Changes
+ Loading Screen whenever any API calls + slug page api set up + related products on slug Page
1 parent 2976ded commit 47f6a70

File tree

9 files changed

+165
-38
lines changed

9 files changed

+165
-38
lines changed

‎src/App.jsx

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ import Login from "./pages/Login";
1313
import Signup from "./pages/Signup";
1414
import Contact from "./pages/Contact";
1515
import Pages from "./pages/Pages";
16-
import Product from "./pages/products/Product";
17-
import Products from "./pages/products/Product";
16+
import LoadingScreen from "./components/Common/LoadingScreen";
17+
import Products from "./components/home/Product";
18+
import Cart from "./pages/Cart";
1819

1920
const router = createBrowserRouter([
2021
{
@@ -26,17 +27,22 @@ const router = createBrowserRouter([
2627
element: <Home />,
2728
},
2829
{
29-
path: "product",
30-
element: <Products/>,
31-
},
32-
{
33-
path: ":slug",
34-
element: <Slug />,
30+
path: "products",
31+
children: [
32+
{
33+
path: ":slug",
34+
element: <Slug />,
35+
},
36+
],
3537
},
3638
{
3739
path: "pages",
3840
element: <Pages />,
3941
},
42+
{
43+
path: "cart",
44+
element: <Cart />,
45+
},
4046
{
4147
path: "blogs",
4248
element: <Blogs />,
@@ -85,18 +91,7 @@ function App() {
8591
}, []);
8692

8793
return (
88-
<>
89-
{isLoading ? (
90-
<div className="flex h-screen items-center justify-center">
91-
<button class="loader__btn">
92-
<div class="loader"></div>
93-
Loading
94-
</button>
95-
</div>
96-
) : (
97-
<RouterProvider router={router} />
98-
)}
99-
</>
94+
<>{isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}</>
10095
);
10196
}
10297

‎src/components/Common/Footer.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from "react";
22

33
export default function Footer() {
44
return (
5-
<>
6-
<div className="grid grid-flow-row gap-4 bg-[#EEEFFB] p-[50px] sm:grid-cols-2 md:grid-cols-4 md:place-content-center">
5+
<div className="bg-[#EEEFFB]">
6+
<div className="grid grid-flow-row gap-4 container p-[50px] sm:grid-cols-2 md:grid-cols-4 md:place-content-center">
77
<div className="flex flex-col gap-4">
88
<p className="text-[20px] font-bold">Hekto</p>
99
<div className="flex">
@@ -56,6 +56,6 @@ export default function Footer() {
5656
</ul>
5757
</div>
5858
</div>
59-
</>
59+
</div>
6060
);
6161
}

‎src/components/Common/Header.jsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { setLogOut } from "../../redux/slice/user";
1616

1717
export default function Header() {
1818
const user = useSelector((store) => store.user.value);
19+
const cartItem = useSelector((store) => store.cart.value);
1920
const dispatch = useDispatch();
2021

2122
const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -72,7 +73,7 @@ export default function Header() {
7273
className="cursor-pointer"
7374
onClick={() => {
7475
dispatch(setLogOut());
75-
localStorage.removeItem("token")
76+
localStorage.removeItem("token");
7677
}}
7778
>
7879
Logout{" "}
@@ -92,9 +93,14 @@ export default function Header() {
9293
Wishlist <FaHeart className="inline-block" />
9394
</span> */}
9495

95-
<span className="font-sans">
96-
<FaCartArrowDown className="inline-block" />
97-
</span>
96+
<Link className="relative" to={"/cart"}>
97+
<span className="absolute flex items-center font-sans">
98+
<FaCartArrowDown className="inline-block" />
99+
<div className=" items-center rounded-[50%] bg-secondary px-2 text-center font-Lato text-[16px]">
100+
{cartItem.length}
101+
</div>
102+
</span>
103+
</Link>
98104
</div>
99105
</nav>
100106
</div>

‎src/components/Common/LoadingScreen.jsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
3+
export default function LoadingScreen() {
4+
return (
5+
<div className="flex h-screen items-center justify-center">
6+
<button class="loader__btn">
7+
<div class="loader"></div>
8+
Loading
9+
</button>
10+
</div>
11+
);
12+
}

‎src/components/home/Home.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Banner from "./Banner";
22
import "slick-carousel/slick/slick.css";
33
import "slick-carousel/slick/slick-theme.css";
44
import Slider from "react-slick";
5-
import Products from "../../pages/products/Product";
5+
import Products from "./Product";
66
import axios from "axios";
77
import React, { useEffect, useState } from "react";
88
import Skeleton from "react-loading-skeleton";
@@ -95,7 +95,7 @@ export default function Home() {
9595
})}
9696
</Slider>
9797

98-
<div className="container grid gap-4 py-[116px] sm:py-[130px] md:grid-cols-2 md:py-[148px] lg:grid-cols-4 lg:py-[166px] xl:py-[188px] xxl:py-[210px]">
98+
<div className="container grid gap-4 py-[116px] sm:py-[130px] md:grid-cols-2 md:py-[148px] lg:grid-cols-4 lg:py-[166px] xl:py-[188px] xxl:py-[210px]">
9999
{products.map((el) => {
100100
return (
101101
<>

‎src/pages/products/Product.jsx renamed to ‎src/components/home/Product.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
import React from "react";
22
import { FaCartPlus } from "react-icons/fa";
3-
import BreadCrumb from "../../components/Common/BreadCrumb";
3+
import { useDispatch } from "react-redux";
4+
// import BreadCrumb from "../Common/BreadCrumb";
45
import { useNavigate } from "react-router-dom";
6+
import { addCartItem } from "../../redux/slice/cart";
57

68
export default function Products(props) {
9+
const dispatch = useDispatch();
710
const navigate = useNavigate();
811
return (
912
<>
1013
<div onClick={() => {
1114
navigate(`/products/${props.id}`)
1215
}}>
1316

14-
<div className=" group relative shadow-[0px_0px_25px_0px_rgba(0,0,0,0.1)] ">
17+
<div className="hover:cursor-pointer group relative shadow-[0px_0px_25px_0px_rgba(0,0,0,0.1)] ">
1518
<div
1619
onClick={(e) => {
1720
e.stopPropagation();
21+
dispatch(addCartItem(props))
1822
}}
1923
className=" absolute left-[11px] top-[11px] hidden h-[30px] w-[30px] items-center justify-center rounded-full border border-primary transition-all hover:cursor-pointer !hover:text-secondary group-hover:flex"
2024
>
21-
<FaCartPlus className="text-primary " />
25+
<FaCartPlus className="text-primary hover:text-secondary" />
2226
</div>
2327
<img
2428
src={props.image}

‎src/pages/Cart.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import axios from 'axios'
2+
import React, { useEffect } from 'react'
3+
import { useSelector } from 'react-redux'
4+
5+
export default function Cart() {
6+
const cartItem = useSelector((store)=> store.cart.value)
7+
8+
useEffect(() => {
9+
axios.get("")
10+
11+
}, [])
12+
return (
13+
14+
<>
15+
<div>
16+
{JSON.stringify(cartItem)}
17+
18+
19+
20+
</div>
21+
</>
22+
)
23+
}

‎src/pages/products/Slug.jsx

Lines changed: 68 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,72 @@
1-
import React from 'react'
1+
import React, { useEffect, useState } from "react";
2+
import axios from "axios";
3+
import { useParams } from "react-router-dom";
4+
5+
import Products from "../../components/home/Product";
6+
import LoadingScreen from "../../components/Common/LoadingScreen";
27

38
export default function Slug() {
9+
const [isLoading, setIsLoading] = useState(true);
10+
const [relatedProduct, setRelatedProduct] = useState([]);
11+
12+
const [product, setProduct] = useState({});
13+
const params = useParams();
14+
15+
useEffect(() => {
16+
axios
17+
.get(`https://ecommerce-sagartmg2.vercel.app/api/products/${params.slug}`)
18+
.then((res) => {
19+
setProduct(res.data.data);
20+
setIsLoading(false);
21+
});
22+
}, []);
23+
24+
useEffect(() => {
25+
axios
26+
.get(`https://ecommerce-sagartmg2.vercel.app/api/products/trending`)
27+
.then((res) => {
28+
console.log(res.data.data);
29+
setRelatedProduct(res.data.data);
30+
setIsLoading(false);
31+
});
32+
}, []);
33+
434
return (
5-
<div>Slug</div>
6-
)
35+
<>
36+
<div className="container">
37+
<div>
38+
{isLoading ? (
39+
<LoadingScreen />
40+
) : (
41+
<div>
42+
<div>Name: {product.name}</div>
43+
<div>Price: ${product.price}</div>
44+
<div>
45+
Image: <img src={product.image} />
46+
</div>
47+
</div>
48+
)}
49+
</div>
50+
51+
<div className="text-center font-Lato text-[30px] underline">
52+
Related Products
53+
<div className=" grid gap-4 md:grid-cols-2 lg:grid-cols-4">
54+
{relatedProduct.map((el) => {
55+
return (
56+
<>
57+
<Products
58+
key={el._id}
59+
id={el._id}
60+
name={el.name}
61+
price={el.price}
62+
image={el.image}
63+
/>
64+
</>
65+
);
66+
})}
67+
</div>
68+
</div>
69+
</div>
70+
</>
71+
);
772
}

‎src/redux/slice/cart.js

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,34 @@ import { createSlice } from '@reduxjs/toolkit'
22
export const CartSlice = createSlice({
33
name: 'cart',
44
initialState: {
5-
value: null
5+
value: [
6+
7+
8+
]
69
},
710
reducers: {
8-
11+
addCartItem: (state, action) => {
12+
console.log("Added item in Cart");
13+
let { name, _id, price, image } = action.payload
14+
15+
16+
state.value.push(
17+
{
18+
_id,
19+
name,
20+
price,
21+
image,
22+
quantity: "1",
23+
}
24+
)
25+
26+
},
27+
resetCart: (state, action) => {
28+
console.log("Cart Item reset!");
29+
},
30+
931
}
1032
})
1133

12-
export const { setReduxCart: setReduxCart, setLogOut } = CartSlice.actions
34+
export const { addCartItem, resetCart } = CartSlice.actions
1335
export default CartSlice.reducer

0 commit comments

Comments
 (0)