diff --git a/car-ui-react/data/db.json b/car-ui-react/data/db.json index 5b18763..266503a 100644 --- a/car-ui-react/data/db.json +++ b/car-ui-react/data/db.json @@ -14,8 +14,7 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://i.pinimg.com/736x/fa/be/08/fabe082d7ca96325961ddd6019583cb7--mystique-ford-contour.jpg", - "in_stock": true, - "id": "f566" + "in_stock": true }, { "carId": 4548, @@ -31,8 +30,7 @@ "best_seller": true, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://www.cartoq.com/wp-content/uploads/2021/09/XUV700-Dark-Knight-edition-featured.jpg", - "in_stock": false, - "id": "b2bc" + "in_stock": false }, { "carId": 1556, @@ -48,8 +46,7 @@ "best_seller": true, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://static.autox.com/uploads/2022/06/Mahindra-Scorpio-N-exterior.png", - "in_stock": true, - "id": "1da2" + "in_stock": true }, { "carId": 4752, @@ -65,8 +62,7 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://paultan.org/image/2020/10/2021-Hyundai-i20-N-Exterior-7.jpg", - "in_stock": true, - "id": "5d64" + "in_stock": true }, { "carId": 4654, @@ -82,8 +78,7 @@ "best_seller": true, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://th.bing.com/th/id/OIP.5i-hWiOn_6RnqXoDoA-H2QHaEo?rs=1&pid=ImgDetMain", - "in_stock": false, - "id": "349d" + "in_stock": false }, { "carId": 1458, @@ -99,8 +94,7 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://english.cdn.zeenews.com/sites/default/files/2022/10/31/1110417-tata-safari-classic-front.jpg", - "in_stock": true, - "id": "a64d" + "in_stock": true }, { "carId": 5467, @@ -116,8 +110,7 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://th.bing.com/th/id/OIP.qzSsXvyXs_A9WpKfF97yJQHaFJ?rs=1&pid=ImgDetMain", - "in_stock": true, - "id": "ad0a" + "in_stock": true }, { "carId": 4567, @@ -133,8 +126,7 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://th.bing.com/th/id/OIP.EL6O-LdJztIEA7BuFBQWtwHaEK?rs=1&pid=ImgDetMain", - "in_stock": true, - "id": "ed24" + "in_stock": true }, { "carId": 6424, @@ -150,8 +142,7 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://imgd.aeplcdn.com/642x336/n/cw/ec/121943/verna-facelift-exterior-right-front-three-quarter.jpeg?isig=0&q=75", - "in_stock": false, - "id": "690b" + "in_stock": false }, { "carId": 1648, @@ -167,8 +158,7 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://images.news18.com/ibnlive/uploads/2021/06/1623556020_2021-hyundai-aura.png", - "in_stock": true, - "id": "3c64" + "in_stock": true }, { "carId": 1879, @@ -184,8 +174,7 @@ "best_seller": true, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://img-ik.cars.co.za/news-site-za/images/2014/06/Grand-i10-5_1800x1800.jpg?tr=w-1200,h-800", - "in_stock": true, - "id": "bc82" + "in_stock": true }, { "carId": 1349, @@ -201,8 +190,7 @@ "best_seller": true, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://ic1.maxabout.us/autos/cars_india/N/2020/10/new-tata-nexon-front-3-quarter-view.jpg", - "in_stock": true, - "id": "4700" + "in_stock": true }, { "carId": 1485, @@ -218,13 +206,232 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://4.bp.blogspot.com/-oOSRY7taTeo/WeYL7s7_8oI/AAAAAAAADKk/W27Zu3lA_LkTaJoOILKePTTG0WStERKkgCLcBGAs/s1600/Honda%2Bcivic%2B2017%2Bfault.jpg", - "in_stock": true, - "id": "3c24" - } + "in_stock": true + }, + "id": 4371, + "brand": "Ford", + "model": "Contour", + "year": 1198, + "color": "Teal", + "mileage": 70.811136, + "price": 2000000, + "quantity": 100, + "tax": 1.4, + "rating": 3, + "best_seller": false, + "long_description": "The Ford Contour, a mid-size sedan, embodies practicality, comfort, and performance. Its sleek design stands out, offering ample space for passengers and a choice of efficient four-cylinder engines or potent V6 variants. Responsive handling and smooth ride quality make every journey enjoyable. Inside, premium materials and advanced technology create a refined ambiance, enhancing convenience and connectivity. The Contour is a compelling choice for drivers seeking style and versatility.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://i.pinimg.com/736x/fa/be/08/fabe082d7ca96325961ddd6019583cb7--mystique-ford-contour.jpg", + "in_stock": true + }, + { + "id": 4548, + "brand": "Mahindra", + "model": "XUV 700", + "year": 1950, + "color": "Black", + "mileage": 13.5465, + "price": 2500000, + "quantity": 200, + "tax": 1.4, + "rating": 4, + "best_seller": true, + "long_description": "The Mahindra XUV700, an SUV, combines style, comfort, and performance. With its bold design and spacious interior, it offers a premium driving experience. Equipped with advanced technology and safety features, the XUV700 ensures convenience and peace of mind on every journey. Whether tackling city streets or off-road adventures, it delivers impressive performance and versatility, making it a top choice for modern drivers.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://www.cartoq.com/wp-content/uploads/2021/09/XUV700-Dark-Knight-edition-featured.jpg", + "in_stock": false + }, + { + "id": 1556, + "brand": "Mahindra", + "model": "Scorpio N", + "year": 1950, + "color": "Black", + "mileage": 13.5465, + "price": 1500000, + "quantity": 200, + "tax": 1.4, + "rating": 5, + "best_seller": true, + "long_description": "The Mahindra Scorpio N 700 SUV combines ruggedness with sophistication. Its bold design exudes confidence, while the spacious interior offers comfort for all passengers. Powered by advanced technology and a robust engine, the Scorpio N 700 delivers impressive performance on and off the road. With versatile features and modern amenities, it's the perfect choice for adventurous drivers seeking style and capability.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://static.autox.com/uploads/2022/06/Mahindra-Scorpio-N-exterior.png", + "in_stock": true + }, + { + "id": 4752, + "brand": "Hundai", + "model": "i20 Grand", + "year": 1925, + "color": "Blue", + "mileage": 13.5465, + "price": 900000, + "quantity": 100, + "tax": 1.4, + "rating": 4, + "best_seller": false, + "long_description": "The Hyundai i20 Grand is a compact hatchback that excels in style, efficiency, and practicality. With its modern design and compact size, it's perfect for navigating city streets with ease. The i20 Grand offers a fuel-efficient engine and agile handling, making it ideal for urban driving. Inside, the cabin is spacious and well-appointed, with advanced technology features adding convenience and connectivity. Overall, the Hyundai i20 Grand combines style, efficiency, and practicality in a compact package.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://paultan.org/image/2020/10/2021-Hyundai-i20-N-Exterior-7.jpg", + "in_stock": true + }, + { + "id": 4654, + "brand": "Tata", + "model": "Harrier", + "year": 1900, + "color": "Orange", + "mileage": 13.5465, + "price": 2000000, + "quantity": 100, + "tax": 1.4, + "rating": 5, + "best_seller": true, + "long_description": "The Tata Harrier, a robust SUV, combines style, power, and versatility. With its bold design and spacious interior, it offers comfort and room for all. Powered by efficient engines, it delivers both performance and fuel economy. Advanced features ensure a connected and safe ride. The Harrier is the ideal choice for those seeking a dynamic and capable SUV.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://th.bing.com/th/id/OIP.5i-hWiOn_6RnqXoDoA-H2QHaEo?rs=1&pid=ImgDetMain", + "in_stock": false + }, + { + "id": 1458, + "brand": "Tata", + "model": "Safari", + "year": 1900, + "color": "Grey", + "mileage": 13.5465, + "price": 2500000, + "quantity": 200, + "tax": 1.4, + "rating": 5, + "best_seller": false, + "long_description": "The Tata Safari, an SUV, combines ruggedness with comfort and style. Its robust design offers ample space for passengers and cargo, while advanced technology ensures a connected and convenient driving experience. With powerful engine options and responsive handling, the Safari excels both on and off the road. Whether tackling city streets or exploring the great outdoors, the Safari delivers versatility and reliability for all adventures.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://english.cdn.zeenews.com/sites/default/files/2022/10/31/1110417-tata-safari-classic-front.jpg", + "in_stock": true + }, + { + "id": 5467, + "brand": "Toyota", + "model": "Fortuner", + "year": 1900, + "color": "White", + "mileage": 13.5465, + "price": 6000000, + "quantity": 300, + "tax": 1.4, + "rating": 5, + "best_seller": false, + "long_description": "The Toyota Fortuner, an SUV, blends ruggedness with luxury. Its robust design offers ample space for passengers and cargo, with advanced features ensuring comfort and convenience. Equipped with powerful engines and capable off-road prowess, the Fortuner delivers a thrilling driving experience both on and off the road. With Toyota's reputation for reliability and durability, the Fortuner is a versatile choice for adventurers and urban dwellers alike.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://th.bing.com/th/id/OIP.qzSsXvyXs_A9WpKfF97yJQHaFJ?rs=1&pid=ImgDetMain", + "in_stock": false + }, + { + "id": 4567, + "brand": "Tata", + "model": "Tigor", + "year": 1900, + "color": "White", + "mileage": 13.5465, + "price": 1200000, + "quantity": 100, + "tax": 1.4, + "rating": 3, + "best_seller": false, + "long_description": "The Tata Tigor, a compact sedan, blends style, efficiency, and affordability. Its sleek design captures attention, while its compact size makes it maneuverable in urban settings. With fuel-efficient engine options and a spacious interior, the Tigor offers comfort and practicality. Advanced features enhance convenience, making it an ideal choice for drivers seeking a stylish and value-packed sedan.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://th.bing.com/th/id/OIP.EL6O-LdJztIEA7BuFBQWtwHaEK?rs=1&pid=ImgDetMain", + "in_stock": true + }, + { + "id": 6424, + "brand": "Hundai", + "model": "Verna", + "year": 1985, + "color": "Black", + "mileage": 13.5465, + "price": 1500000, + "quantity": 50, + "tax": 1.4, + "rating": 4, + "best_seller": false, + "long_description": "The Hyundai Verna, a compact sedan, blends style, comfort, and efficiency. Its modern design and spacious interior cater to both city driving and longer trips. With fuel-efficient engine options, the Verna ensures a balance between performance and economy. Advanced features and intuitive technology enhance convenience and connectivity, making it a compelling choice for drivers seeking a stylish and practical sedan.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://imgd.aeplcdn.com/642x336/n/cw/ec/121943/verna-facelift-exterior-right-front-three-quarter.jpeg?isig=0&q=75", + "in_stock": false + }, + { + "id": 1648, + "brand": "Hundai", + "model": "Aura", + "year": 1198, + "color": "Brown", + "mileage": 12.811136, + "price": 1000000, + "quantity": 150, + "tax": 1.4, + "rating": 3, + "best_seller": false, + "long_description": "The Hyundai Aura, a compact sedan, blends style, efficiency, and performance seamlessly. Its modern design ensures a striking presence on the road while providing ample space for passengers. With a choice of fuel-efficient engines and smooth handling, the Aura delivers a comfortable driving experience. Inside, the cabin boasts premium materials and advanced technology features for enhanced comfort and connectivity. The Hyundai Aura is the perfect choice for those seeking a stylish and practical sedan.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://images.news18.com/ibnlive/uploads/2021/06/1623556020_2021-hyundai-aura.png", + "in_stock": true + }, + { + "id": 1879, + "brand": "Hundai", + "model": "i10 sports", + "year": 1950, + "color": "Orange", + "mileage": 18.5465, + "price": 800000, + "quantity": 160, + "tax": 1.4, + "rating": 4, + "best_seller": true, + "long_description": "The Hyundai i10 Sports car blends style, agility, and efficiency. Its compact design is perfect for urban driving, while offering surprising spaciousness inside. Equipped with a responsive engine, the i10 delivers nimble performance without compromising fuel economy. Inside, modern features and ergonomic design provide comfort and convenience, making it an ideal choice for city dwellers seeking a dynamic driving experience.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://img-ik.cars.co.za/news-site-za/images/2014/06/Grand-i10-5_1800x1800.jpg?tr=w-1200,h-800", + "in_stock": true + }, + { + "id": 1349, + "brand": "Tata", + "model": "Nexon", + "year": 1950, + "color": "Green", + "mileage": 13.5465, + "price": 1200000, + "quantity": 50, + "tax": 1.4, + "rating": 5, + "best_seller": true, + "long_description": "The Tata Nexon, a compact SUV, blends style, performance, and versatility. With its bold design and spacious interior, it offers ample room for passengers and cargo. Advanced technology and safety features enhance the driving experience, while its efficient engines deliver both power and fuel economy. Whether navigating city streets or exploring off-road terrain, the Nexon promises a thrilling ride with unmatched comfort and convenience.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://ic1.maxabout.us/autos/cars_india/N/2020/10/new-tata-nexon-front-3-quarter-view.jpg", + "in_stock": true + }, + { + "id": 1485, + "brand": "Honda", + "model": "Civic", + "year": 1945, + "color": "Red", + "mileage": 10.5465, + "price": 1200000, + "quantity": 85, + "tax": 1.4, + "rating": 2, + "best_seller": false, + "long_description": "The Honda Civic, a compact car, epitomizes reliability, efficiency, and versatility. With its sleek design, spacious interior, and advanced technology features, it offers a comfortable and connected driving experience. Whether navigating city streets or embarking on road trips, the Civic's fuel-efficient engine options and agile handling ensure an enjoyable ride. From its refined cabin to its intuitive infotainment system, the Civic caters to drivers seeking practicality and sophistication.", + "timestamp": "2004-10-19 10: 23: 54", + "poster": "https://4.bp.blogspot.com/-oOSRY7taTeo/WeYL7s7_8oI/AAAAAAAADKk/W27Zu3lA_LkTaJoOILKePTTG0WStERKkgCLcBGAs/s1600/Honda%2Bcivic%2B2017%2Bfault.jpg", + "in_stock": true + } ], "featured_products": [ { - "carId": 1349, + "id": 1349, "brand": "Tata", "model": "Nexon", "year": 1950, @@ -237,11 +444,10 @@ "best_seller": true, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://ic1.maxabout.us/autos/cars_india/N/2020/10/new-tata-nexon-front-3-quarter-view.jpg", - "in_stock": true, - "id": "2d09" + "in_stock": true }, { - "carId": 4548, + "id": 4548, "brand": "Mahindra", "model": "XUV 700", "year": 1950, @@ -254,11 +460,10 @@ "best_seller": true, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://www.cartoq.com/wp-content/uploads/2021/09/XUV700-Dark-Knight-edition-featured.jpg", - "in_stock": false, - "id": "afa9" + "in_stock": false }, { - "carId": 4752, + "id": 4752, "brand": "Hundai", "model": "i20 Grand", "year": 1925, @@ -271,14 +476,11 @@ "best_seller": false, "timestamp": "2004-10-19 10: 23: 54", "poster": "https://paultan.org/image/2020/10/2021-Hyundai-i20-N-Exterior-7.jpg", - "in_stock": true, - "id": "2f24" + "in_stock": true } ], "orders": [ - { - "id": "fa6b" - } + {} ], "users": [ { diff --git a/car-ui-react/src/components/Elements/ProductCard.js b/car-ui-react/src/components/Elements/ProductCard.js index b672fd5..5ce2f47 100644 --- a/car-ui-react/src/components/Elements/ProductCard.js +++ b/car-ui-react/src/components/Elements/ProductCard.js @@ -3,7 +3,7 @@ import {useCart} from "../../context"; import {Rating} from './Rating'; export const ProductCard = ({ product }) => { - const { brand, model, year, color, mileage, price, quantity, tax, poster, in_stock , best_seller, rating} = product; + const { id, brand, model, year, color, mileage, price, quantity, tax, poster, in_stock , best_seller, rating} = product; const { cartList, addToCart, removeFromCart } = useCart(); const [inCart, setInCart] = useState(false); @@ -21,14 +21,16 @@ export const ProductCard = ({ product }) => { if (!product) { return null; } + return (
- + + { best_seller && Best Seller }
- +
{brand} {model}

