Skip to content

Commit 087d6e7

Browse files
author
followDev
committed
WIP typescript in redux files
1 parent 4ec2c16 commit 087d6e7

File tree

20 files changed

+503
-438
lines changed

20 files changed

+503
-438
lines changed

‎README.md

+33-29
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
1-
# Next.js Ecommerce
2-
3-
This repo contains a work in progress Ecommerce responsive made with Next.js, Redux, Redux-persist, Hooks, SCSS and BEM. If you like it please give it a star :)
4-
## Design
5-
6-
[This](https://www.xdguru.com/free-xd-ecommerce-ui-kit-by-iceo/) is the design of the project.
7-
8-
## Available pages
9-
10-
- Home page: /
11-
- Products page: /products
12-
- Product single page: /product/1
13-
- Cart page: /cart
14-
- Login page: /login
15-
- Register page: /register
16-
- 404 page: /page-not-found
17-
18-
## Screenshots
19-
20-
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-1.jpg)
21-
22-
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-2.jpg)
23-
24-
## Next TO-DO
25-
26-
- [ ] Checkout page
27-
- [ ] Add Facebook login
28-
- [ ] Add Google login
29-
- [ ] Add Proptypes on components
1+
# Updates!
2+
3+
This new version contains an integration with redux-toolkit instead of redux and it's witch Typescript :)
4+
5+
# Next.js Ecommerce
6+
7+
This repo contains a work in progress Ecommerce responsive made with Next.js, Redux, Redux-persist, Hooks, SCSS and BEM. If you like it please give it a star :)
8+
## Design
9+
10+
[This](https://www.xdguru.com/free-xd-ecommerce-ui-kit-by-iceo/) is the design of the project.
11+
12+
## Available pages
13+
14+
- Home page: /
15+
- Products page: /products
16+
- Product single page: /product/1
17+
- Cart page: /cart
18+
- Login page: /login
19+
- Register page: /register
20+
- 404 page: /page-not-found
21+
22+
## Screenshots
23+
24+
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-1.jpg)
25+
26+
![Next Ecommerce screenshot](https://lucaspulliese.com/wp-content/uploads/2020/09/ecommerce-2.jpg)
27+
28+
## Next TO-DO
29+
30+
- [X] Checkout page
31+
- [ ] Add Facebook login
32+
- [ ] Add Google login
33+
- [ ] Add Proptypes on components
3034
- [ ] Use CSS variables instead of static colors

‎components/breadcrumb/index.js renamed to ‎components/breadcrumb/index.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
const Breadcrumb = () => (
2-
<section className="breadcrumb">
3-
<div className="container">
4-
<ul className="breadcrumb-list">
5-
<li><a href="#"><i className="icon-home"></i></a></li>
6-
<li>All Products</li>
7-
</ul>
8-
</div>
9-
</section>
10-
);
11-
12-
1+
const Breadcrumb = () => (
2+
<section className="breadcrumb">
3+
<div className="container">
4+
<ul className="breadcrumb-list">
5+
<li><a href="#"><i className="icon-home"></i></a></li>
6+
<li>All Products</li>
7+
</ul>
8+
</div>
9+
</section>
10+
);
11+
12+
1313
export default Breadcrumb

‎components/checkout/items/index.js renamed to ‎components/checkout/items/index.jsx

+27-27
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import { useSelector } from 'react-redux';
2-
3-
const CheckoutItems = () => {
4-
const { cartItems } = useSelector(state => state.cart);
5-
6-
return (
7-
<ul className="checkout-items">
8-
{cartItems.map(item => (
9-
<li className="checkout-item">
10-
<div className="checkout-item__content">
11-
<div className="checkout-item__img">
12-
<img src={item.thumb} />
13-
</div>
14-
15-
<div className="checkout-item__data">
16-
<h3>{item.name}</h3>
17-
<span>#{item.id}</span>
18-
</div>
19-
</div>
20-
<h3>${item.price}</h3>
21-
</li>
22-
))}
23-
</ul>
24-
)
25-
};
26-
27-
1+
import { useSelector } from 'react-redux';
2+
3+
const CheckoutItems = () => {
4+
const { cartItems } = useSelector(state => state.cart);
5+
6+
return (
7+
<ul className="checkout-items">
8+
{cartItems.map(item => (
9+
<li className="checkout-item">
10+
<div className="checkout-item__content">
11+
<div className="checkout-item__img">
12+
<img src={item.thumb} />
13+
</div>
14+
15+
<div className="checkout-item__data">
16+
<h3>{item.name}</h3>
17+
<span>#{item.id}</span>
18+
</div>
19+
</div>
20+
<h3>${item.price}</h3>
21+
</li>
22+
))}
23+
</ul>
24+
)
25+
};
26+
27+
2828
export default CheckoutItems

‎components/Header/index.js renamed to ‎components/header/index.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import Logo from '../../assets/icons/logo';
55
import Link from 'next/link';
66
import { useRouter } from 'next/router';
77

8-
const Header = ({ isErrorPage }) => {
8+
type HeaderType = {
9+
isErrorPage?: Boolean;
10+
}
11+
12+
const Header = ({ isErrorPage }: HeaderType) => {
913
const router = useRouter();
1014
const { cartItems } = useSelector(state => state.cart);
1115
const arrayPaths = ['/'];

‎components/page-intro/index.js renamed to ‎components/page-intro/index.tsx

+66-66
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,67 @@
1-
import { Swiper, SwiperSlide } from 'swiper/react';
2-
import SwiperCore, {EffectFade, Navigation} from 'swiper';
3-
4-
SwiperCore.use([EffectFade, Navigation]);
5-
6-
const PageIntro = () => {
7-
8-
return (
9-
<section className="page-intro">
10-
<Swiper navigation effect="fade" className="swiper-wrapper">
11-
<SwiperSlide>
12-
<div className="page-intro__slide" style={{ backgroundImage: "url('/images/slide-1.jpg')" }}>
13-
<div className="container">
14-
<div className="page-intro__slide__content">
15-
<h2>Sale of the summer collection</h2>
16-
<a href="#" className="btn-shop"><i className="icon-right"></i>Shop now</a>
17-
</div>
18-
</div>
19-
</div>
20-
</SwiperSlide>
21-
22-
<SwiperSlide>
23-
<div className="page-intro__slide" style={{ backgroundImage: "url('/images/slide-2.jpg')" }}>
24-
<div className="container">
25-
<div className="page-intro__slide__content">
26-
<h2>Make your house into a home</h2>
27-
<a href="#" className="btn-shop"><i className="icon-right"></i>Shop now</a>
28-
</div>
29-
</div>
30-
</div>
31-
</SwiperSlide>
32-
</Swiper>
33-
34-
<div className="shop-data">
35-
<div className="container">
36-
<ul className="shop-data__items">
37-
<li>
38-
<i className="icon-shipping"></i>
39-
<div className="data-item__content">
40-
<h4>Free Shipping</h4>
41-
<p>On purchases over $199</p>
42-
</div>
43-
</li>
44-
45-
<li>
46-
<i className="icon-shipping"></i>
47-
<div className="data-item__content">
48-
<h4>99% Satisfied Customers</h4>
49-
<p>Our clients' opinions speak for themselves</p>
50-
</div>
51-
</li>
52-
53-
<li>
54-
<i className="icon-cash"></i>
55-
<div className="data-item__content">
56-
<h4>Originality Guaranteed</h4>
57-
<p>30 days warranty for each product from our store</p>
58-
</div>
59-
</li>
60-
</ul>
61-
</div>
62-
</div>
63-
</section>
64-
)
65-
};
66-
1+
import { Swiper, SwiperSlide } from 'swiper/react';
2+
import SwiperCore, {EffectFade, Navigation} from 'swiper';
3+
4+
SwiperCore.use([EffectFade, Navigation]);
5+
6+
const PageIntro = () => {
7+
8+
return (
9+
<section className="page-intro">
10+
<Swiper navigation effect="fade" className="swiper-wrapper">
11+
<SwiperSlide>
12+
<div className="page-intro__slide" style={{ backgroundImage: "url('/images/slide-1.jpg')" }}>
13+
<div className="container">
14+
<div className="page-intro__slide__content">
15+
<h2>Sale of the summer collection</h2>
16+
<a href="#" className="btn-shop"><i className="icon-right"></i>Shop now</a>
17+
</div>
18+
</div>
19+
</div>
20+
</SwiperSlide>
21+
22+
<SwiperSlide>
23+
<div className="page-intro__slide" style={{ backgroundImage: "url('/images/slide-2.jpg')" }}>
24+
<div className="container">
25+
<div className="page-intro__slide__content">
26+
<h2>Make your house into a home</h2>
27+
<a href="#" className="btn-shop"><i className="icon-right"></i>Shop now</a>
28+
</div>
29+
</div>
30+
</div>
31+
</SwiperSlide>
32+
</Swiper>
33+
34+
<div className="shop-data">
35+
<div className="container">
36+
<ul className="shop-data__items">
37+
<li>
38+
<i className="icon-shipping"></i>
39+
<div className="data-item__content">
40+
<h4>Free Shipping</h4>
41+
<p>On purchases over $199</p>
42+
</div>
43+
</li>
44+
45+
<li>
46+
<i className="icon-shipping"></i>
47+
<div className="data-item__content">
48+
<h4>99% Satisfied Customers</h4>
49+
<p>Our clients' opinions speak for themselves</p>
50+
</div>
51+
</li>
52+
53+
<li>
54+
<i className="icon-cash"></i>
55+
<div className="data-item__content">
56+
<h4>Originality Guaranteed</h4>
57+
<p>30 days warranty for each product from our store</p>
58+
</div>
59+
</li>
60+
</ul>
61+
</div>
62+
</div>
63+
</section>
64+
)
65+
};
66+
6767
export default PageIntro

‎components/product-item/index.js renamed to ‎components/product-item/index.tsx

File renamed without changes.

‎layouts/404.js renamed to ‎layouts/404.tsx

+26-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
1-
import Head from 'next/head';
2-
import Header from '../components/Header';
3-
import { useRouter } from 'next/router';
4-
5-
export default ({ children, title = 'Next.js Ecommerce' }) => {
6-
const router = useRouter();
7-
const pathname = router.pathname;
8-
9-
return (
10-
<div className="app-main">
11-
<Head>
12-
<title>Page not found &mdash; { title }</title>
13-
</Head>
14-
15-
<Header isErrorPage />
16-
17-
<main className={(pathname !== '/' ? 'main-page' : '')}>
18-
{ children }
19-
</main>
20-
</div>
21-
)
1+
import Head from 'next/head';
2+
import Header from '../components/Header';
3+
import { useRouter } from 'next/router';
4+
5+
type LayoutType = {
6+
title: string;
7+
children?: React.ReactNode;
8+
}
9+
10+
export default ({ children, title = 'Next.js Ecommerce' }: LayoutType) => {
11+
const router = useRouter();
12+
const pathname = router.pathname;
13+
14+
return (
15+
<div className="app-main">
16+
<Head>
17+
<title>Page not found &mdash; { title }</title>
18+
</Head>
19+
20+
<Header isErrorPage />
21+
22+
<main className={(pathname !== '/' ? 'main-page' : '')}>
23+
{ children }
24+
</main>
25+
</div>
26+
)
2227
}

‎layouts/Main.js renamed to ‎layouts/Main.tsx

+26-21
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
1-
import Head from 'next/head';
2-
import Header from '../components/Header';
3-
import { useRouter } from 'next/router';
4-
5-
export default ({ children, title = 'Next.js Ecommerce' }) => {
6-
const router = useRouter();
7-
const pathname = router.pathname;
8-
9-
return (
10-
<div className="app-main">
11-
<Head>
12-
<title>{ title }</title>
13-
</Head>
14-
15-
<Header />
16-
17-
<main className={(pathname !== '/' ? 'main-page' : '')}>
18-
{ children }
19-
</main>
20-
</div>
21-
)
1+
import Head from 'next/head';
2+
import Header from '../components/Header';
3+
import { useRouter } from 'next/router';
4+
5+
type LayoutType = {
6+
title: string;
7+
children?: React.ReactNode;
8+
}
9+
10+
export default ({ children, title = 'Next.js Ecommerce' }: LayoutType) => {
11+
const router = useRouter();
12+
const pathname = router.pathname;
13+
14+
return (
15+
<div className="app-main">
16+
<Head>
17+
<title>{ title }</title>
18+
</Head>
19+
20+
<Header />
21+
22+
<main className={(pathname !== '/' ? 'main-page' : '')}>
23+
{ children }
24+
</main>
25+
</div>
26+
)
2227
}

0 commit comments

Comments
 (0)