From 3134ff3343ea0fc7ae25852459d2764717c3dfda Mon Sep 17 00:00:00 2001
From: "Gustavo S. de Paula" <gustavosdepaula0@gmail.com>
Date: Sun, 29 Mar 2020 12:43:51 -0300
Subject: [PATCH] Front end developed

---
 backend/src/controllers/ProfileController.js |   2 +-
 backend/src/database/db.sqlite               | Bin 28672 -> 28672 bytes
 frontend/src/global.css                      |   4 +-
 frontend/src/pages/Logon/index.js            |  33 ++++-
 frontend/src/pages/NewIncident/index.js      |  58 ++++++++-
 frontend/src/pages/Profile/index.js          | 120 +++++++++----------
 frontend/src/pages/Register/index.js         |  74 ++++++++++--
 frontend/src/services/api.js                 |   7 ++
 8 files changed, 212 insertions(+), 86 deletions(-)
 create mode 100644 frontend/src/services/api.js

diff --git a/backend/src/controllers/ProfileController.js b/backend/src/controllers/ProfileController.js
index d95fc66..5c64f4b 100644
--- a/backend/src/controllers/ProfileController.js
+++ b/backend/src/controllers/ProfileController.js
@@ -4,7 +4,7 @@ module.exports = {
 
     async index (req, res) {
         const ong_id = req.headers.authorization
-
+        console.log(ong_id)
         const incidents = await connection('incidents')
             .where('ong_id', ong_id)
             .select('*')        
diff --git a/backend/src/database/db.sqlite b/backend/src/database/db.sqlite
index 930031aa517062fc4d035440201c62396e280f8a..beab6d50f7c8506a53b608b42a02993135c5588f 100644
GIT binary patch
delta 650
zcmZp8z}WDBae_3X+e8^>Mz@U#h5C#Nn=k1b3GlG+{bAtW#b3<t!1rgfpuiixdM6f6
zSy^puc|it-G@}%g6idTIzx=X91^>MCkksOmREH7}sh6CeYhr3<ZeeL)X<=?=YGP~>
zoS3f=kXV|N9~@xF%qc6bEh!2#!`#r^GS$SwI3*)7B^|64WI$?(UVd_}iHVtsxk*M^
zMp|)!D-%$Qv96*3P>-pRd5VRhaU$5h$rt_gC-3t2;$h)G%fSDf{}%rj{<E6}4fgWa
z^DxUY!raIL;=n9p2614fFmW@>a;6z2rzE9Vr1A2`GBEKvG4ML^-{y595vud@@O<RC
z#sCGIeG<BOSb!Yq$%(n*xET_YopYst(oA(wbxa*FMlOsI1Y?-P7&0&hBb34T48}MO
zV{CvirotFiFh)F#;R0i5!Weu|2E%6<;|7ee7sglwW3<B<IWR^bh+ziwwwbUrqpVY6
qic4xqVorv#0vm(0GPA5per8HaekL$ZGg2~&Q;JhE3Yu5Jf*$~9b)1y|

delta 395
zcmXxYy-vbl6o>Kml~O@^&Y>tm`6>&E8-|3$I7;H+f;S*RB`k!&4L2rdNf}wV0Y1{L
z;RbMYz?DH3N5YOI<iGu%r@z+ywf@ZN(jZsUrFrwMtX==RT#1`n0wsZO7iZ!H^@l_6
zl<a)_`cLj-p?tJmd2PM4ZrY@jDp)HeU$T*@4CP%KQj;qo-trGGc+4N%;YY4=hW7MJ
zOPY{JJ$mwQn<L9`TvK_^-IU=JfIN^p!n^Bc4JU)^0BIlvTmnhp0yqZ}fDOa}0T>{_
W0%E`!5CtN@DPRI&zyMBw&=LP%uvn!4

diff --git a/frontend/src/global.css b/frontend/src/global.css
index 9476253..692ec42 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -21,7 +21,7 @@ input, button, textarea {
 form input {
     width: 100%;
     height: 60px;
-    color: #3333;
+    color: rgba(146, 138, 138);
     border: 1px solid #ececd6;
     border-radius: 8px;
     padding: 0 24px
@@ -30,7 +30,7 @@ form textarea {
     width: 100%;
     min-height: 140px;
     height: 60px;
-    color: #3333;
+    color: rgba(146, 138, 138);
     border: 1px solid #ececd6;
     border-radius: 8px;
     padding: 16px 24px;
diff --git a/frontend/src/pages/Logon/index.js b/frontend/src/pages/Logon/index.js
index c85b1bc..b6a53c7 100644
--- a/frontend/src/pages/Logon/index.js
+++ b/frontend/src/pages/Logon/index.js
@@ -1,20 +1,45 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {FiLogIn} from 'react-icons/fi';
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 
 import './styles.css';
 
+import api from '../../services/api'
+
 import heroesImg from '../../assets/heroes.png'
 import logoImg from '../../assets/logo.svg'
 
 export default function Logon(){
+
+    const [id, set_id] = useState('');
+    const history = useHistory()
+
+    async function handleLogin (e) {
+        e.preventDefault();
+
+        try {
+            const response = await api.post('/session',{id})
+            
+            localStorage.setItem('ongId', id);
+            localStorage.setItem('ongName', response.data.name);
+            history.push('/profile')
+            
+        } catch (error) {
+            alert(`Erro ao realizar login. ${error}`)
+        }
+    }
     return(
         <div className="logon-container">
             <section className="form">
                 <img src={logoImg} alt="Be The Hero"></img>
-                <form>
+                <form onSubmit={handleLogin}>
                     <h1>Faça seu login</h1>
-                    <input placeholder="Sua ID"></input>
+                    <input 
+                        placeholder="Sua ID"
+                        value={id}
+                        onChange={e => set_id(e.target.value)}
+
+                    ></input>
                     <button className="button" type="submit">Entrar</button>            
                     <Link className="back-link" to="/register">
                         <FiLogIn size={16} color="#e02041"></FiLogIn>
diff --git a/frontend/src/pages/NewIncident/index.js b/frontend/src/pages/NewIncident/index.js
index 946a02d..6f0539d 100644
--- a/frontend/src/pages/NewIncident/index.js
+++ b/frontend/src/pages/NewIncident/index.js
@@ -1,13 +1,47 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {FiArrowLeft} from 'react-icons/fi';
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 
 import './styles.css';
 
 import heroesImg from '../../assets/heroes.png'
 import logoImg from '../../assets/logo.svg'
 
+import api from '../../services/api'
+
 export default function NewIncident(){
+
+    const history = useHistory();
+
+    const ongId = localStorage.getItem('ongId');
+
+    const [title, set_title] = useState('')
+    const [description, set_description] = useState('')
+    const [value, set_value] = useState('')
+
+    async function handleNewincident (e) {
+        e.preventDefault();
+
+        const data = {
+            title,
+            description,
+            value
+        }
+
+        try {
+            await api.post('/incidents', data, {
+                headers: {
+                    Authorization: ongId
+                }
+            } )
+            history.push('/profile')
+        } catch (error) {
+            alert(`Erro ao cadastrar novo caso. ${error}`)
+        }
+        
+
+    }
+
     return(
         <div className="new-incident-container">
         <div className="content">
@@ -21,10 +55,22 @@ export default function NewIncident(){
                 </Link>
             </section>
             
-            <form>                   
-                <input placeholder="Título do Caso"></input>
-                <textarea  placeholder="Descrição"/>
-                <input type="number" placeholder="Valor em reais"/>
+            <form onSubmit={handleNewincident}>                   
+                <input 
+                    placeholder="Título do Caso"
+                    value={title}
+                    onChange={e => set_title(e.target.value)}
+                ></input>
+                <textarea 
+                    placeholder="Descrição"
+                    value={description}
+                    onChange={e => set_description(e.target.value)}
+                />
+                <input 
+                    type="number" placeholder="Valor em reais"
+                    value={value}                    
+                    onChange={e => set_value(e.target.value)}
+                />
 
         
                 <button className="button" type="submit">Cadastrar</button>            
diff --git a/frontend/src/pages/Profile/index.js b/frontend/src/pages/Profile/index.js
index 3a22c31..01e3757 100644
--- a/frontend/src/pages/Profile/index.js
+++ b/frontend/src/pages/Profile/index.js
@@ -1,21 +1,58 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 
 import logoImg from '../../assets/logo.svg'
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 import {FiPower} from 'react-icons/fi'
 import {FiTrash2} from 'react-icons/fi'
 
 import './styles.css'
 
+import api from '../../services/api'
+
 export default function Profile () {
+    
+    const history = useHistory()
+    const [incidents, set_incidents] = useState([]);
+
+    const ongName = localStorage.getItem('ongName');
+    const ongId = localStorage.getItem('ongId');
+
+    useEffect(() => {
+        api.get('profile', {
+            headers: {
+                Authorization: ongId,
+            }
+        }).then(response => {
+            set_incidents(response.data)
+        })
+    }, [ongId])
+
+    async function handleDelete (id) {
+        try {
+          await api.delete(`/incidents/${id}`, {
+              headers: {
+                  Authorization: ongId,
+              }
+          })
+          set_incidents(incidents.filter(incident => incident.id != id))  
+        } catch (error) {
+            alert(`Erro ao deletar o caso. ${error}`)
+        }
+    }
+    
+    function handleLogout (){
+        localStorage.clear();
+        history.push('/');
+    }
+
     return (
         <div className="profile-container">
             <header>
                 <img src={logoImg} alt="Logo"/>
-                <span>Bem-Vinda, ONG</span>
+                <span>Bem-Vinda, {ongName}</span>
 
                 <Link className="button" to="/incidents/new">Cadastrar novo caso</Link>
-                <button>
+                <button onClick={handleLogout}>
                     <FiPower size={18} color="#e02041"></FiPower>
                 </button>
             </header>
@@ -23,65 +60,22 @@ export default function Profile () {
             <h1>Casos Cadastrados</h1>
 
             <ul>
-                <li>
-                    <strong>CASO:</strong>
-                    <p>Caso teste</p>
-
-                    <strong>DESCRIÇÃO</strong>
-                    <p>Descrição</p>
-
-                    <strong>VALOR</strong>
-                    <p>R$ 10</p>
-
-                    <button>
-                        <FiTrash2 size={20} color="#a8a8b3"></FiTrash2>
-                    </button>
-                </li>
-
-                <li>
-                    <strong>CASO:</strong>
-                    <p>Caso teste</p>
-
-                    <strong>DESCRIÇÃO</strong>
-                    <p>Descrição</p>
-
-                    <strong>VALOR</strong>
-                    <p>R$ 10</p>
-
-                    <button>
-                        <FiTrash2 size={20} color="#a8a8b3"></FiTrash2>
-                    </button>
-                </li>
-
-                <li>
-                    <strong>CASO:</strong>
-                    <p>Caso teste</p>
-
-                    <strong>DESCRIÇÃO</strong>
-                    <p>Descrição</p>
-
-                    <strong>VALOR</strong>
-                    <p>R$ 10</p>
-
-                    <button>
-                        <FiTrash2 size={20} color="#a8a8b3"></FiTrash2>
-                    </button>
-                </li>
-
-                <li>
-                    <strong>CASO:</strong>
-                    <p>Caso teste</p>
-
-                    <strong>DESCRIÇÃO</strong>
-                    <p>Descrição</p>
-
-                    <strong>VALOR</strong>
-                    <p>R$ 10</p>
-
-                    <button>
-                        <FiTrash2 size={20} color="#a8a8b3"></FiTrash2>
-                    </button>
-                </li>
+                {incidents.map(incident => (
+                    <li key={incident.id}>
+                        <strong>CASO:</strong>
+                        <p>{incident.title}</p>
+
+                        <strong>DESCRIÇÃO</strong>
+                        <p>{incident.description}</p>
+
+                        <strong>VALOR</strong>
+                        <p>{Intl.NumberFormat('pt-br', {style: 'currency', currency: "BRL"}).format(incident.value)}</p>
+
+                        <button onClick={() => handleDelete(incident.id)}>
+                            <FiTrash2 size={20} color="#a8a8b3"></FiTrash2>
+                        </button>
+                    </li>
+                ))}
             </ul>
         </div>
     )
diff --git a/frontend/src/pages/Register/index.js b/frontend/src/pages/Register/index.js
index 14d73da..110a716 100644
--- a/frontend/src/pages/Register/index.js
+++ b/frontend/src/pages/Register/index.js
@@ -1,14 +1,48 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {FiArrowLeft} from 'react-icons/fi';
 
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 
 import './styles.css';
 
-import heroesImg from '../../assets/heroes.png'
+import api from '../../services/api'
+
+
 import logoImg from '../../assets/logo.svg'
 
 export default function Register(){
+
+    const [name, set_name] = useState('');
+    const [email, set_email] = useState('');
+    const [whatsapp, set_whatsapp] = useState('');
+    const [city, set_city] = useState('');
+    const [uf, set_uf] = useState('');
+    
+    const history = useHistory();
+
+
+    async function handleRegister(e) {
+        e.preventDefault()
+
+        const data = {
+            name,
+            email,
+            whatsapp,
+            city,
+            uf
+        }
+
+        
+
+        try {
+            const response = await api.post('ongs', data);
+            alert(`Seu cadastro foi realizado com sucesso! Sua ID é: ${response.data.id}`)
+            history.push('/');
+        } catch (error) {
+            alert(`Erro no cadastro. ${error}`)
+        }
+    }
+
     return(
         <div className="register-container">
             <div className="content">
@@ -18,18 +52,38 @@ export default function Register(){
                     <p>Faça seu cadastro</p>
                     <Link className="back-link" to="/">
                         <FiArrowLeft size={16} color="#e02041"></FiArrowLeft>
-                        Não tenho Cadastro
+                        Voltar para home
                     </Link>
                 </section>
                 
-                <form>                   
-                    <input placeholder="Nome da ONG"></input>
-                    <input type="email" placeholder="E-mail"/>
-                    <input type="number" placeholder="Whatsapp"/>
+                <form onSubmit={handleRegister}>                   
+                    <input 
+                        placeholder="Nome da ONG" 
+                        value={name}
+                        onChange={e => set_name(e.target.value)}
+                    />
+                    <input 
+                        type="email" placeholder="E-mail"
+                        value={email}
+                        onChange={e => set_email(e.target.value)}
+                    />
+                    <input 
+                        type="number" placeholder="Whatsapp"
+                        value={whatsapp}
+                        onChange={e => set_whatsapp(e.target.value)}
+                    />
 
                     <div className="input-group">
-                        <input type="text" placeholder="Cidade"/>
-                        <input type="text" placeholder="UF" style={{width:80}}/>
+                        <input 
+                            type="text" placeholder="Cidade"
+                            value={city}
+                            onChange={e => set_city(e.target.value)}
+                        />
+                        <input 
+                            type="text" placeholder="UF" style={{width:80}}
+                            value={uf}
+                            onChange={e => set_uf(e.target.value)}    
+                        />
                     </div>
                     <button className="button" type="submit">Cadastrar</button>            
                     
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
new file mode 100644
index 0000000..c53aa81
--- /dev/null
+++ b/frontend/src/services/api.js
@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+const api = axios.create({
+    baseURL: "http://localhost:3333",
+})
+
+export default api;
\ No newline at end of file