├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── product.jpeg
    │   ├── left-arrow.png
    │   ├── logoBuysilia.png
    │   ├── productTwo.jpeg
    │   ├── logoHorizontal.png
    │   └── productThree.jpeg
    ├── global.css
    ├── Components
    │   ├── Logout
    │   │   ├── Logout.module.css
    │   │   └── Logout.js
    │   ├── Button
    │   │   ├── Button.module.css
    │   │   └── Button.js
    │   ├── Textarea
    │   │   ├── Textarea.js
    │   │   └── Textarea.module.css
    │   ├── CardProduct
    │   │   ├── CardProduct.module.css
    │   │   └── CardProduct.js
    │   ├── Input
    │   │   ├── Input.module.css
    │   │   └── Input.js
    │   ├── PhotoPerfil
    │   │   ├── PhotoPerfil.js
    │   │   └── PhotoPerfil.module.css
    │   ├── SideHeader
    │   │   ├── SideHeader.module.css
    │   │   └── SideHeader.js
    │   └── Header
    │   │   ├── Header.module.css
    │   │   └── Header.js
    ├── index.js
    ├── bootstrapStyle
    │   └── ButtonBootstrap.js
    ├── pages
    │   ├── HomePage
    │   │   ├── HomePage.module.css
    │   │   └── HomePage.js
    │   ├── ClientRegister
    │   │   ├── ClientRegister.module.css
    │   │   └── ClientRegister.js
    │   ├── ClientEdit
    │   │   ├── ClientEdit.module.css
    │   │   └── ClientEdit.js
    │   ├── ProviderRegister
    │   │   ├── ProviderRegister.module.css
    │   │   └── ProviderRegister.js
    │   ├── ProviderEdit
    │   │   ├── ProviderEdit.module.css
    │   │   └── ProviderEdit.js
    │   ├── ProductRegister
    │   │   ├── ProductRegister.module.css
    │   │   └── ProductRegister.js
    │   ├── ClientLogin
    │   │   ├── ClientLogin.module.css
    │   │   └── ClientLogin.js
    │   ├── ProviderLogin
    │   │   ├── ProviderLogin.module.css
    │   │   └── ProviderLogin.js
    │   └── InfoProduct
    │   │   ├── InfoProduct.module.css
    │   │   └── InfoProduct.js
    ├── SessionContext.js
    └── App.js
├── .gitignore
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/buysilia_front/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/product.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/buysilia_front/master/src/assets/product.jpeg


--------------------------------------------------------------------------------
/src/assets/left-arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/buysilia_front/master/src/assets/left-arrow.png


--------------------------------------------------------------------------------
/src/assets/logoBuysilia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/buysilia_front/master/src/assets/logoBuysilia.png


--------------------------------------------------------------------------------
/src/assets/productTwo.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/buysilia_front/master/src/assets/productTwo.jpeg


--------------------------------------------------------------------------------
/src/assets/logoHorizontal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/buysilia_front/master/src/assets/logoHorizontal.png


