Consumindo API do github usando o Axios e Nextjs - Parte 2

Olá, seja muito bem vindo(a), agora vamos consumir a API do github e estilizar o nosso card, lembrando que após isso iremos trabalhar em uma forma de criar um input para mudar as informações do card usando nicknames.

Primeiro vamos importar o useState do React e o nosso arquivo api-github.js dentro do nosso arquivo principal acima da nossa função Home.

import React, { useEffect, useState } from "react";
import api from "../src/services/api-github";

Após isso, dentro da função de Home, acima do return, adicionamos uma constante com o useState para controlar o estado dos componentes que irão receber as informações vindas da API.

const [user, setUser] = useState();

Abaixo da constante usaremos o useEffect que irá receber uma função para pegar os dados na API. A primeira linha com o nome api, passa o conteúdo da nossa constante no arquivo api-github.js. O get tem o restante do link de acesso, sendo que estamos indo para users e buscando o usuário com o nickname fransilva0, no caso meu perfil. Ainda temos um tratamento de erro para caso exista algum problema ao pegar os dados.

useEffect(() => {
api
 .get("/users/fransilva0")
 .then((response) => setUser(response.data))
 .catch((err) => {
  console.error("ops! ocorreu um erro" + err);
 });
 }, []);

Por fim, precisamos mostrar os dados que queremos na tela, primeiro vamos adicionar tags dentro da tag interna do card. Lembrando que queremos a imagem de perfil, o nome, o nickname e a bio. Após construir as tags, vamos estilizar elas com o css, se precisar, lembre de usar classes como fizemos nos cards.

<>
 <div className="card-after">
  <div className="card">
   <img src={user?.avatar_url} />
   <p>{user?.name}</p>
   <p>{user?.login}</p>
   <p>{user?.bio}</p>
  </div>
 </div>

 <style jsx>{`
  * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
  }
  .card-after {
   background: linear-gradient(to left, #2bf791 0%, #53b0ea 100%);
   width: 290px;
   height: 354px;
   padding: 5px;
   border-radius: 1rem;
  }
  .card {
   background: #000;
   width: 280px;
   height: 344px;
   padding: 10px;
   border-radius: 1rem;
   color: #fff;
   text-align: center;
  }

  img {
   width: 10rem;
   border-radius: 5rem;
   margin-bottom: 0.5rem;
  }

  p {
   margin-bottom: 0.5rem;
  }
 `}</style>
</>

Por fim, teremos esse código final dentro do return, dentro das tags usamos o user para pegar as informações, esse ? ao lado dele seria para verificar se o retorno foi true ou false, sendo true ele nos mostra a informação que queremos, para isso usamos após o ponto o nome da key que tem o valor que precisamos. 

Bom, agora temos o nosso card com as informações pegas da API do github, de forma simples. Deixo um abraço e até o próximo artigo. 

Artigo Original: https://francileudo-frontend.blogspot.com/2022/11/consumindo-api-do-github-usando-o-axios_2.html