qi2Z6GfW

1import React ,{useState,useEffect} from 'react';
2import { Link  } from 'react-router-dom';
3import { FiPower,FiTrash2} from 'react-icons/fi';
4
5import './styles.css';
6
7import api from '../../services/api';
8import logoImg from '../../assets/logo.svg';
9
10
11export default function Profile(){
12    const [incidents,setIncidents] = useState([]);
13
14    const ongId = localStorage.getItem('ongId');
15    const ongName= localStorage.getItem('ongName');
16    useEffect(()=> {
17        api.get('profile',{
18            headers:{
19                Authorization:ongId,
20            }
21        }).then(response => {
22            setIncidents(response.data);
23        })
24
25    },[ongId]);
26
27    return (
28        <div className="profile-container">
29            <header>
30                <img src ={logoImg} alt ="Be the Hero" />
31                <span>Bem vinda, {ongName}</span>
32
33                <Link className="button" to ="/incidents/new" >Cadastrar novo caso </Link>
34                <button type="button">
35                    <FiPower size ={18} color="#E02041"/>
36                </button>
37            </header>
38            <h1>Casos cadastrados</h1>
39            <ul>
40              {incidents.map(incident => (  
41              <li key ={incident.id}>
42                    <strong>CASO:</strong>
43                    <p>{incident.title}</p>
44
45                    <strong>DESCRIÇÃO:</strong>
46                    <p>{incident.description}</p>
47
48                    <strong>VALOR:</strong>
49                    <p>{incident.value}}</p>
50
51                    <button type="button">
52                        <FiTrash2 size={20} color="#a8a8b3" />
53                    </button>
54                </li>
55                ))}
56            </ul>
57        </div>
58    );
59}