A
A
AntonHPL2021-05-24 16:25:50
React
AntonHPL, 2021-05-24 16:25:50

How to display a picture of a GitHub user?

An error in the code. It is necessary to display the picture (and under it - the name) of the GitHub user. User search - through the form field. Repositories with pagination are already displayed depending on whose nickname is entered in the form field. Missing name and picture.

app.js:

import React, { useState, useEffect } from 'react';
import Posts from './components/Posts';
import Pagination from './components/Pagination';
import Info from './components/Info'
import axios from 'axios';
import './App.css';

const App = () => {
  const [repos, setRepos] = useState([]);
  const [imageSource, setImageSource] = useState('');
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(10);


  async function fetchRepos(username) {
    setLoading(true);

    let result = [];
    let result2 = '';

    try {
      result = (await axios.get(`https://api.github.com/users/${username}/repos`)).data;
      result2 = (await axios.get(`https://api.github.com/users/${username}`)).data.avatar_url;
    } catch(e) {
      console.error(e);
    }
    setRepos(result);
    setImageSource(result2);
    setLoading(false);
  }

  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = repos.slice(indexOfFirstPost, indexOfLastPost);

  const paginate = pageNumber => setCurrentPage(pageNumber);

  return (
    <div className='container mt-5'>
      <h1 className='text-primary mb-3'>My Blog</h1>
      <Info onSearch={fetchRepos} source={imageSource} />
      <Posts posts={currentPosts} loading={loading} />
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={repos.length}
        paginate={paginate}
      />
    </div>
  );
};

export default App;


Info.js:

import React from 'react';

function Info({onSearch}, props) {
  const [ searchValue, setSearchValue ] = React.useState('');

  function onSubmit(e) {
    e.preventDefault();
    onSearch(searchValue);
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={searchValue}
        onChange={e => setSearchValue(e.target.value)}
      />
      <button>Найти</button>
      <img src={props.source} alt="user" />
    </form>
  )
}

export default Info;

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question