-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding routes, cart and bussines logic on components
- Loading branch information
1 parent
f3e4734
commit 5c513fe
Showing
23 changed files
with
397 additions
and
212 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,37 @@ | ||
| import React from 'react' | ||
| import { useSelector } from 'react-redux' | ||
| import * as S from './styles' | ||
| import React, { useEffect } from 'react'; | ||
| import { useSelector, useDispatch } from 'react-redux'; | ||
| import * as S from './styles'; | ||
|
|
||
| import { getAllCards } from '../../store/fetchActions'; | ||
| import { addItem } from '../../store/cart'; | ||
|
|
||
| const Card = () => { | ||
|
|
||
| const cardShoes = useSelector(state => state.card) | ||
|
|
||
| const cardShoes = useSelector((state) => state.card); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| useEffect(() => { | ||
| dispatch(getAllCards()); | ||
| }, [dispatch]); | ||
|
|
||
| const addItemCart = (card) => { | ||
| dispatch(addItem(card)); | ||
| }; | ||
|
|
||
| return ( | ||
| <S.BgCard> | ||
| { | ||
| cardShoes.map((card, index) => ( | ||
| <S.Card key={index}> | ||
| <S.ImgCardProduct src={card.url} title="" alt="" /> | ||
| <S.TitleCardProduct>{card.name}</S.TitleCardProduct> | ||
| <S.DescCardProduct>{card.description}</S.DescCardProduct> | ||
| <S.PriceCardProduct>{card.price}</S.PriceCardProduct> | ||
| <S.Payment> | ||
| <S.Button as="a" href="/"> Add to cart </S.Button> | ||
| </S.Payment> | ||
| </S.Card> | ||
| )) | ||
| } | ||
| {cardShoes.map((card, index) => ( | ||
| <S.Card key={index}> | ||
| <S.ImgCardProduct src={card.url} title="" alt="" /> | ||
| <S.TitleCardProduct>{card.name}</S.TitleCardProduct> | ||
| <S.DescCardProduct>{card.description}</S.DescCardProduct> | ||
| <S.PriceCardProduct>R$ {card.price}</S.PriceCardProduct> | ||
| <S.Payment> | ||
| <S.Button onClick={() => addItemCart(card)}> Add to cart </S.Button> | ||
| </S.Payment> | ||
| </S.Card> | ||
| ))} | ||
| </S.BgCard> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default Card | ||
| export default Card; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,49 @@ | ||
| import React from 'react' | ||
| import { Link } from 'react-router-dom' | ||
| import * as S from './styles' | ||
| import React from 'react'; | ||
| import { NavLink } from 'react-router-dom'; | ||
| import { useSelector } from 'react-redux'; | ||
| import * as S from './styles'; | ||
|
|
||
| const Layout = ({ children }) => { | ||
| const length = useSelector((state) => state.cart.length); | ||
|
|
||
| return ( | ||
| <S.BgContainer> | ||
| <S.BgHeader> | ||
| <S.SectionLeft> | ||
| <S.Title> | ||
| <Link to="/" className="links"> | ||
| Shoe Store | ||
| </Link> | ||
| <NavLink to="/" className="links"> | ||
| Product Store | ||
| </NavLink> | ||
| </S.Title> | ||
| <S.Nav> | ||
| <S.Ul> | ||
| <S.A> | ||
| <S.A> | ||
| <S.Li> | ||
| <Link to="/about" className="links"> | ||
| <NavLink to="/about" className="links"> | ||
| About | ||
| </Link> | ||
| </NavLink> | ||
| </S.Li> | ||
| </S.A> | ||
| <S.A> | ||
| <S.A> | ||
| <S.Li> | ||
| <Link to="/register-product" className="links"> | ||
| <NavLink to="/register-product" className="links"> | ||
| Register Product | ||
| </Link> | ||
| </NavLink> | ||
| </S.Li> | ||
| </S.A> | ||
| </S.Ul> | ||
| </S.Nav> | ||
| </S.SectionLeft> | ||
| <S.SectionRight> | ||
| <S.Logout>Logout</S.Logout> | ||
| <S.Cart> Cart </S.Cart> | ||
| <NavLink to="/cart-product" className="links"> | ||
| <S.Cart> {length} </S.Cart> | ||
| </NavLink> | ||
| </S.SectionRight> | ||
| </S.BgHeader> | ||
| { children } | ||
| {children} | ||
| </S.BgContainer> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default Layout | ||
| export default Layout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,11 @@ | ||
| import React from 'react' | ||
| import * as S from './styles' | ||
| import { useSelector } from 'react-redux' | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import * as S from './styles'; | ||
|
|
||
| const Message = () => { | ||
|
|
||
| const isShow = useSelector(state => state.message.showMessage) | ||
| const isShow = useSelector((state) => state.message.showMessage); | ||
|
|
||
| return ( | ||
| <> | ||
| { | ||
| isShow && ( | ||
| <S.BoxMessage> | ||
| Cadastro com Sucesso! | ||
| </S.BoxMessage> | ||
| ) | ||
| } | ||
| </> | ||
| ) | ||
| } | ||
| return <>{isShow && <S.BoxMessage>Cadastro com Sucesso!</S.BoxMessage>}</>; | ||
| }; | ||
|
|
||
| export default Message | ||
| export default Message; |
Oops, something went wrong.