Skip to content

Commit c428754

Browse files
author
followDev
committed
WIP typescript for components
1 parent 0dbbc62 commit c428754

File tree

10 files changed

+168
-166
lines changed

10 files changed

+168
-166
lines changed

‎components/product-item/index.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,9 @@ import { some } from 'lodash';
33
import { useDispatch, useSelector } from 'react-redux';
44
import { toggleFavProduct } from './../../store/actions/userActions';
55
import { RootState } from 'store';
6+
import { ProductType } from 'types';
67

7-
type ProductItemProps = {
8-
discount: string;
9-
productImage: string;
10-
id: string;
11-
name: string;
12-
price: string;
13-
currentPrice: string;
14-
}
15-
16-
const ProductItem = ({ discount, productImage, id, name, price, currentPrice }: ProductItemProps) => {
8+
const ProductItem = ({ discount, images, id, name, price, currentPrice }: ProductType) => {
179
const dispatch = useDispatch();
1810
const { favProducts } = useSelector((state: RootState) => state.user);
1911

@@ -34,7 +26,7 @@ const ProductItem = ({ discount, productImage, id, name, price, currentPrice }:
3426

3527
<Link href={`/product/${id}`}>
3628
<a>
37-
<img src={productImage} alt="product" />
29+
<img src={images[0]} alt="product" />
3830
{discount &&
3931
<span className="product__discount">{discount}%</span>
4032
}

components/products-featured/carousel/index.js renamed to components/products-featured/carousel/index.tsx

Lines changed: 60 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,61 @@
1-
import ProductItem from './../../product-item';
2-
3-
// import Swiper core and required components
4-
import { Swiper, SwiperSlide } from 'swiper/react';
5-
6-
let slidesPerView = 1.3;
7-
let centeredSlides = true;
8-
let spaceBetween = 30;
9-
if (process.browser) {
10-
if(window.innerWidth > 768) {
11-
slidesPerView = 3;
12-
spaceBetween = 35;
13-
centeredSlides = false;
14-
}
15-
if(window.innerWidth > 1024) {
16-
slidesPerView = 4;
17-
spaceBetween = 65;
18-
centeredSlides = false;
19-
}
20-
}
21-
22-
const ProductsCarousel = ({ products }) => {
23-
if (!products) return 'Loading';
24-
25-
return (
26-
<div className="products-carousel">
27-
<Swiper
28-
spaceBetween={spaceBetween}
29-
loop={true}
30-
centeredSlides={centeredSlides}
31-
watchOverflow={true}
32-
slidesPerView={slidesPerView}
33-
className="swiper-wrapper">
34-
{products.map(item => (
35-
<SwiperSlide key={item.id}>
36-
<ProductItem
37-
discount={item.discount}
38-
price={item.price}
39-
currentPrice={item.currentPrice}
40-
key={item.id}
41-
id={item.id}
42-
productImage={item.images[0]}
43-
name={item.name}
44-
/>
45-
</SwiperSlide>
46-
))}
47-
</Swiper>
48-
</div>
49-
)
50-
}
51-
1+
import ProductItem from './../../product-item';
2+
import { ProductType } from 'types';
3+
4+
// import Swiper core and required components
5+
import { Swiper, SwiperSlide } from 'swiper/react';
6+
7+
let slidesPerView = 1.3;
8+
let centeredSlides = true;
9+
let spaceBetween = 30;
10+
if (process.browser) {
11+
if(window.innerWidth > 768) {
12+
slidesPerView = 3;
13+
spaceBetween = 35;
14+
centeredSlides = false;
15+
}
16+
if(window.innerWidth > 1024) {
17+
slidesPerView = 4;
18+
spaceBetween = 65;
19+
centeredSlides = false;
20+
}
21+
}
22+
23+
type ProductsCarouselType = {
24+
products: ProductType[]
25+
}
26+
27+
const ProductsCarousel = ({ products }: ProductsCarouselType) => {
28+
if (!products) return 'Loading';
29+
30+
return (
31+
<div className="products-carousel">
32+
<Swiper
33+
spaceBetween={spaceBetween}
34+
loop={true}
35+
centeredSlides={centeredSlides}
36+
watchOverflow={true}
37+
slidesPerView={slidesPerView}
38+
className="swiper-wrapper">
39+
{products.map(item => (
40+
<SwiperSlide key={item.id}>
41+
<ProductItem
42+
id={item.id}
43+
name={item.name}
44+
thumb={item.thumb}
45+
price={item.price}
46+
color={item.color}
47+
count={item.count}
48+
size={item.size}
49+
discount={item.discount}
50+
currentPrice={item.currentPrice}
51+
key={item.id}
52+
images={item.images}
53+
/>
54+
</SwiperSlide>
55+
))}
56+
</Swiper>
57+
</div>
58+
)
59+
}
60+
5261
export default ProductsCarousel

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
import ProductsCarousel from './carousel';
2-
import useSwr from 'swr';
3-
4-
const ProductsFeatured = () => {
5-
const fetcher = (url) => fetch(url).then((res) => res.json());
6-
const { data } = useSwr('/api/products', fetcher);
7-
8-
return (
9-
<section className="section section-products-featured">
10-
<div className="container">
11-
<header className="section-products-featured__header">
12-
<h3>Selected just for you</h3>
13-
<a href="/products" className="btn btn--rounded btn--border">Show All</a>
14-
</header>
15-
16-
<ProductsCarousel products={data} />
17-
</div>
18-
</section>
19-
)
20-
};
21-
1+
import ProductsCarousel from './carousel';
2+
import useSwr from 'swr';
3+
4+
const ProductsFeatured = () => {
5+
const fetcher = (url: string) => fetch(url).then((res) => res.json());
6+
const { data } = useSwr('/api/products', fetcher);
7+
8+
return (
9+
<section className="section section-products-featured">
10+
<div className="container">
11+
<header className="section-products-featured__header">
12+
<h3>Selected just for you</h3>
13+
<a href="/products" className="btn btn--rounded btn--border">Show All</a>
14+
</header>
15+
16+
<ProductsCarousel products={data} />
17+
</div>
18+
</section>
19+
)
20+
};
21+
2222
export default ProductsFeatured

components/products-filter/form-builder/checkbox-color/index.js renamed to components/products-filter/form-builder/checkbox-color/index.tsx

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
const CheckboxColor = ({ color, name, type, onChange, valueName }) => {
2-
const onSelect = (e) => {
3-
onChange(e.target.getAttribute('data-name'));
4-
}
5-
6-
return (
7-
<label htmlFor={color+'-'+name} className={`checkbox-color`}>
8-
<input onChange={onSelect} value={color} data-name={valueName} name={name} type={type} id={color+'-'+name} />
9-
<span className="checkbox__check">
10-
<span className="checkbox__color" style={{backgroundColor: color}}></span>
11-
</span>
12-
</label>
13-
)
14-
};
15-
16-
CheckboxColor.defaultProps = {
17-
type: 'checkbox',
18-
};
19-
1+
type CheckboxColorType = {
2+
type?: string;
3+
name: string;
4+
color: string;
5+
valueName: string;
6+
onChange?: (value: string) => void;
7+
}
8+
9+
const CheckboxColor = ({ color, name, type = 'checkbox', onChange, valueName }: CheckboxColorType) => {
10+
const onSelect = (e: any) => {
11+
if(onChange) {
12+
onChange(e.target.getAttribute('data-name'));
13+
}
14+
}
15+
16+
return (
17+
<label htmlFor={color+'-'+name} className={`checkbox-color`}>
18+
<input onChange={onSelect} value={color} data-name={valueName} name={name} type={type} id={color+'-'+name} />
19+
<span className="checkbox__check">
20+
<span className="checkbox__color" style={{backgroundColor: color}}></span>
21+
</span>
22+
</label>
23+
)
24+
};
25+
2026
export default CheckboxColor;

components/products-filter/form-builder/checkbox/index.js renamed to components/products-filter/form-builder/checkbox/index.tsx

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1-
const Checkbox = ({ type, label, name, onChange }) => (
2-
<label htmlFor={label+'-'+name} className={`checkbox ${type ? 'checkbox--'+type : ''}`}>
3-
<input name={name} onChange={onChange} type="checkbox" id={label+'-'+name} />
4-
<span className="checkbox__check"></span>
5-
<p>{label}</p>
6-
</label>
7-
);
8-
1+
type CheckboxType = {
2+
type?: string;
3+
label: string;
4+
name: string;
5+
onChange?: () => void;
6+
}
7+
8+
const Checkbox = ({ type = 'square', label, name, onChange }: CheckboxType) => (
9+
<label htmlFor={label+'-'+name} className={`checkbox ${type ? 'checkbox--'+type : ''}`}>
10+
<input name={name} onChange={onChange} type="checkbox" id={label+'-'+name} />
11+
<span className="checkbox__check"></span>
12+
<p>{label}</p>
13+
</label>
14+
);
15+
916
export default Checkbox;

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

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import { useState } from 'react';
2-
import { useRouter } from 'next/router';
32
import Checkbox from './form-builder/checkbox';
43
import CheckboxColor from './form-builder/checkbox-color';
54
import Slider from 'rc-slider';
6-
import Tooltip from 'rc-tooltip';
7-
import { useForm } from "react-hook-form";
85

96
// data
107
import productsTypes from './../../utils/data/products-types';
@@ -13,25 +10,8 @@ import productsSizes from './../../utils/data/products-sizes';
1310

1411
const { createSliderWithTooltip } = Slider;
1512
const Range = createSliderWithTooltip(Slider.Range);
16-
const { Handle } = Slider;
17-
18-
const handle = props => {
19-
const { value, dragging, index, ...restProps } = props;
20-
return (
21-
<Tooltip
22-
prefixCls="rc-slider-tooltip"
23-
overlay={value}
24-
visible={dragging}
25-
placement="top"
26-
key={index}
27-
>
28-
<Handle value={value} {...restProps} />
29-
</Tooltip>
30-
);
31-
};
3213

3314
const ProductsFilter = () => {
34-
const router = useRouter();
3515
const [filtersOpen, setFiltersOpen] = useState(false);
3616

3717
const addQueryParams = () => {
@@ -85,7 +65,7 @@ const ProductsFilter = () => {
8565
<div className="products-filter__block__content">
8666
<div className="checkbox-color-wrapper">
8767
{productsColors.map(type => (
88-
<CheckboxColor key={type.id} name="product-color" color={type.color} />
68+
<CheckboxColor key={type.id} valueName={type.color} name="product-color" color={type.color} />
8969
))}
9070
</div>
9171
</div>

‎components/shopping-cart/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { useSelector } from 'react-redux';
22
import CheckoutStatus from '../../components/checkout-status';
33
import Item from './item';
4+
import { RootState } from 'store';
45

56
const ShoppingCart = () => {
6-
const { cartItems } = useSelector(state => state.cart);
7+
const { cartItems } = useSelector((state: RootState) => state.cart);
78

8-
const priceTotal = useSelector(state => {
9-
const cartItems = state.cart.cartItems;
9+
const priceTotal = () => {
1010
let totalPrice = 0;
1111
if(cartItems.length > 0) {
1212
cartItems.map(item => totalPrice += item.price * item.count);
1313
}
1414

1515
return totalPrice;
16-
})
16+
}
1717

1818
return (
1919
<section className="cart">
@@ -62,7 +62,7 @@ const ShoppingCart = () => {
6262
<input type="text" placeholder="Promo Code" className="cart__promo-code" />
6363

6464
<div className="cart-actions__items-wrapper">
65-
<p className="cart-actions__total">Total cost <strong>${priceTotal.toFixed(2)}</strong></p>
65+
<p className="cart-actions__total">Total cost <strong>${priceTotal().toFixed(2)}</strong></p>
6666
<a href="/cart/checkout" className="btn btn--rounded btn--yellow">Checkout</a>
6767
</div>
6868
</div>

‎components/shopping-cart/item/index.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,38 @@
11
import { useDispatch } from 'react-redux';
22
import { removeProduct, setCount } from 'store/reducers/cart';
3+
import { ProductStoreType } from 'types';
34

4-
const ShoppingCart = ({ thumb, name, id, color, size, count, price }) => {
5+
const ShoppingCart = ({ thumb, name, id, color, size, count, price }: ProductStoreType) => {
56
const dispatch = useDispatch();
67

78
const removeFromCart = () => {
89
dispatch(removeProduct(
910
{
10-
id: id,
11-
color: color,
12-
size: size
11+
thumb,
12+
name,
13+
id,
14+
color,
15+
size,
16+
count,
17+
price
1318
}
1419
))
1520
}
1621

17-
const setProductCount = (count) => {
22+
const setProductCount = (count: number) => {
1823
if(count <= 0) {
19-
return false;
24+
return;
2025
}
2126

2227
const payload = {
2328
product: {
24-
id: id,
25-
color: color,
26-
size: size,
27-
count: count,
29+
thumb,
30+
name,
31+
id,
32+
color,
33+
size,
34+
count,
35+
price
2836
},
2937
count,
3038
}

0 commit comments

Comments
 (0)