DevList

gistfile1.txt

import React, { useEffect, useState } from 'react';
import { FiEdit, FiXCircle } from 'react-icons/fi';

import { Container, DevContainer, Dev, Info, Techs, Actions } from './styles';
import api from '../../../services/api';

type Technologies = any[];

interface DevelopersData {
  id: number;
  name: string;
  email: string;
  age: number;
  url_linkedin: string;
  technologies: Technologies;
}

const DevList: React.FC = () => {
  const [developers, setDevelopers] = useState<DevelopersData[]>([]);

  const getDevelopers = async () => {
    await api.get('/developers').then(response => {
      setDevelopers(response.data);
    });
  };

  useEffect(() => {
    getDevelopers();
  }, [developers]);

  console.log(developers);

  return (
    <Container>
      <DevContainer>
        {developers.map(developer => (
          <Dev key={developer.id}>
            <Info>
              <h1>{developer.name}</h1>
              <p>{developer.email}</p>
              <p>
                {developer.age}
                <span> anos</span>
              </p>
            </Info>
            <Techs>
              {developer.technologies.map(techs => (
                <span key={techs.id}>{techs.name}</span>
              ))}
            </Techs>
            <Actions>
              <button type="button">
                <FiEdit size={18} />
              </button>
              <button type="button">
                <FiXCircle size={18} />
              </button>
            </Actions>
          </Dev>
        ))}
      </DevContainer>
    </Container>
  );
};

export default DevList;