Front end developed

gustavosdePaula · Mar 29, 2020 · 3134ff3 · 3134ff3
1 parent 3d8607a
commit 3134ff3
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 86 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -1,87 +1,81 @@
-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>
 
             <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
@@ -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>