Skip to content

Commit eb2deee

Browse files
jhanke00jhanke00
authored
Merge pull request #32 from bishnoimukesh/dev
Product details page
2 parents e94de1e + f2afa12 commit eb2deee

File tree

5 files changed

+109
-77
lines changed

5 files changed

+109
-77
lines changed

‎app/products/[productId]/page.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import largeData from '@/src/mock/large/products.json';
2+
import smallData from '@/src/mock/small/products.json';
3+
4+
const productDetail = ({ params }: { params: { productId: string } }) => {
5+
const data = [...largeData, ...smallData];
6+
const product = data.find((item) => item.id === params.productId);
7+
if (!product) {
8+
return <p>Product not Found</p>;
9+
}
10+
11+
return (
12+
<div className='flex min-h-screen flex-col p-24'>
13+
<h1 className='text-2xl font-semibold'>Product Description</h1>
14+
<h3 className={`mb-3 text-xl `}>{product.name}</h3>
15+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Price: {product.price}</p>
16+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Description: {product.description}</p>
17+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Category: {product.category}</p>
18+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Rating: {product.rating}</p>
19+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Reviews: {product.numReviews}</p>
20+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Stock: {product.countInStock}</p>
21+
</div>
22+
);
23+
};
24+
25+
export default productDetail;

‎app/products/page.tsx

+47-61
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,65 @@
1-
import type { Product } from '@type/products';
1+
'use client';
2+
import largeData from '@/src/mock/large/products.json';
3+
import smallData from '@/src/mock/small/products.json';
4+
import { useState, useEffect } from 'react';
5+
import Link from 'next/link';
6+
7+
const PAGE_SIZE = 20;
28

39
export default function Products() {
4-
const products: Array<Product> = [
5-
{
6-
id: 1,
7-
name: 'Product 1',
8-
price: 100,
9-
description: 'This is a product',
10-
category: 'Category 1',
11-
rating: 4.5,
12-
numReviews: 10,
13-
countInStock: 6,
14-
},
15-
{
16-
id: 2,
17-
name: 'Product 2',
18-
price: 200,
19-
description: 'This is a product',
20-
category: 'Category 2',
21-
rating: 4.0,
22-
numReviews: 10,
23-
countInStock: 6,
24-
},
25-
{
26-
id: 3,
27-
name: 'Product 3',
28-
price: 300,
29-
description: 'This is a product',
30-
category: 'Category 3',
31-
rating: 3.5,
32-
numReviews: 10,
33-
countInStock: 6,
34-
},
35-
{
36-
id: 4,
37-
name: 'Product 4',
38-
price: 400,
39-
description: 'This is a product',
40-
category: 'Category 4',
41-
rating: 3.0,
42-
numReviews: 10,
43-
countInStock: 6,
44-
},
45-
{
46-
id: 5,
47-
name: 'Product 5',
48-
price: 500,
49-
description: 'This is a product',
50-
category: 'Category 5',
51-
rating: 2.5,
52-
numReviews: 10,
53-
countInStock: 6,
54-
},
55-
];
10+
const [currentPage, setCurrentPage] = useState(1);
11+
const data = [...largeData, ...smallData];
12+
const startIndex = (currentPage - 1) * PAGE_SIZE;
13+
const endIndex = startIndex + PAGE_SIZE;
14+
const productData = data.slice(startIndex, endIndex);
15+
const totalPages = Math.ceil(data.length / PAGE_SIZE);
16+
17+
const nextPage = () => {
18+
setCurrentPage(currentPage + 1);
19+
};
20+
21+
const prevPage = () => {
22+
setCurrentPage(currentPage - 1);
23+
};
24+
25+
useEffect(() => {
26+
window.scrollTo(0, 0);
27+
}, [currentPage]);
5628

5729
return (
5830
<main className='flex min-h-screen flex-col items-center p-24'>
5931
<div className='z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex'>
6032
<div className='grid lg:max-w-5xl lg:w-full lg:grid-cols-2 lg:text-left'>
61-
{products.map((product) => (
33+
{productData.map((product) => (
6234
<div
6335
key={product.id}
6436
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
6537
>
66-
<h3 className={`mb-3 text-2xl font-semibold`}>{product.name}</h3>
67-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Price: {product.price}</p>
68-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Description: {product.description}</p>
69-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Category: {product.category}</p>
70-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Rating: {product.rating}</p>
71-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Reviews: {product.numReviews}</p>
72-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Stock: {product.countInStock}</p>
38+
<Link href={`/products/${product.id}`}>
39+
<h3 className={`mb-3 text-2xl font-semibold`}>{product.name}</h3>
40+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Price: {product.price}</p>
41+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Description: {product.description}</p>
42+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Category: {product.category}</p>
43+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Rating: {product.rating}</p>
44+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Reviews: {product.numReviews}</p>
45+
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Stock: {product.countInStock}</p>
46+
</Link>
7347
</div>
7448
))}
7549
</div>
7650
</div>
51+
52+
<div className='flex justify-around w-full border-t-2 pt-4'>
53+
<button onClick={prevPage} disabled={currentPage === 1}>
54+
Previous
55+
</button>
56+
<span>
57+
Page {currentPage} of {totalPages}
58+
</span>
59+
<button onClick={nextPage} disabled={currentPage === totalPages}>
60+
Next
61+
</button>
62+
</div>
7763
</main>
7864
);
7965
}

‎docs/frontend/index.md

+21
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,24 @@
11
# Frontend
22

33
Documentation on any Frontend capabilities or changes made.
4+
5+
# Prodcuts Listing Page
6+
7+
- Displaying All Products from Mock Data:
8+
We have implemented a feature that enables the display of all products available in our mock data. Users can now easily browse through the entire product catalog, providing them with a comprehensive view of our offerings.
9+
10+
- Pagination for Improved Navigation:
11+
To enhance user experience and prevent issues associated with infinite scrolling, we have introduced pagination functionality. Users can now navigate through the product list more efficiently by moving between different pages, allowing for smoother and more organized browsing.
12+
13+
# Prodcuts Detail Single Page
14+
15+
- Single Page Description for Products:
16+
We have introduced a feature that offers detailed product descriptions on a single page. Users can now access comprehensive information about each product, including specifications, pricing, and additional details, all in one centralized location. This enhancement aims to provide users with a better understanding of our products, facilitating informed decision-making during their shopping experience.
17+
18+
## Folder Structure
19+
20+
- `app/products/layout.tsx` - Product page layout
21+
- `app/products/page.tsx` - Product Main Page
22+
- `app/products/[productId]/page.tsx` - Page for the single page description
23+
- `src/mock/small/products-new.json` - Mock JSON for Prodcut list
24+
- `src/mock/large/products-new.json` - Mock JSON for Prodcut list

‎src/type/orders/index.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export type Item = {
2-
id: string;
3-
name: string;
4-
price: number;
5-
count: number;
6-
}
2+
id: string;
3+
name: string;
4+
price: number;
5+
count: number;
6+
};
77

88
export type Order = {
9-
user: string;
10-
items: Array<Item>,
11-
total: number;
12-
time: Date;
13-
};
9+
user: string;
10+
items: Array<Item>;
11+
total: number;
12+
time: Date;
13+
};

‎src/type/users/index.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export type User = {
2-
id: number;
3-
firstName: string;
4-
lastName: string;
5-
phoneNumber: string;
6-
email: string;
7-
};
2+
id: number;
3+
firstName: string;
4+
lastName: string;
5+
phoneNumber: string;
6+
email: string;
7+
};

0 commit comments

Comments
 (0)