{color}

diff --git a/car-ui-react/src/components/index.js b/car-ui-react/src/components/index.js index a0a7687..0a09025 100644 --- a/car-ui-react/src/components/index.js +++ b/car-ui-react/src/components/index.js @@ -2,4 +2,5 @@ export { Header } from "./Layout/Header" export { Footer } from "./Layout/Footer" export { ProductCard } from "./Elements/ProductCard" export { DropdownLoggedIn } from "./Elements/DropdownLoggedIn"; -export {DropdownLoggedOut } from "./Elements/DropdownLoggedOut"; \ No newline at end of file +export {DropdownLoggedOut } from "./Elements/DropdownLoggedOut"; +export { Rating } from "./Elements/Rating"; diff --git a/car-ui-react/src/pages/ProductDetail.js b/car-ui-react/src/pages/ProductDetail.js new file mode 100644 index 0000000..5aac2c8 --- /dev/null +++ b/car-ui-react/src/pages/ProductDetail.js @@ -0,0 +1,67 @@ +import { useEffect, useState } from "react" +import { useParams } from "react-router-dom"; +import { Rating } from "../components"; +import { useCart } from "../context"; + +export const ProductDetail = () => { + const { cartList, addToCart, removeFromCart } = useCart(); + const [inCart, setInCart] = useState(false); + const [product, setProduct] = useState({}); + const { id } = useParams(); + + useEffect(() => { + async function fetchProducts(){ + const response = await fetch(`http://localhost:8000/products/${id}`); + const data = await response.json() + setProduct(data); + } + fetchProducts(); + }, [id]); + + useEffect(() => { + const productInCart = cartList.find(item => item.id === product.id); + + if(productInCart){ + setInCart(true); + } else { + setInCart(false); + } + + }, [cartList, product.id]); + + return ( +
+
+

{product.brand} {product.model}

+
+
+ +
+
+

+ INR + {product.price} +

+

+ + + +

+

+ { product.best_seller && BEST SELLER } + { product.in_stock && INSTOCK } + { !product.in_stock && OUT OF STOCK } +

+

+ { !inCart && } + { inCart && } +

+

+ {product.long_description} +

+
+
+
+
+ ) +} \ No newline at end of file diff --git a/car-ui-react/src/pages/index.js b/car-ui-react/src/pages/index.js index 1301ce4..29e3763 100644 --- a/car-ui-react/src/pages/index.js +++ b/car-ui-react/src/pages/index.js @@ -3,3 +3,4 @@ export { CartPage } from "./Cart/CartPage"; export { HomePage } from "./Home/HomePage"; export { Login} from "./Login"; export { Register } from "./Register"; +export { ProductDetail } from "./ProductDetail"; diff --git a/car-ui-react/src/routes/AllRoutes.js b/car-ui-react/src/routes/AllRoutes.js index 2bea0b3..0150156 100644 --- a/car-ui-react/src/routes/AllRoutes.js +++ b/car-ui-react/src/routes/AllRoutes.js @@ -1,6 +1,7 @@ import { Routes, Route } from "react-router-dom"; import { CartPage, Login, Register } from "../pages"; import { ProductsList} from "../pages/Products/ProductsList"; +import { ProductDetail } from "../pages"; import { HomePage } from "../pages/Home/HomePage"; export const AllRoutes = () => { @@ -9,6 +10,7 @@ export const AllRoutes = () => { } /> } /> + } /> } /> } /> } />