--------------------------------------------------------------------------------
/src/assets/productThree.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vicckm/buysilia_front/master/src/assets/productThree.jpeg


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
1 | * {
2 |   padding: 0px;
3 |   margin: 0px;
4 |   box-sizing: border-box;
5 |   font-family: "Roboto", sans-serif;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/Components/Logout/Logout.module.css:
--------------------------------------------------------------------------------
 1 | .logout {
 2 |     color: white;
 3 |     cursor: pointer;
 4 |     font-size: 26px;
 5 |     font-weight: lighter;
 6 | }
 7 | 
 8 | .logout:hover{
 9 |     text-decoration: underline;
10 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | 
 4 | import App from './App'
 5 | 
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App/>
10 |   </React.StrictMode>,
11 |   document.getElementById("root")
12 | );
13 | 


--------------------------------------------------------------------------------
/src/bootstrapStyle/ButtonBootstrap.js:
--------------------------------------------------------------------------------
 1 | export const ButtonBootstrapStyle = {
 2 |     border: 'none',
 3 |     backgroundColor: '#fc3434',
 4 |     padding: '5px 10px',
 5 |     borderRadius: '13px',
 6 |     outline: 'none',
 7 |     fontSize: '20px',
 8 |     color: 'white',
 9 | }
10 | 
11 | 


--------------------------------------------------------------------------------
/src/Components/Button/Button.module.css:
--------------------------------------------------------------------------------
 1 | .button {
 2 |   border: none;
 3 |   background: #fc3434;
 4 |   padding: 5px 10px;
 5 |   border-radius: 13px;
 6 |   outline: none;
 7 |   font-size: 20px;
 8 |   color: white;
 9 |   outline: none;
10 | }
11 | 
12 | .button:hover {
13 |   background: #1a1a1a;
14 |   color: #fc3434;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/Components/Textarea/Textarea.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styles from "../Textarea/Textarea.module.css";
 3 | 
 4 | function Textarea({ description }) {
 5 |   return (
 6 |     <>
 7 |       <label className={styles.label}>Descrição</label>
 8 |       <div className={styles.textarea}>{description}</div>
 9 |     </>
10 |   );
11 | }
12 | 
13 | export default Textarea;
14 | 


--------------------------------------------------------------------------------
/src/pages/HomePage/HomePage.module.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .content {
 3 |   width: 960px;
 4 |   margin: 0px auto;
 5 |   padding: 20px 0px;
 6 |   display: flex;
 7 |   justify-content: center;
 8 |   align-items: center;
 9 |   flex-wrap: wrap;
10 |   gap: 20px;
11 | }
12 | 
13 | @media (max-width: 850px) {
14 |     .content {
15 |         width: 300px;
16 |         flex-direction: column;
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/Components/Button/Button.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styles from "./Button.module.css";
 3 | 
 4 | function Button(props) {
 5 |   return (
 6 |     <>
 7 |       <button type={props.type} className={styles.button} style={{minWidth: `${props.minWidth}`, marginTop: `${props.marginTop}`}}>
 8 |         {props.text}
 9 |       </button>
10 |     </>
11 |   );
12 | }
13 | 
14 | export default Button;
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/Components/Textarea/Textarea.module.css:
--------------------------------------------------------------------------------
 1 | .label{
 2 |     color: #fc3434;
 3 |     font-size: 20px;
 4 |     font-weight: bold;
 5 |     margin-left: 10px;
 6 | }
 7 | 
 8 | .textarea {
 9 |     border-color: #fc3434;
10 |     border-radius: 13px;
11 |     border-style: solid;
12 |     color: #1a1a1a;
13 |     background: #f5f5f0;
14 |     width: 250px;
15 |     min-height: 100px;
16 |     text-align: center;
17 |     padding: 25px;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/Components/CardProduct/CardProduct.module.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |   width: 300px;
 3 |   height: 315px;
 4 |   border: 2px solid #fc3434;
 5 |   background: #f5f5f0;
 6 | }
 7 | 
 8 | .img {
 9 |   width: 296px;
10 |   height: 200px;
11 | }
12 | 
13 | .title {
14 |   text-align: center;
15 |   margin: 15px 0px;
16 |   color: #fc3434;
17 | }
18 | 
19 | .bottom {
20 |   display: flex;
21 |   justify-content: space-around;
22 | }
23 | 
24 | .price {
25 |   font-size: 20px;
26 | }


--------------------------------------------------------------------------------
/src/Components/Input/Input.module.css:
--------------------------------------------------------------------------------
 1 | .input{
 2 |     height: 35px;
 3 |     border-radius: 13px;
 4 |     border: 1px solid #fc3434; 
 5 |     color: #888888; 
 6 |     margin: 5px;
 7 |     padding: 5px;
 8 |     font-size: 20px;
 9 |     outline: none;
10 |     background: #f5f5f0;
11 | }
12 | 
13 | .label{
14 |     color: #fc3434;
15 |     font-size: 20px;
16 |     font-weight: bold;
17 |     margin-left: 10px;
18 | }
19 | 
20 | .div{
21 |     display: flex;
22 |     flex-direction: column;
23 |     margin-top: 20px;
24 | }


--------------------------------------------------------------------------------
/src/Components/Logout/Logout.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext} from "react";
 2 | import { useHistory } from "react-router-dom";
 3 | 
 4 | import styles from "./Logout.module.css";
 5 | 
 6 | import {Context} from '../../SessionContext';
 7 | 
 8 | function Logout(props) {
 9 |   const { handleLoggout } = useContext(Context)
10 |   const history = useHistory()
11 | 
12 |   const logout = () => {
13 |     handleLoggout()
14 |     history.replace('/')
15 |   }
16 | 
17 |   return (
18 |     <li className={props.logoutStyle} onClick={logout}>
19 |       <p className={styles.logout}>Sair</p>
20 |     </li>
21 |   );
22 | }
23 | 
24 | export default Logout;
25 | 


--------------------------------------------------------------------------------
/src/Components/PhotoPerfil/PhotoPerfil.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import styles from "./PhotoPerfil.module.css";
 3 | 
 4 | export default function PhotoPerfil(props) {
 5 |   const [photo, setPhoto] = useState(false);
 6 | 
 7 |   useEffect(() => {
 8 |     setPhoto(props.urlPhoto)
 9 |   },[props.urlPhoto])
10 | 
11 |   return (
12 |     <div className={styles.div}>
13 |       {photo ? (<img className={styles.img} src={photo} alt='Perfil'/>) : null}
14 |       <div styles={{ display: "flex" }}>
15 |         <p className={styles.p}>Adicionar Imagem</p>
16 |         <p className={styles.p}>Remover Imagem</p>
17 |       </div>
18 |     </div>
19 |   );
20 | }
21 | 


--------------------------------------------------------------------------------
/src/Components/PhotoPerfil/PhotoPerfil.module.css:
--------------------------------------------------------------------------------
 1 | .div{
 2 |     width: 90%;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 | }
 7 | 
 8 | .img{
 9 |     width: 150px;
10 |     height: 150px;
11 |     border-radius: 75px;
12 | }
13 | 
14 | .p {
15 |     margin-left: 20px;
16 |     color: #fc3434;
17 | }
18 | 
19 | .p:hover{
20 |     text-decoration: underline;
21 |     cursor: pointer;
22 | }
23 | 
24 | .p:first-child {
25 |     margin-bottom: 0;
26 | }
27 | 
28 | @media(max-width:850px){
29 |     .div{
30 |         flex-direction: column;
31 |     }
32 | 
33 |     .p {
34 |         margin-left: 0;
35 |     }
36 | 
37 |     .p:first-child {
38 |         margin-top: 10px;
39 |         margin-bottom: 0;
40 |     }
41 | }


--------------------------------------------------------------------------------
/src/Components/SideHeader/SideHeader.module.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |   min-height: 100vh;
 3 |   background-color: #fc3434;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 | }
 8 | 
 9 | .logout{
10 |   position: fixed;
11 |   top: 50px;
12 |   left: 50px;
13 |   list-style: none;
14 | }
15 | 
16 | .img {
17 |   width: 300px;
18 |   height: 400px;
19 | }
20 | 
21 | @media (max-width: 850px) {
22 |   .header {
23 |     height: 150px;
24 |     min-height: 0;
25 |     background-color: #fc3434;
26 |     display: flex;
27 |     flex-direction: column-reverse;
28 |     justify-content: center;
29 |     align-items: center;
30 |   }
31 | 
32 |   .logout{
33 |     position: static;
34 |   }
35 | 
36 |   .img {
37 |     width: 200px;
38 |     height: 100px;
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/pages/ClientRegister/ClientRegister.module.css:
--------------------------------------------------------------------------------
 1 | .body {
 2 |   display: flex;
 3 | }
 4 | 
 5 | .container {
 6 |   width: 100%;
 7 |   background: #f5f5f0;
 8 |   display: flex;
 9 |   align-items: center;
10 |   justify-content: center;
11 |   padding-bottom: 20px;
12 | }
13 | 
14 | .div {
15 |   width: 100%;
16 |   max-width: 1100px;
17 |   display: flex;
18 |   flex-direction: column;
19 |   align-items: center;
20 | }
21 | 
22 | .h2 {
23 |   color: #fc3434;
24 |   text-align: center;
25 |   font-size: 36px;
26 |   font-weight: lighter;
27 |   margin-bottom: 50px;
28 | }
29 | 
30 | .form {
31 |   display: flex;
32 |   flex-wrap: wrap;
33 |   width: 80%;
34 |   justify-content: space-between;
35 | }
36 | 
37 | @media (max-width: 850px) {
38 |   .body {
39 |     flex-direction: column;
40 |   }
41 |   .container {
42 |     width: 100%;
43 |     margin-left: 0;
44 |   }
45 | 
46 |   .h2 {
47 |     padding-top: 30px;
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/pages/ClientEdit/ClientEdit.module.css:
--------------------------------------------------------------------------------
 1 | .body {
 2 |     display: flex;
 3 | }
 4 |   
 5 | .container {
 6 |     width: 100%;
 7 |     background: #f5f5f0;
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     padding-bottom: 20px;
12 | }
13 | 
14 | .div {
15 |     width: 100%;
16 |     max-width: 1100px;
17 |     display: flex;
18 |     flex-direction: column;
19 |     align-items: center;
20 | }
21 | 
22 | .h2 {
23 |     color: #fc3434;
24 |     text-align: center;
25 |     font-size: 36px;
26 |     font-weight: lighter;
27 |     margin-bottom: 50px;
28 | }
29 | 
30 | .form {
31 |     display: flex;
32 |     flex-wrap: wrap;
33 |     width: 80%;
34 |     justify-content: space-between;
35 | }
36 | 
37 | @media (max-width: 850px) {
38 |     .body {
39 |         flex-direction: column;
40 |     }
41 |     .container {
42 |         width: 100%;
43 |         margin-left: 0;
44 |     }
45 | 
46 |     .h2 {
47 |         padding-top: 30px;
48 |     }
49 | }


--------------------------------------------------------------------------------
/src/pages/ProviderRegister/ProviderRegister.module.css:
--------------------------------------------------------------------------------
 1 | .body {
 2 |     display: flex;
 3 | }
 4 | 
 5 | .container {
 6 |     width: 100%;
 7 |     background: #f5f5f0;
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     padding-bottom: 20px;
12 | }
13 | 
14 | .div {
15 |     width: 100%;
16 |     max-width: 1100px;
17 |     display: flex;
18 |     flex-direction: column;
19 |     align-items: center;
20 | }
21 | 
22 | .h2 {
23 |     color: #fc3434;
24 |     text-align: center;
25 |     font-size: 36px;
26 |     font-weight: lighter;
27 |     margin-bottom: 50px;
28 | }
29 | 
30 | .form {
31 |     display: flex;
32 |     flex-wrap: wrap;
33 |     width: 80%;
34 |     justify-content: space-between;
35 | }
36 | 
37 | @media (max-width: 850px) {
38 |     .body {
39 |         flex-direction: column;
40 |     }
41 |     .container {
42 |         width: 100%;
43 |         margin-left: 0;
44 |     }
45 | 
46 |     .h2 {
47 |         padding-top: 30px;
48 |     }
49 | }
50 |   


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <link rel="stylesheet" href="./global.css" />
 9 |     <link
10 |       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
11 |       rel="stylesheet"
12 |     />
13 | 
14 |     <title>Buysilia</title>
15 |   </head>
16 |   <body>
17 |     <div id="root"></div>
18 |   </body>
19 |   <script
20 |     src="https://unpkg.com/react/umd/react.production.min.js"
21 |     crossorigin
22 |   ></script>
23 | 
24 |   <script
25 |     src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
26 |     crossorigin
27 |   ></script>
28 | 
29 |   <script
30 |     src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
31 |     crossorigin
32 |   ></script>
33 | 
34 |   <script>
35 |     var Alert = ReactBootstrap.Alert;
36 |   </script>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/src/pages/ProviderEdit/ProviderEdit.module.css:
--------------------------------------------------------------------------------
 1 | .body {
 2 |     display: flex;
 3 | }
 4 |   
 5 | .container {
 6 |     width: 100%;
 7 |     background: #f5f5f0;
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     padding-bottom: 20px;
12 | }
13 | 
14 | .div {
15 |     width: 100%;
16 |     max-width: 1100px;
17 |     display: flex;
18 |     flex-direction: column;
19 |     align-items: center;
20 | }
21 | 
22 | .h2 {
23 |     color: #fc3434;
24 |     text-align: center;
25 |     font-size: 36px;
26 |     font-weight: lighter;
27 |     margin-bottom: 50px;
28 | }
29 | 
30 | .form {
31 |     display: flex;
32 |     flex-wrap: wrap;
33 |     width: 80%;
34 |     justify-content: space-between;
35 | }
36 | 
37 | .span{
38 |     font-size: 40px;
39 |     color: #333333;
40 |     font-weight: bold;
41 | }
42 | 
43 | @media (max-width: 850px) {
44 |     .body {
45 |         flex-direction: column;
46 |     }
47 |     .container {
48 |         width: 100%;
49 |         margin-left: 0;
50 |     }
51 | 
52 |     .h2 {
53 |         padding-top: 30px;
54 |     }
55 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "buysilia_front",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.4",
 7 |     "@testing-library/react": "^11.1.0",
 8 |     "@testing-library/user-event": "^12.1.10",
 9 |     "bootstrap": "^4.5.3",
10 |     "react": "^17.0.1",
11 |     "react-bootstrap": "^1.4.0",
12 |     "react-dom": "^17.0.1",
13 |     "react-router-dom": "^5.2.0",
14 |     "react-scripts": "4.0.0",
15 |     "web-vitals": "^0.2.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/Components/Header/Header.module.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |   background: #fc3434;
 3 |   display: flex;
 4 |   justify-content: space-between;
 5 |   align-items: center;
 6 | }
 7 | 
 8 | .logo {
 9 |   margin-left: 50px;
10 | }
11 | 
12 | .logout{
13 |   margin: 0px 15px;
14 |   list-style: none;
15 | }
16 | 
17 | .img {
18 |   width: 300px;
19 |   height: 150px;
20 | }
21 | 
22 | .menu {
23 |   display: flex;
24 | }
25 | 
26 | .items {
27 |   list-style: none;
28 |   color: white;
29 |   font-size: 26px;
30 |   margin: 0px 15px;
31 | }
32 | 
33 | .space{
34 |   list-style: none;
35 |   color: white;
36 |   font-size: 26px;
37 | }
38 | 
39 | a {
40 |     text-decoration: none;
41 | }
42 | 
43 | a:visited {
44 |   color: white;
45 | }
46 | 
47 | 
48 | @media (max-width: 850px) {
49 |   .header {
50 |     flex-direction: column;
51 |   }
52 | 
53 |   .logo {
54 |     margin-left: 0px;
55 |   }
56 | 
57 |   .items:last-child {
58 |     margin-right: 0px;
59 |   }
60 | 
61 |   .space{
62 |     display: none;
63 |   }
64 | }
65 | 
66 | @media(max-width:500px){
67 |   .menu{
68 |     flex-direction: column;
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/Components/SideHeader/SideHeader.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState, useContext } from 'react';
 2 | import {Link} from 'react-router-dom';
 3 | 
 4 | import styles from './SideHeader.module.css';
 5 | import logo from '../../assets/logoBuysilia.png';
 6 | import logoHorizontal from '../../assets/logoHorizontal.png';
 7 | import Logout from '../Logout/Logout'
 8 | 
 9 | import {Context} from '../../SessionContext';
10 | 
11 | export default function SideHeader(){
12 |     const {session} = useContext(Context)
13 | 
14 |     const [windowWidth, setWindowWidth] = useState(window.innerWidth)
15 | 
16 |     useEffect(() => {
17 |        window.addEventListener('resize', () => setWindowWidth(window.innerWidth))
18 |     },[])
19 | 
20 |     const logged = () => {
21 |         if(session.provider===0 && session.client===0) return false
22 |         return true
23 |       }
24 | 
25 |     return (
26 |         <header className={styles.header}>
27 |             {logged() ? (<Logout logoutStyle={styles.logout} />) : null}
28 |             <Link to='/' ><img src={windowWidth < 850 ? logoHorizontal : logo} className={styles.img} alt='Logo Buysilia' /></Link> 
29 |         </header>
30 |     )
31 | }


--------------------------------------------------------------------------------
/src/pages/ProductRegister/ProductRegister.module.css:
--------------------------------------------------------------------------------
 1 | .body {
 2 |     display: flex;
 3 |   }
 4 |   
 5 |   .container {
 6 |     width: 100%;
 7 |     background: #f5f5f0;
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     flex-direction: column;
12 |   }
13 |   
14 |   .div {
15 |     width: 100%;
16 |     max-width: 1100px;
17 |     display: flex;
18 |     flex-direction: column;
19 |     align-items: center;
20 |   }
21 |   
22 |   .h2 {
23 |     color: #fc3434;
24 |     text-align: center;
25 |     font-size: 36px;
26 |     font-weight: lighter;
27 |     margin-bottom: 50px;
28 |   }
29 |   
30 |   .form {
31 |     display: flex;
32 |     flex-wrap: wrap;
33 |     width: 80%;
34 |     justify-content: space-between;
35 |     align-items: center;
36 |   }
37 |   
38 |   .hidden{
39 |     display: none;
40 |   }
41 |   
42 |   .show{
43 |     display: block;
44 |   }
45 |   
46 |   @media (max-width: 850px) {
47 |     .body {
48 |       flex-direction: column;
49 |     }
50 |     .container {
51 |       width: 100%;
52 |       height: 100vh;
53 |       justify-content: flex-start;
54 |       margin-left: 0;
55 |     }
56 |   
57 |     .h2 {
58 |       padding-top: 30px;
59 |     }
60 |   }


--------------------------------------------------------------------------------
/src/SessionContext.js:
--------------------------------------------------------------------------------
 1 | import React, {createContext, useEffect, useState} from 'react';
 2 | 
 3 | const Context = createContext();
 4 | 
 5 | function Session({ children }) {
 6 |     const [session, setSession] = useState({
 7 |         client: 0,
 8 |         provider: 0
 9 |     })
10 | 
11 |     const [loading, setLoading] = useState(true)
12 | 
13 |     useEffect(() => {
14 |         setLoading(false)
15 |     },[])
16 | 
17 |     function handleLoggout(){
18 |         setSession({
19 |             client: 0,
20 |             provider: 0
21 |         })
22 |     }
23 | 
24 |     function handleLoginClient(client_id){
25 | 
26 |         setSession({
27 |             client: client_id,
28 |             provider: 0
29 |         })       
30 |     }
31 | 
32 |     function handleLoginProvider(provider_id){
33 |         setSession({
34 |             client: 0,
35 |             provider: provider_id
36 |         })
37 |     }
38 | 
39 |     if(loading){
40 |         return <h1>Loading...</h1>
41 |     }
42 | 
43 |     return (
44 |         <Context.Provider value={{session, handleLoginClient, handleLoginProvider, handleLoggout}} >
45 |             {children}
46 |         </Context.Provider>
47 |     );
48 | }
49 | 
50 | export {Context, Session};
51 | 
52 | 


--------------------------------------------------------------------------------
/src/Components/Header/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react";
 2 | import {Link} from 'react-router-dom';
 3 | 
 4 | import logoHorizontal from "../../assets/logoHorizontal.png";
 5 | import styles from "./Header.module.css";
 6 | import Logout from '../Logout/Logout'
 7 | 
 8 | import {Context} from '../../SessionContext';
 9 | 
10 | function Header() {
11 |   const {session} = useContext(Context)
12 | 
13 |   const logged = () => {
14 |     if(session.provider===0 && session.client===0) return false
15 |     return true
16 |   }
17 | 
18 |   return (
19 |     <header className={styles.header}>
20 |       <div className={styles.logo}>
21 |         <img src={logoHorizontal} className={styles.img} alt="Buysilia" />
22 |       </div>
23 | 
24 |       <nav>
25 |         <ul className={styles.menu}>
26 |           <Link to="/login/client"><li className={styles.items}>Cliente</li></Link>
27 |           <li className={styles.space} >|</li>
28 |           <Link to="/login/provider"><li className={styles.items}>Fornecedor</li></Link>
29 |           {logged() ? (<> <li className={styles.space} >|</li> <Logout logoutStyle={styles.logout} /></>)  : null} 
30 |         </ul>
31 |       </nav>
32 |     </header>
33 |   );
34 | }
35 | 
36 | export default Header;
37 | 


--------------------------------------------------------------------------------
/src/Components/Input/Input.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import styles from './Input.module.css'
 3 | 
 4 | export default function Input(props){
 5 | 
 6 |     const [windowWidth, setWindownWidth] = useState(window.innerWidth)
 7 |     const [value, setValue] = useState('')
 8 | 
 9 |     useEffect(() => {
10 |        window.addEventListener('resize', () => setWindownWidth(window.innerWidth))
11 |        return (() => {
12 |             window.removeEventListener('resize', () => setWindownWidth(window.innerWidth))
13 |         })
14 |     },[])
15 | 
16 |     useEffect(() => {
17 |         setValue(props.children)
18 |     },[props.children])
19 | 
20 |     const handleValue = (event) => {
21 |         setValue(event.target.value)
22 |         if(props.setField){
23 |             props.setField(event.target.value)
24 |         }
25 |         
26 |     }
27 | 
28 |     return (
29 |         
30 |         <div className={styles.div} style={windowWidth < 850 ? {width: '100%'} :{width: props.percWidth}} >
31 |             <label className={styles.label}>{props.title}</label>
32 |             <input type={props.type} className={styles.input} name={props.name} value={value} onChange={handleValue} required />
33 |         </div>
34 |     )
35 | }


--------------------------------------------------------------------------------
/src/Components/CardProduct/CardProduct.js:
--------------------------------------------------------------------------------
 1 | import React, { useState ,useEffect } from "react";
 2 | import { Link } from 'react-router-dom';
 3 | 
 4 | import styles from "./CardProduct.module.css";
 5 | import Button from "../Button/Button";
 6 | 
 7 | function CardProduct(props) {
 8 |   const [image, setImage] = useState('https://crestana.com.br/img/imagens_produto/20190726_214134_1____01%20PRODUTO-SEM-IMAGEM-1000X1000.JPG')
 9 | 
10 |   useEffect(() => {
11 |     (async () => {
12 |       const img = await fetch(`https://secret-brushlands-49902.herokuapp.com/product/photos/${props.productID}`).then(data=>data.json()).then(rows=>rows[0].url_product).catch(err=>{console.log(err)})
13 |       if(img){
14 |         setImage(img)
15 |       }
16 |       
17 |     })()
18 |   },[props.productID])
19 | 
20 |   return (
21 |     <div className={styles.card}>
22 |       <img src={image} className={styles.img} alt="Product" />
23 |       <h3 className={styles.title}>{props.title}</h3>
24 |       <div className={styles.bottom}>
25 |         <p className={styles.price}>R${props.price}</p>
26 |         <Link to={`/info/product/${props.productID}`}><Button text="Comprar" minWidth='120px' /></Link>
27 |       </div>
28 |     </div>
29 |   );
30 | }
31 | 
32 | export default CardProduct;
33 | 


--------------------------------------------------------------------------------
/src/pages/ClientLogin/ClientLogin.module.css:
--------------------------------------------------------------------------------
 1 | .body {
 2 |   display: flex;
 3 | }
 4 | 
 5 | .container {
 6 |   width: 100%;
 7 |   background: #f5f5f0;
 8 |   display: flex;
 9 |   align-items: center;
10 |   justify-content: center;
11 |   flex-direction: column;
12 | }
13 | 
14 | .div {
15 |   width: 100%;
16 |   max-width: 1100px;
17 |   display: flex;
18 |   flex-direction: column;
19 |   align-items: center;
20 | }
21 | 
22 | .h2 {
23 |   color: #fc3434;
24 |   text-align: center;
25 |   font-size: 36px;
26 |   font-weight: lighter;
27 |   margin-bottom: 50px;
28 | }
29 | 
30 | .form {
31 |   display: flex;
32 |   flex-wrap: wrap;
33 |   width: 80%;
34 |   justify-content: center;
35 |   align-items: center;
36 |   flex-direction: column;
37 | }
38 | 
39 | .buttons{
40 |   display: flex;
41 |   justify-content: space-around;
42 |   width: 80%;
43 | }
44 | 
45 | .hidden{
46 |   display: none;
47 | }
48 | 
49 | .show{
50 |   display: block;
51 | }
52 | 
53 | 
54 | @media (max-width: 850px) {
55 |   .body {
56 |     flex-direction: column;
57 |   }
58 |   .container {
59 |     width: 100%;
60 |     height: 100vh;
61 |     justify-content: flex-start;
62 |     margin-left: 0;
63 |   }
64 | 
65 |   .h2 {
66 |     padding-top: 30px;
67 |   }
68 | }
69 | 
70 | @media(max-width: 600px){
71 |   .buttons{
72 |     flex-direction: column;
73 |     align-items: center;
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/pages/ProviderLogin/ProviderLogin.module.css:
--------------------------------------------------------------------------------
 1 | .body {
 2 |   display: flex;
 3 | }
 4 | 
 5 | .container {
 6 |   width: 100%;
 7 |   background: #f5f5f0;
 8 |   display: flex;
 9 |   align-items: center;
10 |   justify-content: center;
11 |   flex-direction: column;
12 | }
13 | 
14 | .div {
15 |   width: 100%;
16 |   max-width: 1100px;
17 |   display: flex;
18 |   flex-direction: column;
19 |   align-items: center;
20 | }
21 | 
22 | .h2 {
23 |   color: #fc3434;
24 |   text-align: center;
25 |   font-size: 36px;
26 |   font-weight: lighter;
27 |   margin-bottom: 50px;
28 | }
29 | 
30 | .form {
31 |   display: flex;
32 |   flex-wrap: wrap;
33 |   width: 80%;
34 |   flex-direction: column;
35 |   justify-content:center;
36 |   align-items: center;
37 | 
38 | }
39 | 
40 | .buttons{
41 |   display: flex;
42 |   justify-content: space-around;
43 |   width: 80%;
44 | }
45 | 
46 | .hidden{
47 |   display: none;
48 | }
49 | 
50 | .show{
51 |   display: block;
52 | }
53 | 
54 | @media (max-width: 850px) {
55 |   .body {
56 |     flex-direction: column;
57 |   }
58 |   .container {
59 |     width: 100%;
60 |     height: 100vh;
61 |     justify-content: flex-start;
62 |     margin-left: 0;
63 |   }
64 | 
65 |   .h2 {
66 |     padding-top: 30px;
67 |   }
68 | }
69 | 
70 | @media(max-width: 600px){
71 |   .buttons{
72 |     flex-direction: column;
73 |     align-items: center;
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Componentes
 2 | 
 3 | ### Input
 4 | O componente `<Input />` recebe 4 props, o `title`, `type`, `name` e `percWidth`. A propriedade `title` recebe uma string que é o valor do Label referente ao input. A propriedade `type` recebe o tipo de input e a propriedade `name`, o name do input. A propriedade `percWidth` recebe uma string com um valor em porcentagem, ex: `'100%'`. Esse valor é em relação ao elemento em que o componente Input está inserido.
 5 | 
 6 | ### SideHeader
 7 | O componente `<SideHeader />` não recebe props e é para ser utilizado como primeiro elemento da página. Usando na div pai display flex e align-itens center, e com media query em 850px alterando a flex-direction para collumn ele funciona como header lateral e para telas menores, header superior
 8 | 
 9 | ### SubmitButton
10 | 
11 | O componente `<SubmitButton />` recebe props `text`, `minWidth` e `marginTop`. 
12 | A propriedade `text` recebe uma string que é o texto do botão. A propriedade `minWidth` recebe uma string com a largura minima do botão e a propriedade `marginTop` recebe a margen acima do botão.  
13 | 
14 | ### Header 
15 | 
16 | O componente `<Header />` não recebe props e é para ser utilizado como cabeçalho da página inicial. 
17 | 
18 | ### CardProduct
19 | 
20 | O componente `<CardProduct />` recebe 3 props, `img`, `title` e `price`. A propriedade `img` recebe uma imagem para ser adicionado no `src` da tag. A propriedade `title` recebe uma string que será o título e a propriedade `price` recebe uma string que será o valor do produto.
21 | 
22 | 


--------------------------------------------------------------------------------
/src/pages/InfoProduct/InfoProduct.module.css:
--------------------------------------------------------------------------------
  1 | .body {
  2 |   display: flex;
  3 | }
  4 | 
  5 | .container {
  6 |   width: 100%;
  7 |   background: #f5f5f0;
  8 |   display: flex;
  9 |   align-items: center;
 10 |   justify-content: center;
 11 |   padding-bottom: 20px;
 12 | }
 13 | 
 14 | .img {
 15 |   width: 200px;
 16 |   height: 200px;
 17 |   border-radius: 50%;
 18 |   margin-bottom: 25px;
 19 | }
 20 | 
 21 | .div {
 22 |   width: 100%;
 23 |   max-width: 1100px;
 24 |   display: flex;
 25 |   flex-direction: column;
 26 |   align-items: center;
 27 | }
 28 | 
 29 | .h2 {
 30 |   color: #fc3434;
 31 |   text-align: center;
 32 |   font-size: 36px;
 33 |   font-weight: lighter;
 34 |   margin-top: 50px;
 35 |   margin-bottom: 50px;
 36 | }
 37 | 
 38 | .h3{
 39 |   color: #fc3434;
 40 |   font-size: 20px;
 41 |   font-weight: bold;
 42 |   margin-left: 10px;
 43 | }
 44 | 
 45 | .form {
 46 |   display: flex;
 47 |   flex-direction: column;
 48 |   width: 80%;
 49 |   justify-content: space-between;
 50 |   align-items: center;
 51 | }
 52 | 
 53 | .textarea {
 54 |   display: flex;
 55 |   flex-direction: column;
 56 | }
 57 | 
 58 | .alignment {
 59 |   display: flex;
 60 |   justify-content: space-around;
 61 |   margin-top: 20px;
 62 | }
 63 | 
 64 | .p {
 65 |   width: 100px;
 66 |   border-bottom: 1px solid #fc3434;
 67 |   margin-left: 3px;
 68 |   margin-right: 10px;
 69 |   text-align: center;
 70 | 
 71 | }
 72 | 
 73 | .hidden{
 74 |   display: none;
 75 | }
 76 | 
 77 | .show{
 78 |   display: block;
 79 | }
 80 | 
 81 | @media (max-width: 850px) {
 82 |   .body {
 83 |     flex-direction: column;
 84 |   }
 85 |   .container {
 86 |     width: 100%;
 87 |     margin-left: 0;
 88 |   }
 89 | 
 90 |   .h2 {
 91 |     padding-top: 30px;
 92 |   }
 93 | 
 94 |   .img {
 95 |     width: 200px;
 96 |     height: 200px;
 97 |   }
 98 | 
 99 |   .alignment{
100 |     flex-direction: column;
101 |   }
102 | }
103 | 


--------------------------------------------------------------------------------
/src/pages/ProviderEdit/ProviderEdit.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext, useEffect, useState} from "react";
 2 | import { useHistory, Link } from 'react-router-dom';
 3 | 
 4 | import Input from "../../Components/Input/Input.js";
 5 | import styles from "./ProviderEdit.module.css";
 6 | import SideHeader from "../../Components/SideHeader/SideHeader";
 7 | import Button from "../../Components/Button/Button";
 8 | 
 9 | import {Context} from '../../SessionContext';
10 | 
11 | 
12 | function ProviderEdit() {
13 |   const {session} = useContext(Context)
14 |   const [data, setData] = useState({})
15 |   const history = useHistory()
16 | 
17 |   useEffect(() => {
18 |     ( async () => {
19 |       const data = await fetch(`https://secret-brushlands-49902.herokuapp.com/provider/${session.provider}`).then(data => data.json())
20 |       setData(data)
21 |     })()
22 |   },[session.provider])
23 | 
24 |   if(session.provider===0){
25 |     history.replace('/login/provider')
26 |   }
27 | 
28 |   const prevent = (event) => {
29 |     event.preventDefault()
30 |   }
31 | 
32 |   return (
33 |     <div className={styles.body}>
34 |       <SideHeader />
35 |       <div className={styles.container}>
36 |           <div className={styles.div}>
37 |               <h2 className={styles.h2}>
38 |                   Seja bem-vindo!!<br/>
39 |                   <span className={styles.span}>{data.name}</span>
40 |               </h2>
41 | 
42 |               <form className={styles.form} onSubmit={prevent}>
43 |                   <Input title="Nome" type="text" name="name" percWidth="100%" >{data.name}</Input>
44 |                   <Input title="CNPJ" type="text" name="cnpj" percWidth="50%" >{data.cnpj}</Input>
45 |                   <Input title="Telefone" type="text" name="phone" percWidth="50%" >{data.phone}</Input>
46 |                   <Input title="Razão Social" type="text" name="company_name" percWidth="100%" >{data.company_name}</Input>
47 |                   <Input title="Endereço" type="text" name="address" percWidth="100%" >{data.address}</Input>
48 | 
49 |                   <Button type='submit' text="Confirmar" minWidth='250px' marginTop='50px' />
50 |                   <Link to='/register/product'><Button text="Adicionar Produto" minWidth='250px' marginTop='50px' /> </Link>
51 |               </form>
52 |           </div>
53 |       </div>
54 |     </div>
55 |   );
56 | }
57 | 
58 | export default ProviderEdit
59 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { BrowserRouter, Switch, Route } from "react-router-dom";
 4 | import {Session} from './SessionContext'
 5 | 
 6 | import "./global.css";
 7 | import 'bootstrap/dist/css/bootstrap.min.css';
 8 | 
 9 | import ClientRegister from "./pages/ClientRegister/ClientRegister.js";
10 | import ProviderRegister from "./pages/ProviderRegister/ProviderRegister.js";
11 | import HomePage from "./pages/HomePage/HomePage.js";
12 | import ClientLogin from "./pages/ClientLogin/ClientLogin.js";
13 | import ProviderLogin from "./pages/ProviderLogin/ProviderLogin.js";
14 | import ProviderEdit from './pages/ProviderEdit/ProviderEdit.js';
15 | import ClientEdit from "./pages/ClientEdit/ClientEdit";
16 | import ProductRegister from './pages/ProductRegister/ProductRegister';
17 | import InfoProduct from "./pages/InfoProduct/InfoProduct";
18 | 
19 | 
20 | export default function App(){
21 | 
22 |     return (
23 | 
24 |         <Session>
25 |             <BrowserRouter>
26 |                 <Switch>
27 |                     <Route exact path="/">
28 |                         <HomePage />
29 |                     </Route>
30 | 
31 |                     <Route exact path="/login/client">
32 |                         <ClientLogin />
33 |                     </Route>
34 | 
35 |                     <Route exact path="/login/provider">
36 |                         <ProviderLogin />
37 |                     </Route>
38 | 
39 |                     <Route exact path="/register/client">
40 |                         <ClientRegister />
41 |                     </Route>
42 | 
43 |                     <Route exact path="/register/provider">
44 |                         <ProviderRegister />
45 |                     </Route>
46 | 
47 |                     <Route exact path="/register/product">
48 |                         <ProductRegister />
49 |                     </Route>
50 | 
51 |                     <Route exact path="/edit/provider">
52 |                         <ProviderEdit />
53 |                     </Route>
54 |       
55 |                     <Route exact path="/edit/client">
56 |                        <ClientEdit />
57 |                     </Route>
58 | 
59 |                     <Route exact path="/info/product/:productID">
60 |                         <InfoProduct />
61 |                     </Route>
62 |                 </Switch>
63 |             </BrowserRouter>
64 |         </Session>
65 |     )
66 | }


--------------------------------------------------------------------------------
/src/pages/ClientEdit/ClientEdit.js:
--------------------------------------------------------------------------------
 1 | import React, {useContext, useState, useEffect} from "react";
 2 | import { useHistory } from 'react-router-dom';
 3 | 
 4 | import Input from "../../Components/Input/Input.js";
 5 | import styles from "./ClientEdit.module.css";
 6 | import SideHeader from "../../Components/SideHeader/SideHeader";
 7 | import Button from "../../Components/Button/Button";
 8 | import PhotoPerfil from '../../Components/PhotoPerfil/PhotoPerfil';
 9 | 
10 | import {Context} from '../../SessionContext';
11 | 
12 | function ClientEdit() {
13 |   const {session} = useContext(Context)
14 |   const [data, setData] = useState({})
15 |   const [dataPhoto, setDataPhoto] = useState({})
16 |   const history = useHistory()
17 | 
18 |   useEffect(() => {
19 |     ( async () => {
20 |       const data = await fetch(`https://secret-brushlands-49902.herokuapp.com/client/${session.client}`).then(data => data.json())
21 |       setData(data)
22 |     })()
23 |   },[session.client])
24 | 
25 |   useEffect(() => {
26 |     ( async () => {
27 |       const dataPhoto = await fetch(`https://secret-brushlands-49902.herokuapp.com/client/photos/${session.client}`).then(data => data.json())
28 |       setDataPhoto(dataPhoto)
29 |     })()
30 |   },[session.client])
31 | 
32 |   if(session.client===0){
33 |     history.replace('/login/client')
34 |   }
35 | 
36 |   const prevent = (event) => {
37 |     event.preventDefault()
38 |   }
39 | 
40 |   return (
41 |     <div className={styles.body}>
42 |       <SideHeader />
43 |       <div className={styles.container}>
44 |         <div className={styles.div}>
45 |           <h2 className={styles.h2}>Seja bem vindo!<br/>{data.first_name}!</h2>
46 | 
47 |           <PhotoPerfil urlPhoto={dataPhoto.url_client} />
48 | 
49 |           <form className={styles.form} onSubmit={prevent}>
50 |             <Input title="Nome" type="text" name="first_name" percWidth="50%" >{data.first_name}</Input>
51 |             <Input title="Sobrenome" type="text" name="last_name" percWidth="50%" >{data.last_name}</Input>
52 |             <Input title="CPF" type="text" name="cpf" percWidth="50%" >{data.cpf}</Input>
53 |             <Input title="Celular" type="text" name="phone" percWidth="50%" >{data.phone}</Input>
54 |             <Input title="Endereço" type="text" name="address" percWidth="100%" >{data.address}</Input>
55 | 
56 |             <Button type='submit' text="Confirmar" minWidth="250px" marginTop="50px" />
57 |           </form>
58 |         </div>
59 |       </div>
60 |     </div>
61 |   );
62 | }
63 | 
64 | export default ClientEdit;
65 | 


--------------------------------------------------------------------------------
/src/pages/HomePage/HomePage.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState, useContext } from "react";
 2 | import Header from "../../Components/Header/Header";
 3 | import Carousel from "react-bootstrap/Carousel";
 4 | import CardProduct from "../../Components/CardProduct/CardProduct";
 5 | import styles from "./HomePage.module.css";
 6 | 
 7 | import productOne from "../../assets/product.jpeg";
 8 | import productTwo from "../../assets/productTwo.jpeg";
 9 | import productThree from "../../assets/productThree.jpeg";
10 | 
11 | import { Context } from '../../SessionContext'
12 | 
13 | function HomePage() {
14 |   const { session } = useContext(Context)
15 |   const [cardsData, setCardsData] = useState([])
16 |   
17 |   const generateCards = (session) => {
18 |     if(session.provider===0){
19 |       const uri = '/product'
20 |       return createCards(uri)
21 |     } else {
22 |       const uri = `/product/provider/${session.provider}`
23 |       return createCards(uri)
24 |     }
25 |   }
26 | 
27 |   const createCards = async (uri) => {
28 |     const data = await fetch(`https://secret-brushlands-49902.herokuapp.com${uri}`).then(data=>data.json()).then(rows=>rows).catch(err=>{console.log(err)})
29 |     return data
30 |   }
31 | 
32 |   useEffect(() => {
33 |     (async () => {
34 |       const cards = await generateCards(session)
35 |       setCardsData(cards)
36 |     })()
37 | 
38 |   },[session])
39 | 
40 | 
41 |   return (
42 |     <div style={{ background: "#f5f5f0" }}>
43 |       <Header />
44 |       {/* Carousel start */}
45 |       <Carousel>
46 |         <Carousel.Item interval={1000}>
47 |           <img
48 |             className="d-block w-100"
49 |             src={productOne}
50 |             alt="Cooker"
51 |             style={{ backgroundSize: "cover", height: "500px" }}
52 |           />
53 |         </Carousel.Item>
54 |         <Carousel.Item interval={500}>
55 |           <img
56 |             className="d-block w-100"
57 |             src={productTwo}
58 |             alt="Beer"
59 |             style={{ backgroundSize: "cover", height: "500px" }}
60 |           />
61 |         </Carousel.Item>
62 |         <Carousel.Item>
63 |           <img
64 |             className="d-block w-100"
65 |             src={productThree}
66 |             alt="Cellphone"
67 |             style={{ backgroundSize: "cover", height: "500px" }}
68 |           />
69 |         </Carousel.Item>
70 |       </Carousel>
71 | 
72 |       {/* Carousel end */}
73 |       <div className={styles.content}>
74 |         {cardsData.map((product, i) => {
75 |       return (
76 |         <CardProduct key={i} title={product.name} price={product.price} productID={product.product_id} />
77 |       )
78 |     })}
79 |       </div>
80 |     </div>
81 |   );
82 | }
83 | 
84 | export default HomePage;
85 | 


--------------------------------------------------------------------------------
/src/pages/ClientLogin/ClientLogin.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext,  useState } from "react";
 2 | import {useHistory, Link} from 'react-router-dom';
 3 | 
 4 | import Input from "../../Components/Input/Input.js";
 5 | import styles from "./ClientLogin.module.css";
 6 | import SideHeader from "../../Components/SideHeader/SideHeader";
 7 | import Button from "../../Components/Button/Button";
 8 | 
 9 | import { Context } from '../../SessionContext'
10 | 
11 | function ClientLogin() {
12 |   const { session, handleLoginClient } = useContext(Context)
13 |   const [email, setEmail] = useState('')
14 |   const [password, setPassword] = useState('')
15 |   const [isHidden, setIsHidden] = useState(true)
16 |   const history = useHistory()
17 | 
18 | 
19 |   const checkLogin = async (event) => {
20 |     event.preventDefault()
21 |     const body = {
22 |       email: email,
23 |       password: password
24 |     }
25 | 
26 |     const clientID = await fetch('https://secret-brushlands-49902.herokuapp.com/login/client', { method: 'POST',
27 |                       headers: {'Accept': 'application/json','Content-Type': 'application/json'},
28 |                       body: JSON.stringify(body), mode: 'cors', cache: 'default' })
29 |                         .then(data => data.json())
30 |                         .then((row) => {
31 |                           handleLoginClient(row.client_id)                          
32 |                           return row.client_id                          
33 |                         }).catch((err)=>{
34 |                           console.log(err)
35 |                         })
36 |     
37 |     if(clientID>0){
38 |       history.replace('/edit/client')
39 |     } else {
40 |       setIsHidden(false)
41 |       setTimeout(()=>{
42 |         setIsHidden(true)
43 |       },2000)
44 |     }
45 |     
46 |   }
47 | 
48 |   if(session.client>0){
49 |     history.replace('/edit/client')
50 |   }
51 | 
52 |   return (
53 |     <div className={styles.body}>
54 |       <SideHeader />
55 |       <div className={styles.container}>
56 |         <div className={styles.div}>
57 |           <h2 className={styles.h2}>
58 |             Olá!! <br />
59 |             Faça seu login
60 |           </h2>
61 |           <form className={styles.form} onSubmit={checkLogin}  >
62 |             <Input title="Email" type="text" name="email" percWidth="70%" setField={setEmail} />
63 |             <Input title="Senha" type="password" name="password" percWidth="70%" setField={setPassword} />
64 |             <p className={isHidden ? styles.hidden: styles.show}>Login ou senha incorretos</p>
65 |             <div className={styles.buttons}>
66 |               <Button type='submit' text="Entrar" minWidth='200px' marginTop='50px' />
67 | 
68 |               <Link to='/register/client'><Button text="Cadastrar" minWidth='150px' marginTop='50px' /> </Link>
69 |             </div>
70 |           </form>
71 |         </div>
72 |       </div>
73 |     </div>
74 |   );
75 | }
76 | 
77 | export default ClientLogin;
78 | 


--------------------------------------------------------------------------------
/src/pages/ProviderLogin/ProviderLogin.js:
--------------------------------------------------------------------------------
 1 | import React, {useState, useContext} from "react";
 2 | import { useHistory, Link } from 'react-router-dom';
 3 | 
 4 | import Input from "../../Components/Input/Input.js";
 5 | import styles from "./ProviderLogin.module.css";
 6 | import SideHeader from "../../Components/SideHeader/SideHeader";
 7 | import Button from "../../Components/Button/Button";
 8 | 
 9 | import { Context } from '../../SessionContext'
10 | 
11 | function ProviderLogin() {
12 |   const { session, handleLoginProvider } = useContext(Context)
13 |   const [cnpj, setCnpj] = useState('')
14 |   const [isHidden, setIsHidden] = useState(true)
15 |   const history = useHistory()
16 | 
17 |   const checkCNPJ = async (event) => {
18 |     event.preventDefault();
19 |     const body = {
20 |       cnpj: cnpj
21 |     }
22 | 
23 |     const providerID = await fetch(`https://secret-brushlands-49902.herokuapp.com/login/provider`, { method: 'POST',
24 |                                                       headers: {'Accept': 'application/json','Content-Type': 'application/json'},
25 |                                                       body: JSON.stringify(body), mode: 'cors', cache: 'default' })
26 |                                                     .then(data => data.json())
27 |                                                     .then(row => {
28 |                                                       handleLoginProvider(row.provider_id)
29 |                                                       return row.provider_id
30 |                                                     })
31 |                                                     .catch((err)=>{
32 |                                                       console.log(err)
33 |                                                     })
34 | 
35 |     if(providerID>0){
36 |       history.replace('/edit/provider')
37 |     } else {
38 |       setIsHidden(false)
39 |       setTimeout(()=>{
40 |         setIsHidden(true)
41 |       },2000)
42 |     }
43 | 
44 |   }
45 | 
46 |   if(session.provider>0){
47 |     history.replace('/edit/provider')
48 |   }
49 | 
50 |   return (
51 |     <div className={styles.body}>
52 |       <SideHeader />
53 |       <div className={styles.container}>
54 |         <div className={styles.div}>
55 |           <h2 className={styles.h2}>
56 |             Olá, fornecedor! <br />
57 |             Faça seu login
58 |           </h2>
59 |           <form className={styles.form} onSubmit={checkCNPJ}>
60 |             <Input title="CNPJ" type="text" name="user" percWidth="70%" setField={setCnpj} />
61 |             <p className={isHidden ? styles.hidden: styles.show}>CNPJ Incorreto ou não registrado</p>
62 | 
63 |             <div className={styles.buttons}>
64 |               <Button type='submit' text="Entrar" minWidth='200px' marginTop='50px' />
65 |               <Link to='/register/provider'><Button text="Cadastrar" minWidth='150px' marginTop='50px' /> </Link>
66 |             </div>
67 |             
68 |           </form>
69 |         </div>
70 |       </div>
71 |     </div>
72 |   );
73 | }
74 | 
75 | export default ProviderLogin;
76 | 


--------------------------------------------------------------------------------
/src/pages/ProductRegister/ProductRegister.js:
--------------------------------------------------------------------------------
  1 | import React, {useContext, useState} from 'react';
  2 | import { useHistory } from 'react-router-dom';
  3 | 
  4 | import { Modal, Button as ButtonBootstrap } from 'react-bootstrap';
  5 | import { ButtonBootstrapStyle } from '../../bootstrapStyle/ButtonBootstrap'
  6 | 
  7 | import Input from '../../Components/Input/Input.js'
  8 | import styles from './ProductRegister.module.css'
  9 | import SideHeader from '../../Components/SideHeader/SideHeader'
 10 | import Button from '../../Components/Button/Button'
 11 | 
 12 | import {Context} from '../../SessionContext';
 13 | 
 14 | function ProductRegister() {
 15 |     const {session} = useContext(Context)
 16 |     const history = useHistory()
 17 | 
 18 |     const [name, setName] = useState()
 19 |     const [description, setDescription] = useState()
 20 |     const [price, setPrice] = useState()
 21 |     const [evaluation, setEvaluation] = useState()
 22 |     const [stock, setStock] = useState()
 23 | 
 24 |     const [show, setShow] = useState(false);
 25 |     const handleClose = () => setShow(false);
 26 |     const handleShow = () => setShow(true);
 27 | 
 28 |     const [show2, setShow2] = useState(false);
 29 |     const handleClose2 = () => setShow2(false);
 30 |     const handleShow2 = () => setShow2(true);
 31 |     const [errors, setErrors] = useState([])
 32 | 
 33 |     if(session.provider===0){
 34 |         history.replace('/login/provider')
 35 |     }
 36 | 
 37 |     const submitRegisterProduct = async (event) => {
 38 |         event.preventDefault();
 39 | 
 40 |         const body = {
 41 |             provider_id: session.provider,
 42 |             name: name,
 43 |             description: description,
 44 |             price: price,
 45 |             evaluation: evaluation,
 46 |             stock: stock,
 47 |           }
 48 |       
 49 |         const response = await fetch('https://secret-brushlands-49902.herokuapp.com/product', { method: 'POST',
 50 |                         headers: {'Accept': 'application/json','Content-Type': 'application/json'},
 51 |                         body: JSON.stringify(body), mode: 'cors', cache: 'default' })
 52 |                             .then(data => data.json())
 53 |                             .catch((err)=>{
 54 |                             console.log(err)
 55 |                             })
 56 |         
 57 |         if(response.product_id>0){
 58 |             handleShow()
 59 |         } else if(response.errors){
 60 |             setErrors(response.errors)
 61 |             handleShow2()
 62 |         }      
 63 |     }
 64 | 
 65 |     const closeAndRedirect = () => {
 66 |         handleClose()
 67 |         history.replace('/')
 68 |     }
 69 | 
 70 |     return (
 71 |         <div className={styles.body} >
 72 | 
 73 |             <SideHeader/>
 74 | 
 75 |             <div className={styles.container}>
 76 |                 <div className={styles.div}>
 77 |                 <h2 className={styles.h2} >Cadastrar Produto </h2>
 78 | 
 79 |                 <form className={styles.form} onSubmit={submitRegisterProduct}>
 80 |                     <Input title='Nome' type='text' name='name' percWidth='100%' setField={setName} />
 81 |                     <Input title='Descrição' type='text' name='description' percWidth='100%' setField={setDescription} />
 82 |                     <Input title='Preço em R$' type='text' name='price' percWidth='30%' setField={setPrice} />
 83 |                     <Input title='Qtd Estoque' type='text' name='stock' percWidth='30%' setField={setStock} />
 84 |                     <Input title='Avaliação' type='text' name='evaluation' percWidth='30%' setField={setEvaluation} />
 85 | 
 86 |                     <Button type='submit' text="Cadastrar" minWidth="250px" marginTop="50px" />
 87 |                 </form>
 88 |                 </div>
 89 |             </div> 
 90 |                 {/*confirmação de cadastro*/}
 91 |                 <Modal show={show} >
 92 |                     <Modal.Header >
 93 |                         <Modal.Title>Confirmação de Cadastro de Produto</Modal.Title>
 94 |                     </Modal.Header>
 95 |                         <Modal.Body> Olá! O produto {name} foi cadastrado com sucesso </Modal.Body>
 96 |                     <Modal.Footer>
 97 |                         <ButtonBootstrap style={ButtonBootstrapStyle} onClick={closeAndRedirect} >Ok</ButtonBootstrap>
 98 |                     </Modal.Footer>
 99 |                 </Modal>
100 | 
101 |                 {/*casos de erro */}
102 | 
103 |                 <Modal show={show2} onHide={handleClose2}>
104 |                     <Modal.Header closeButton>
105 |                         <Modal.Title>Campos Inválidos</Modal.Title>
106 |                     </Modal.Header>
107 |                         <Modal.Body> {errors.map((error)=>{
108 |                         return (
109 |                             <p>{error.param} é inválido</p>
110 |                         )
111 |                         })} </Modal.Body>
112 |                     <Modal.Footer>
113 |                         <ButtonBootstrap style={ButtonBootstrapStyle} onClick={handleClose2} >OK</ButtonBootstrap>
114 |                     </Modal.Footer>
115 |                 </Modal>
116 |         </div>
117 |   );
118 | }
119 | 
120 | export default ProductRegister;


--------------------------------------------------------------------------------
/src/pages/ProviderRegister/ProviderRegister.js:
--------------------------------------------------------------------------------
  1 | import React, {useContext, useState} from 'react';
  2 | import { useHistory } from 'react-router-dom';
  3 | 
  4 | import { Modal, Button as ButtonBootstrap } from 'react-bootstrap';
  5 | import { ButtonBootstrapStyle } from '../../bootstrapStyle/ButtonBootstrap'
  6 | 
  7 | import Input from "../../Components/Input/Input.js";
  8 | import styles from "./ProviderRegister.module.css";
  9 | import SideHeader from "../../Components/SideHeader/SideHeader";
 10 | import Button from "../../Components/Button/Button";
 11 | 
 12 | import {Context} from '../../SessionContext';
 13 | 
 14 | export default function ProviderRegister(){
 15 |     const {session, handleLoginProvider } = useContext(Context)
 16 |     const history = useHistory()
 17 |     const [provider, setProvider] = useState(0)
 18 | 
 19 |     const [name, setName] = useState()
 20 |     const [cnpj, setCNPJ] = useState()
 21 |     const [phone, setPhone] = useState()
 22 |     const [companyName, setCompanyName] = useState()
 23 |     const [address, setAddress] = useState()
 24 | 
 25 |     const [show, setShow] = useState(false);
 26 |     const handleClose = () => setShow(false);
 27 |     const handleShow = () => setShow(true);
 28 |   
 29 |     const [show2, setShow2] = useState(false);
 30 |     const handleClose2 = () => setShow2(false);
 31 |     const handleShow2 = () => setShow2(true);
 32 |     const [errors, setErrors] = useState([])
 33 | 
 34 |     if(session.client>0 || session.provider>0){
 35 |         history.replace('/')
 36 |       }
 37 | 
 38 | 
 39 |     const submitRegisterProvider = async (event) => {
 40 |         event.preventDefault();
 41 |     
 42 |         const body = {
 43 |           name: name,
 44 |           cnpj: cnpj,
 45 |           phone: phone,
 46 |           company_name: companyName,
 47 |           address: address
 48 |         }
 49 |     
 50 |         const response = await fetch('https://secret-brushlands-49902.herokuapp.com/provider', { method: 'POST',
 51 |                           headers: {'Accept': 'application/json','Content-Type': 'application/json'},
 52 |                           body: JSON.stringify(body), mode: 'cors', cache: 'default' })
 53 |                             .then(data => data.json())
 54 |                             .catch((err)=>{
 55 |                               console.log(err)
 56 |                             })
 57 |         if(response.provider_id>0){
 58 |           setProvider(response.provider_id)
 59 |           handleShow()
 60 |         } else if(response.errors){
 61 |             setErrors(response.errors)
 62 |             handleShow2()
 63 |         }
 64 |       }
 65 | 
 66 |       const logginAndRedirect = () => {
 67 |         handleClose()
 68 |         handleLoginProvider(provider)
 69 |       }
 70 | 
 71 | 
 72 |     return (
 73 |         <div className={styles.body}>
 74 |             <SideHeader />
 75 |             <div className={styles.container}>
 76 |                 <div className={styles.div}>
 77 |                     <h2 className={styles.h2}>
 78 |                         Olá, Fornecedor! <br />
 79 |                         Cadastre-se
 80 |                     </h2>
 81 |                     <form className={styles.form} onSubmit={submitRegisterProvider}>
 82 |                         <Input title="Nome" type="text" name="name" percWidth="100%" setField={setName} />
 83 |                         <Input title="CNPJ" type="text" name="cnpj" percWidth="50%" setField={setCNPJ} />
 84 |                         <Input title="Telefone" type="text" name="phone" percWidth="50%" setField={setPhone} />
 85 |                         <Input title="Razão Social" type="text" name="company_name" percWidth="100%" setField={setCompanyName} />
 86 |                         <Input title="Endereço" type="text" name="address" percWidth="100%" setField={setAddress} />
 87 | 
 88 |                         <Button type='submit' text="Cadastrar" minWidth='250px' marginTop='50px' />
 89 |                     </form>
 90 |                 </div>
 91 |             </div>
 92 |             {/*confirmação de cadastro*/}
 93 |             <Modal show={show} >
 94 |                 <Modal.Header >
 95 |                     <Modal.Title>Confirmação de Cadastro</Modal.Title>
 96 |                 </Modal.Header>
 97 |                     <Modal.Body> Seja bem-vindo {name}! Seu cadastro foi realizado com sucesso! </Modal.Body>
 98 |                 <Modal.Footer>
 99 |                     <ButtonBootstrap style={ButtonBootstrapStyle} onClick={logginAndRedirect} >Ok</ButtonBootstrap>
100 |                 </Modal.Footer>
101 |             </Modal>
102 | 
103 |             {/*casos de erro */}
104 | 
105 |             <Modal show={show2} >
106 |                 <Modal.Header closeButton>
107 |                     <Modal.Title>Campos Inválidos</Modal.Title>
108 |                 </Modal.Header>
109 |                     <Modal.Body> {errors.map((error)=>{
110 |                     return (
111 |                         <p>{error.param} é inválido</p>
112 |                     )
113 |                     })} </Modal.Body>
114 |                 <Modal.Footer>
115 |                     <ButtonBootstrap style={ButtonBootstrapStyle} onClick={handleClose2} >OK</ButtonBootstrap>
116 |                 </Modal.Footer>
117 |             </Modal>
118 |         </div>
119 |         
120 |     )
121 | }


--------------------------------------------------------------------------------
/src/pages/InfoProduct/InfoProduct.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState, useContext} from "react";
  2 | import { useParams, useHistory } from 'react-router-dom'
  3 | 
  4 | import { Modal, Button as ButtonBootstrap } from 'react-bootstrap';
  5 | import { ButtonBootstrapStyle } from '../../bootstrapStyle/ButtonBootstrap'
  6 | 
  7 | import styles from "./InfoProduct.module.css";
  8 | import SideHeader from "../../Components/SideHeader/SideHeader";
  9 | import Button from "../../Components/Button/Button";
 10 | import Textarea from "../../Components/Textarea/Textarea";
 11 | 
 12 | import { Context } from '../../SessionContext'
 13 | 
 14 | function InfoProduct() {
 15 |   const { session } = useContext(Context)
 16 |   const { productID } = useParams();
 17 |   const [data, setData] = useState({});
 18 |   const [image, setImage] = useState('https://crestana.com.br/img/imagens_produto/20190726_214134_1____01%20PRODUTO-SEM-IMAGEM-1000X1000.JPG')
 19 |   const [stock, setStock] = useState(0)
 20 |   const history = useHistory()
 21 | 
 22 |   const [confirmBought, setConfirmBought] = useState(false)
 23 |   const [showFailBought, setShowFailBought] = useState(false)
 24 |   const [showButtons, setShowButtons] = useState(true)
 25 | 
 26 |   const [show, setShow] = useState(false);
 27 |   const handleClose = () => setShow(false);
 28 |   const handleShow = () => setShow(true);
 29 | 
 30 |   useEffect(() => {
 31 |     ( async () => {
 32 |       const data = await fetch(`https://secret-brushlands-49902.herokuapp.com/product/${productID}`).then(data => data.json())
 33 |       setData(data)
 34 |       setStock(data.stock)
 35 |     })()
 36 |   },[productID])
 37 | 
 38 |   useEffect(() => {
 39 |     ( async () => {
 40 |       const data = await fetch(`https://secret-brushlands-49902.herokuapp.com/product/photos/${productID}`).then(data => data.json())
 41 |       if(data.length>0){
 42 |         setImage(data[0].url_product)
 43 |       }    
 44 |     })()
 45 |   },[productID])
 46 | 
 47 |   const submitBuy = (event) => {
 48 |     event.preventDefault()
 49 |     if(session.client===0){
 50 |       history.replace('/login/client')
 51 |     }
 52 |     handleShow()
 53 |   }
 54 | 
 55 |   const purchaseProduct = async () => {
 56 |     setShowButtons(false)
 57 |     const body = {
 58 |       client_id: session.client,
 59 |       product_id: productID
 60 |     }
 61 | 
 62 |     const message = await fetch('https://secret-brushlands-49902.herokuapp.com/purchase', { method: 'POST',
 63 |                       headers: {'Accept': 'application/json','Content-Type': 'application/json'},
 64 |                       body: JSON.stringify(body), mode: 'cors', cache: 'default' })
 65 |                         .then(data => data.json())
 66 |                         .catch((err)=>{
 67 |                           console.log(err)
 68 |                         })
 69 | 
 70 | 
 71 |     if(message.message==='Purchase inserted'){
 72 |       setConfirmBought(true)
 73 |       setStock(stock-1)
 74 |       setTimeout(()=>{
 75 |         setConfirmBought(false)
 76 |         setShowButtons(true)
 77 |         handleClose()
 78 |         history.replace('/')
 79 |       },2000)
 80 |     } else {
 81 |       setShowButtons(true)
 82 |       handleClose()
 83 |       setShowFailBought(true)
 84 |       setTimeout(()=>{
 85 |         setShowFailBought(false)
 86 |       },2000)
 87 |     }
 88 | 
 89 |     
 90 |   }
 91 | 
 92 |   return (
 93 |     <div className={styles.body}>
 94 |       <SideHeader />
 95 |       <div className={styles.container}>
 96 |         <div className={styles.div}>
 97 |           {showFailBought ? <h1>COMPRA NÃO EFETUADA</h1> : null}
 98 |           <h2 className={styles.h2} >{data.name}</h2>
 99 | 
100 |           <img
101 |             className={styles.img}
102 |             src={image}
103 |             alt="Product"
104 |           />
105 | 
106 |           <form className={styles.form} onSubmit={submitBuy}>
107 |             <div className={styles.textarea}>
108 |               <Textarea description={data.description} />
109 |             </div>
110 | 
111 |             <div className={styles.alignment}>
112 |               <h3 className={styles.h3}>Preço em R$</h3>
113 |               <p className={styles.p}>{data.price}</p>
114 | 
115 |               <h3 className={styles.h3}>Qtd Estoque</h3>
116 |               <p className={styles.p}>{stock} </p>
117 | 
118 |               <h3 className={styles.h3}>Avaliação</h3>
119 |               <p className={styles.p}>{data.evaluation} </p>
120 |             </div>
121 | 
122 |             {session.provider>0 ? null : <Button
123 |               type="submit"
124 |               text="Comprar"
125 |               minWidth="50%"
126 |               marginTop="50px"
127 |               
128 |             />}
129 |           </form>
130 |         </div>
131 |       </div>
132 | 
133 |       <Modal show={show} onHide={handleClose}>
134 |         <Modal.Header closeButton>
135 |           <Modal.Title>Confirmação da Compra</Modal.Title>
136 |         </Modal.Header>
137 |             <Modal.Body>{confirmBought ? 'Compra confirmada com sucesso' : 'Você deseja confirmar a compra?' } </Modal.Body>
138 |         <Modal.Footer>
139 |           {showButtons ? (<>
140 |             <ButtonBootstrap style={ButtonBootstrapStyle} onClick={purchaseProduct} >Comprar</ButtonBootstrap>
141 | 
142 |             <ButtonBootstrap style={ButtonBootstrapStyle} onClick={handleClose} >Voltar</ButtonBootstrap>
143 |           </>)    :  null}
144 |           
145 | 
146 |         </Modal.Footer>
147 |       </Modal>
148 | 
149 |     </div>
150 |   );
151 | }
152 | 
153 | export default InfoProduct;
154 | 


--------------------------------------------------------------------------------
/src/pages/ClientRegister/ClientRegister.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useContext } from "react";
  2 | import { useHistory } from 'react-router-dom';
  3 | 
  4 | import { Modal, Button as ButtonBootstrap } from 'react-bootstrap';
  5 | import { ButtonBootstrapStyle } from '../../bootstrapStyle/ButtonBootstrap'
  6 | 
  7 | import Input from "../../Components/Input/Input.js";
  8 | import styles from "./ClientRegister.module.css";
  9 | import SideHeader from "../../Components/SideHeader/SideHeader";
 10 | import Button from "../../Components/Button/Button";
 11 | 
 12 | import {Context} from '../../SessionContext';
 13 | 
 14 | function ClientRegister() {
 15 |   const {session, handleLoginClient } = useContext(Context)
 16 |   const history = useHistory()
 17 |   const [client, setClient] = useState(0)
 18 | 
 19 |   const [firstName, setFirstName] = useState()
 20 |   const [lastName, setLastName] = useState()
 21 |   const [cpf, setCPF] = useState()
 22 |   const [phone, setPhone] = useState()
 23 |   const [email, setEmail] = useState()
 24 |   const [password, setPassword] = useState()
 25 |   const [password2, setPassword2] = useState()
 26 |   const [address, setAddress] = useState()
 27 | 
 28 |   const [show, setShow] = useState(false);
 29 |   const handleClose = () => setShow(false);
 30 |   const handleShow = () => setShow(true);
 31 | 
 32 |   const [show2, setShow2] = useState(false);
 33 |   const handleClose2 = () => setShow2(false);
 34 |   const handleShow2 = () => setShow2(true);
 35 |   const [errors, setErrors] = useState([])
 36 | 
 37 |   if(session.client>0 || session.provider>0){
 38 |     history.replace('/')
 39 |   }
 40 | 
 41 |   const checkPassword = (password, password2) => {
 42 |     return password===password2
 43 |   }
 44 | 
 45 |   const submitRegisterClient = async (event) => {
 46 |     event.preventDefault();
 47 | 
 48 |     if(!checkPassword(password, password2)){
 49 |       console.log('Senhas diferentes')
 50 |       return null
 51 |     }
 52 | 
 53 |     const body = {
 54 |       first_name: firstName,
 55 |       last_name: lastName,
 56 |       email: email,
 57 |       password: password,
 58 |       cpf: cpf,
 59 |       phone: phone,
 60 |       address: address
 61 |     }
 62 | 
 63 |     const response = await fetch('https://secret-brushlands-49902.herokuapp.com/client', { method: 'POST',
 64 |                       headers: {'Accept': 'application/json','Content-Type': 'application/json'},
 65 |                       body: JSON.stringify(body), mode: 'cors', cache: 'default' })
 66 |                         .then(data => data.json())
 67 |                         .catch((err)=>{
 68 |                           console.log(err)
 69 |                         })
 70 |     
 71 |     if(response.client_id>0){
 72 |       setClient(response.client_id)
 73 |       handleShow()
 74 |     } else if(response.errors){
 75 |         setErrors(response.errors)
 76 |         handleShow2()
 77 |     }
 78 | 
 79 |     
 80 |   }
 81 | 
 82 |   const logginAndRedirect = () => {
 83 |     handleClose()
 84 |     handleLoginClient(client)
 85 |   }
 86 | 
 87 |   return (
 88 |     <div className={styles.body}>
 89 |       <SideHeader />
 90 |       <div className={styles.container}>
 91 |         <div className={styles.div}>
 92 |           <h2 className={styles.h2}>
 93 |             Olá, cliente! <br />
 94 |             Cadastre-se
 95 |           </h2>
 96 |           <form className={styles.form} onSubmit={submitRegisterClient}>
 97 |             <Input title="Nome" type="text" name="first_name" percWidth="50%" setField={setFirstName}/>
 98 |             <Input title="Sobrnome" type="text" name="last_name" percWidth="50%" setField={setLastName}/>
 99 |             <Input title="CPF" type="text" name="cpf" percWidth="50%" setField={setCPF} />
100 |             <Input title="Celular" type="text" name="phone" percWidth="50%" setField={setPhone} />
101 |             <Input title="Email" type="email" name="email" percWidth="100%" setField={setEmail} />
102 |             <Input
103 |               title="Senha"
104 |               type="password"
105 |               name="password"
106 |               percWidth="50%"
107 |               setField={setPassword}
108 |             />
109 |             <Input
110 |               title="Confirmação de Senha"
111 |               type="password"
112 |               name="password2"
113 |               percWidth="50%"
114 |               setField={setPassword2}
115 |             />
116 |             <Input
117 |               title="Endereço"
118 |               type="text"
119 |               name="address"
120 |               percWidth="100%"
121 |               setField={setAddress}
122 |             />
123 |             <Button type='submit' text="Cadastrar" minWidth='250px' marginTop='50px' />
124 |           </form>
125 |         </div>
126 |       </div>
127 |       {/*confirmação de cadastro*/}
128 |       <Modal show={show} >
129 |         <Modal.Header >
130 |           <Modal.Title>Confirmação de Cadastro</Modal.Title>
131 |         </Modal.Header>
132 |             <Modal.Body> Olá {firstName}! Seu cadastro foi realizado com sucesso! </Modal.Body>
133 |         <Modal.Footer>
134 |           <ButtonBootstrap style={ButtonBootstrapStyle} onClick={logginAndRedirect} >Ok</ButtonBootstrap>
135 |         </Modal.Footer>
136 |       </Modal>
137 | 
138 |       {/*casos de erro */}
139 | 
140 |       <Modal show={show2} onHide={handleClose2}>
141 |         <Modal.Header closeButton>
142 |           <Modal.Title>Campos Inválidos</Modal.Title>
143 |         </Modal.Header>
144 |             <Modal.Body> {errors.map((error)=>{
145 |               return (
146 |                 <p>{error.param} é inválido</p>
147 |               )
148 |             })} </Modal.Body>
149 |         <Modal.Footer>
150 |           <ButtonBootstrap style={ButtonBootstrapStyle} onClick={handleClose2} >OK</ButtonBootstrap>
151 |         </Modal.Footer>
152 |       </Modal>
153 |     </div>
154 |   );
155 | }
156 | 
157 | export default ClientRegister;
158 | 


--------------------------------------------------------------------------------