Skip to content

Commit 2ce5bc1

Browse files
author
followDev
committed
WIP typescript: needs build corrections
1 parent c428754 commit 2ce5bc1

File tree

18 files changed

+579
-561
lines changed

18 files changed

+579
-561
lines changed

‎.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
NEXT_PUBLIC_ANALYTICS_ID=UA-114361661-6

‎components/breadcrumb/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
type BreadcrumbType = {
2-
currentPage: string;
3-
}
4-
5-
const Breadcrumb = ({ currentPage }: BreadcrumbType) => (
1+
const Breadcrumb = () => (
62
<section className="breadcrumb">
73
<div className="container">
84
<ul className="breadcrumb-list">

‎components/product-item/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const ProductItem = ({ discount, images, id, name, price, currentPrice }: Produc
2626

2727
<Link href={`/product/${id}`}>
2828
<a>
29-
<img src={images[0]} alt="product" />
29+
<img src={images ? images[0] : ''} alt="product" />
3030
{discount &&
3131
<span className="product__discount">{discount}%</span>
3232
}

components/products-content/index.js renamed to components/products-content/index.tsx

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
import { useState } from 'react';
2-
import List from './list';
3-
4-
const ProductsContent = () => {
5-
const [orderProductsOpen, setOrderProductsOpen] = useState(false);
6-
7-
return (
8-
<section className="products-content">
9-
<div className="products-content__intro">
10-
<h2>Men's Tops <span>(133)</span></h2>
11-
<button type="button" onClick={() => setOrderProductsOpen(!orderProductsOpen)} className="products-filter-btn"><i className="icon-filters"></i></button>
12-
<form className={`products-content__filter ${orderProductsOpen ? 'products-order-open' : ''}`}>
13-
<div className="products__filter__select">
14-
<h4>Show products: </h4>
15-
<div className="select-wrapper">
16-
<select>
17-
<option>Popular</option>
18-
</select>
19-
</div>
20-
</div>
21-
<div className="products__filter__select">
22-
<h4>Sort by: </h4>
23-
<div className="select-wrapper">
24-
<select>
25-
<option>Popular</option>
26-
</select>
27-
</div>
28-
</div>
29-
</form>
30-
</div>
31-
32-
<List />
33-
</section>
34-
);
35-
};
36-
37-
export default ProductsContent
1+
import { useState } from 'react';
2+
import List from './list';
3+
4+
const ProductsContent = () => {
5+
const [orderProductsOpen, setOrderProductsOpen] = useState(false);
6+
7+
return (
8+
<section className="products-content">
9+
<div className="products-content__intro">
10+
<h2>Men's Tops <span>(133)</span></h2>
11+
<button type="button" onClick={() => setOrderProductsOpen(!orderProductsOpen)} className="products-filter-btn"><i className="icon-filters"></i></button>
12+
<form className={`products-content__filter ${orderProductsOpen ? 'products-order-open' : ''}`}>
13+
<div className="products__filter__select">
14+
<h4>Show products: </h4>
15+
<div className="select-wrapper">
16+
<select>
17+
<option>Popular</option>
18+
</select>
19+
</div>
20+
</div>
21+
<div className="products__filter__select">
22+
<h4>Sort by: </h4>
23+
<div className="select-wrapper">
24+
<select>
25+
<option>Popular</option>
26+
</select>
27+
</div>
28+
</div>
29+
</form>
30+
</div>
31+
32+
<List />
33+
</section>
34+
);
35+
};
36+
37+
export default ProductsContent
3838

components/products-content/list/index.js renamed to components/products-content/list/index.tsx

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
1-
import useSwr from 'swr';
2-
import ProductItem from './../../product-item';
3-
import ProductsLoading from './loading';
4-
5-
const ProductsContent = () => {
6-
const fetcher = (url) => fetch(url).then((res) => res.json());
7-
const { data, error } = useSwr('/api/products', fetcher);
8-
9-
if (error) return <div>Failed to load users</div>;
10-
return (
11-
<>
12-
{!data &&
13-
<ProductsLoading />
14-
}
15-
16-
{data &&
17-
<section className="products-list">
18-
{data.map(item => (
19-
<ProductItem
20-
discount={item.discount}
21-
key={item.id}
22-
id={item.id}
23-
price={item.price}
24-
currentPrice={item.currentPrice}
25-
productImage={item.images[0]}
26-
name={item.name}
27-
/>
28-
))}
29-
</section>
30-
}
31-
</>
32-
);
33-
};
34-
1+
import useSwr from 'swr';
2+
import ProductItem from '../../product-item';
3+
import ProductsLoading from './loading';
4+
import { ProductType } from 'types';
5+
6+
const ProductsContent = () => {
7+
const fetcher = (url: string) => fetch(url).then((res) => res.json());
8+
const { data, error } = useSwr('/api/products', fetcher);
9+
10+
if (error) return <div>Failed to load users</div>;
11+
return (
12+
<>
13+
{!data &&
14+
<ProductsLoading />
15+
}
16+
17+
{data &&
18+
<section className="products-list">
19+
{data.map((item: ProductType) => (
20+
<ProductItem
21+
id={item.id}
22+
name={item.name}
23+
thumb={item.thumb}
24+
price={item.price}
25+
color={item.color}
26+
count={item.count}
27+
size={item.size}
28+
discount={item.discount}
29+
currentPrice={item.currentPrice}
30+
key={item.id}
31+
images={item.images}
32+
/>
33+
))}
34+
</section>
35+
}
36+
</>
37+
);
38+
};
39+
3540
export default ProductsContent

‎components/products-filter/form-builder/checkbox/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ type CheckboxType = {
55
onChange?: () => void;
66
}
77

8-
const Checkbox = ({ type = 'square', label, name, onChange }: CheckboxType) => (
8+
const Checkbox = ({ type = '', label, name, onChange }: CheckboxType) => (
99
<label htmlFor={label+'-'+name} className={`checkbox ${type ? 'checkbox--'+type : ''}`}>
1010
<input name={name} onChange={onChange} type="checkbox" id={label+'-'+name} />
1111
<span className="checkbox__check"></span>

‎pages/api/login.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import type { NextApiRequest, NextApiResponse } from 'next';
2+
13
// fake login
2-
export default (req, res) => {
4+
export default (req: NextApiRequest, res: NextApiResponse) => {
35
const request = req.body;
46
const email = request.email;
57
const password = request.password;

‎pages/api/product/[pid].ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import type { NextApiRequest, NextApiResponse } from 'next';
2+
13
// fake data
24
import products from '../../../utils/data/products';
35

4-
export default (req, res) => {
6+
export default (req: NextApiRequest, res: NextApiResponse) => {
57
const {
68
query: { pid },
79
} = req

‎pages/api/products.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import type { NextApiRequest, NextApiResponse } from 'next';
2+
13
// fake data
24
import products from '../../utils/data/products';
35

4-
export default (req, res) => {
6+
export default (req: NextApiRequest, res: NextApiResponse) => {
57

68
// fake loading time
79
setTimeout(() => {

‎types/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,11 @@ export type ProductStoreType = {
3333
count: number;
3434
color: string;
3535
size: string;
36+
}
37+
38+
export type GtagEventType = {
39+
action: string;
40+
category: string;
41+
label: string;
42+
value: string
3643
}

0 commit comments

Comments
 (0)