From 8823bf522435a8e9010489d7c33e4dfcdee8075d Mon Sep 17 00:00:00 2001 From: deepak1067 Date: Tue, 20 Feb 2024 18:56:39 +0530 Subject: [PATCH 1/3] added product detail --- car-ui-react/data/db.json | 45 ++++++++++------ .../src/components/Elements/ProductCard.js | 9 ++-- car-ui-react/src/components/index.js | 3 +- car-ui-react/src/pages/ProductDetail.js | 52 +++++++++++++++++++ car-ui-react/src/pages/index.js | 1 + car-ui-react/src/routes/AllRoutes.js | 2 + 6 files changed, 92 insertions(+), 20 deletions(-) create mode 100644 car-ui-react/src/pages/ProductDetail.js diff --git a/car-ui-react/data/db.json b/car-ui-react/data/db.json index c42f2ec..369b68c 100644 --- a/car-ui-react/data/db.json +++ b/car-ui-react/data/db.json @@ -1,7 +1,7 @@ { "products": [ { - "carId": 4371, + "id": 4371, "brand": "Ford", "model": "Contour", "year": 1198, @@ -12,12 +12,13 @@ "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 }, { - "carId": 4548, + "id": 4548, "brand": "Mahindra", "model": "XUV 700", "year": 1950, @@ -28,12 +29,13 @@ "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 }, { - "carId": 1556, + "id": 1556, "brand": "Mahindra", "model": "Scorpio N", "year": 1950, @@ -44,12 +46,13 @@ "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 }, { - "carId": 4752, + "id": 4752, "brand": "Hundai", "model": "i20 Grand", "year": 1925, @@ -60,12 +63,13 @@ "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 }, { - "carId": 4654, + "id": 4654, "brand": "Tata", "model": "Harrier", "year": 1900, @@ -76,12 +80,13 @@ "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 }, { - "carId": 1458, + "id": 1458, "brand": "Tata", "model": "Safari", "year": 1900, @@ -92,12 +97,13 @@ "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 }, { - "carId": 5467, + "id": 5467, "brand": "Toyota", "model": "Fortuner", "year": 1900, @@ -108,12 +114,13 @@ "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 }, { - "carId": 4567, + "id": 4567, "brand": "Tata", "model": "Tigor", "year": 1900, @@ -124,12 +131,13 @@ "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 }, { - "carId": 6424, + "id": 6424, "brand": "Hundai", "model": "Verna", "year": 1985, @@ -140,12 +148,13 @@ "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 }, { - "carId": 1648, + "id": 1648, "brand": "Hundai", "model": "Aura", "year": 1198, @@ -156,12 +165,13 @@ "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 }, { - "carId": 1879, + "id": 1879, "brand": "Hundai", "model": "i10 sports", "year": 1950, @@ -172,12 +182,13 @@ "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 }, { - "carId": 1349, + "id": 1349, "brand": "Tata", "model": "Nexon", "year": 1950, @@ -188,12 +199,13 @@ "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 }, { - "carId": 1485, + "id": 1485, "brand": "Honda", "model": "Civic", "year": 1945, @@ -204,6 +216,7 @@ "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 @@ -211,7 +224,7 @@ ], "featured_products": [ { - "carId": 1349, + "id": 1349, "brand": "Tata", "model": "Nexon", "year": 1950, @@ -227,7 +240,7 @@ "in_stock": true }, { - "carId": 4548, + "id": 4548, "brand": "Mahindra", "model": "XUV 700", "year": 1950, @@ -243,7 +256,7 @@ "in_stock": false }, { - "carId": 4752, + "id": 4752, "brand": "Hundai", "model": "i20 Grand", "year": 1925, diff --git a/car-ui-react/src/components/Elements/ProductCard.js b/car-ui-react/src/components/Elements/ProductCard.js index 8e35ce0..7902ac7 100644 --- a/car-ui-react/src/components/Elements/ProductCard.js +++ b/car-ui-react/src/components/Elements/ProductCard.js @@ -6,16 +6,19 @@ export const ProductCard = ({ product }) => { if (!product) { return null; // Or handle the case where product is undefined } - const { brand, model, year, color, mileage, price, quantity, tax, poster, in_stock, rating, best_seller } = product; + const { id, brand, model, year, color, mileage, price, quantity, tax, poster, in_stock, rating, best_seller } = product; 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 a9e1ca8..50b9f25 100644 --- a/car-ui-react/src/components/index.js +++ b/car-ui-react/src/components/index.js @@ -1,3 +1,4 @@ export { Header } from "./Layout/Header" export { Footer } from "./Layout/Footer" -export { ProductCard } from "./Elements/ProductCard" \ No newline at end of file +export { ProductCard } from "./Elements/ProductCard" +export { Rating } from "./Elements/Rating"; \ No newline at end of file diff --git a/car-ui-react/src/pages/ProductDetail.js b/car-ui-react/src/pages/ProductDetail.js new file mode 100644 index 0000000..b6fa1de --- /dev/null +++ b/car-ui-react/src/pages/ProductDetail.js @@ -0,0 +1,52 @@ +import { useEffect, useState } from "react" +import { useParams } from "react-router-dom"; +import { Rating } from "../components"; + +export const ProductDetail = () => { + 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]); + + return ( +
+
+

{product.brand} {product.model}

+
+
+ +
+
+

+ $ + {product.price} +

+

+ + + +

+

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

+

+ +

+

+ {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 70b2970..30b0326 100644 --- a/car-ui-react/src/pages/index.js +++ b/car-ui-react/src/pages/index.js @@ -1,3 +1,4 @@ export { DashboardPage } from "./Dashboard/DashboardPage"; export { CartPage } from "./Cart/CartPage"; export { HomePage } from "./Home/HomePage"; +export { ProductDetail } from "./ProductDetail"; diff --git a/car-ui-react/src/routes/AllRoutes.js b/car-ui-react/src/routes/AllRoutes.js index ab3ce67..9e9de8c 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 } 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 = () => { } /> } /> + } /> } /> From a60684594d2c7c4e59970fc9afd48110cc832792 Mon Sep 17 00:00:00 2001 From: deepak1067 Date: Wed, 21 Feb 2024 15:19:30 +0530 Subject: [PATCH 2/3] added product detail --- .../src/components/Elements/ProductCard.js | 4 +--- car-ui-react/src/pages/ProductDetail.js | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/car-ui-react/src/components/Elements/ProductCard.js b/car-ui-react/src/components/Elements/ProductCard.js index 0855765..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,7 +21,6 @@ export const ProductCard = ({ product }) => { if (!product) { return null; } - const { id, brand, model, year, color, mileage, price, quantity, tax, poster, in_stock, rating, best_seller } = product; return (
@@ -31,7 +30,6 @@ export const ProductCard = ({ product }) => {
- {/* */}
{brand} {model}
 diff --git a/car-ui-react/src/pages/ProductDetail.js b/car-ui-react/src/pages/ProductDetail.js index b6fa1de..538498f 100644 --- a/car-ui-react/src/pages/ProductDetail.js +++ b/car-ui-react/src/pages/ProductDetail.js @@ -1,8 +1,11 @@ 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(); @@ -15,6 +18,17 @@ export const ProductDetail = () => { fetchProducts(); }, [id]); + useEffect(() => { + const productInCart = cartList.find(item => item.id === product.id); + + if(productInCart){ + setInCart(true); + } else { + setInCart(false); + } + + }, [cartList, product.id]); + return (
@@ -39,7 +53,8 @@ export const ProductDetail = () => { { !product.in_stock && OUT OF STOCK }

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

{product.long_description} From b5a3714f03bd9202e0049aa02847bd8c9d82c7ee Mon Sep 17 00:00:00 2001 From: deepak1067 Date: Wed, 21 Feb 2024 16:30:11 +0530 Subject: [PATCH 3/3] added product detail --- car-ui-react/src/pages/ProductDetail.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/car-ui-react/src/pages/ProductDetail.js b/car-ui-react/src/pages/ProductDetail.js index 538498f..5aac2c8 100644 --- a/car-ui-react/src/pages/ProductDetail.js +++ b/car-ui-react/src/pages/ProductDetail.js @@ -39,7 +39,7 @@ export const ProductDetail = () => {

- $ + INR {product.price}