Skip to content

Commit 19e5a70

Browse files
phoenixdev0117phoenixdev0117
committed
finish basic setup of CartContext
1 parent 9587a59 commit 19e5a70

12 files changed

+486
-10
lines changed

Diff for: ‎src/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
SingleProduct,
1010
Checkout,
1111
Products,
12-
// Cart,
12+
Cart,
1313
} from './pages'
1414

1515
function App() {
@@ -24,9 +24,9 @@ function App() {
2424
<Route exact path='/about'>
2525
<About />
2626
</Route>
27-
{/* <Route exact path='/cart'>
27+
<Route exact path='/cart'>
2828
<Cart />
29-
</Route> */}
29+
</Route>
3030
<Route exact path='/products'>
3131
<Products />
3232
</Route>

Diff for: ‎src/components/AddToCart.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import styled from 'styled-components'
33
import { Link } from 'react-router-dom'
44
import { FaCheck } from 'react-icons/fa'
55
import { productDataType } from '../utils/productData'
6-
// import { useCartContext } from '../context/cart_context'
6+
import { useCartContext } from '../context/cart_context'
77
import AmountButtons from './AmountButtons'
88

99
const AddToCart: React.FC<{ singleProduct: productDataType | {} }> = ({
1010
singleProduct,
1111
}) => {
12+
const { addToCart } = useCartContext()
1213
// need the number of stock here as well after setting up in productData array
1314
const { id, colors } = { ...singleProduct }
1415

@@ -61,7 +62,11 @@ const AddToCart: React.FC<{ singleProduct: productDataType | {} }> = ({
6162
increase={increaseAmount}
6263
decrease={decreaseAmount}
6364
/>
64-
<Link to='/cart' className='btn'>
65+
<Link
66+
to='/cart'
67+
className='btn'
68+
onClick={() => addToCart(id, mainColor, amount, singleProduct)}
69+
>
6570
add to cart
6671
</Link>
6772
</div>

Diff for: ‎src/components/CartColumns.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
4+
const CartColumns = () => {
5+
return <h4>cart columns</h4>
6+
}
7+
8+
const Wrapper = styled.div`
9+
display: none;
10+
@media (min-width: 776px) {
11+
display: block;
12+
.content {
13+
display: grid;
14+
grid-template-columns: 316px 1fr 1fr 1fr auto;
15+
justify-items: center;
16+
column-gap: 1rem;
17+
h5 {
18+
color: var(--clr-grey-5);
19+
font-weight: 400;
20+
}
21+
}
22+
23+
span {
24+
width: 2rem;
25+
height: 2rem;
26+
}
27+
hr {
28+
margin-top: 1rem;
29+
margin-bottom: 3rem;
30+
}
31+
}
32+
`
33+
34+
export default CartColumns

Diff for: ‎src/components/CartContent.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { useCartContext } from '../context/cart_context'
4+
import { Link } from 'react-router-dom'
5+
import CartColumns from './CartColumns'
6+
import CartItem from './CartItem'
7+
import CartTotals from './CartTotals'
8+
9+
const CartContent = () => {
10+
const { cart, clearCart } = useCartContext()
11+
return (
12+
<Wrapper className='section section-center'>
13+
<CartColumns />
14+
{cart.map(cartItem => {
15+
return <CartItem key={cartItem.id} cartItem={cartItem} />
16+
})}
17+
<hr />
18+
<div className="link-container">
19+
<Link to='/products' className='link-btn'>
20+
continue shopping
21+
</Link>
22+
<button type='button' className='link-btn clear-btn' onClick={clearCart}>clear shopping cart</button>
23+
</div>
24+
<CartTotals />
25+
</Wrapper>
26+
)
27+
}
28+
const Wrapper = styled.section`
29+
.link-container {
30+
display: flex;
31+
justify-content: space-between;
32+
margin-top: 2rem;
33+
}
34+
.link-btn {
35+
background: transparent;
36+
border-color: transparent;
37+
text-transform: capitalize;
38+
padding: 0.25rem 0.5rem;
39+
background: var(--clr-primary-5);
40+
color: var(--clr-white);
41+
border-radius: var(--radius);
42+
letter-spacing: var(--spacing);
43+
font-weight: 400;
44+
cursor: pointer;
45+
}
46+
.clear-btn {
47+
background: var(--clr-black);
48+
}
49+
`
50+
export default CartContent

Diff for: ‎src/components/CartItem.tsx

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { formatPrice } from '../utils/helpers'
4+
import AmountButtons from './AmountButtons'
5+
import { FaTrash } from 'react-icons/fa'
6+
import { cartType, useCartContext } from '../context/cart_context'
7+
8+
const CartItem: React.FC<{cartItem: cartType}> = ({cartItem}) => {
9+
return <h4>cart item</h4>
10+
}
11+
12+
const Wrapper = styled.article`
13+
.subtotal {
14+
display: none;
15+
}
16+
.price {
17+
display: none;
18+
}
19+
display: grid;
20+
grid-template-columns: 200px auto auto;
21+
grid-template-rows: 75px;
22+
gap: 3rem 1rem;
23+
justify-items: center;
24+
margin-bottom: 3rem;
25+
align-items: center;
26+
.title {
27+
grid-template-rows: 75px;
28+
display: grid;
29+
grid-template-columns: 75px 125px;
30+
align-items: center;
31+
text-align: left;
32+
gap: 1rem;
33+
}
34+
img {
35+
width: 100%;
36+
height: 100%;
37+
display: block;
38+
border-radius: var(--radius);
39+
object-fit: cover;
40+
}
41+
h5 {
42+
font-size: 0.75rem;
43+
margin-bottom: 0;
44+
}
45+
46+
.color {
47+
color: var(--clr-grey-5);
48+
font-size: 0.75rem;
49+
letter-spacing: var(--spacing);
50+
text-transform: capitalize;
51+
margin-bottom: 0;
52+
display: flex;
53+
align-items: center;
54+
justify-content: flex-start;
55+
span {
56+
display: inline-block;
57+
width: 0.5rem;
58+
height: 0.5rem;
59+
background: red;
60+
margin-left: 0.5rem;
61+
border-radius: var(--radius);
62+
}
63+
}
64+
.price-small {
65+
color: var(--clr-primary-5);
66+
}
67+
.amount-btns {
68+
width: 75px;
69+
button {
70+
width: 1rem;
71+
height: 0.5rem;
72+
font-size: 0.75rem;
73+
}
74+
h2 {
75+
font-size: 1rem;
76+
}
77+
}
78+
.remove-btn {
79+
color: var(--clr-white);
80+
background: transparent;
81+
border: transparent;
82+
letter-spacing: var(--spacing);
83+
background: var(--clr-red-dark);
84+
width: 1.5rem;
85+
height: 1.5rem;
86+
display: flex;
87+
align-items: center;
88+
justify-content: center;
89+
border-radius: var(--radius);
90+
font-size: 0.75rem;
91+
cursor: pointer;
92+
}
93+
@media (min-width: 776px) {
94+
.subtotal {
95+
display: block;
96+
margin-bottom: 0;
97+
color: var(--clr-grey-5);
98+
font-weight: 400;
99+
font-size: 1rem;
100+
}
101+
.price-small {
102+
display: none;
103+
}
104+
.price {
105+
display: block;
106+
font-size: 1rem;
107+
color: var(--clr-primary-5);
108+
font-weight: 400;
109+
}
110+
.name {
111+
font-size: 0.85rem;
112+
}
113+
.color {
114+
font-size: 0.85rem;
115+
span {
116+
width: 0.75rem;
117+
height: 0.75rem;
118+
}
119+
}
120+
grid-template-columns: 1fr 1fr 1fr 1fr auto;
121+
align-items: center;
122+
grid-template-rows: 75px;
123+
img {
124+
height: 100%;
125+
}
126+
.title {
127+
height: 100%;
128+
display: grid;
129+
grid-template-columns: 100px 200px;
130+
align-items: center;
131+
gap: 1rem;
132+
text-align: left;
133+
}
134+
.amount-btns {
135+
width: 100px;
136+
button {
137+
width: 1.5rem;
138+
height: 1rem;
139+
font-size: 1rem;
140+
}
141+
h2 {
142+
font-size: 1.5rem;
143+
}
144+
}
145+
}
146+
`
147+
148+
export default CartItem

Diff for: ‎src/components/CartTotals.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import { useCartContext } from '../context/cart_context'
4+
// import { useUserContext } from '../context/user_context'
5+
import { formatPrice } from '../utils/helpers'
6+
import { Link } from 'react-router-dom'
7+
8+
const CartTotals = () => {
9+
return <h4>cart totals</h4>
10+
}
11+
12+
const Wrapper = styled.section`
13+
margin-top: 3rem;
14+
display: flex;
15+
justify-content: center;
16+
article {
17+
border: 1px solid var(--clr-grey-8);
18+
border-radius: var(--radius);
19+
padding: 1.5rem 3rem;
20+
}
21+
h4,
22+
h5,
23+
p {
24+
display: grid;
25+
grid-template-columns: 200px 1fr;
26+
}
27+
p {
28+
text-transform: capitalize;
29+
}
30+
h4 {
31+
margin-top: 2rem;
32+
}
33+
@media (min-width: 776px) {
34+
justify-content: flex-end;
35+
}
36+
.btn {
37+
width: 100%;
38+
margin-top: 1rem;
39+
text-align: center;
40+
font-weight: 700;
41+
}
42+
`
43+
44+
export default CartTotals

Diff for: ‎src/components/index.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ import AmountButtons from './AmountButtons'
1313
import Filters from './Filters'
1414
import ProductList from './ProductList'
1515
import Sort from './Sort'
16+
import CartContent from './CartContent'
17+
1618

1719
// import CartButtons from './CartButtons'
1820
// import Error from './Error'
1921
// import Stars from './Stars'
20-
// import CartContent from './CartContent'
2122
// import StripeCheckout from './StripeCheckout'
2223
export {
2324
Navbar,
@@ -35,10 +36,10 @@ export {
3536
Filters,
3637
ProductList,
3738
Sort,
39+
CartContent,
3840

3941
// CartButtons,
4042
// Error,
4143
// Stars,
42-
// CartContent,
4344
// StripeCheckout,
4445
}

0 commit comments

Comments
 (0)