108日目②：プロフィールにGitHubのレポジトリを表示する：Displaying Github Repos

2019年07月18日 2019年07月18日

キョウコ

プロフィール画面にGitHubのレポジトリを一覧で表示できるようにしました。具体的には、登録ユーザーがGithubのユーザーネームを入力すれば、一覧でレポジトリの名前と説明欄が表示されるというものです。今回も、新しいファイルProfileGithub.jsを作成しました。

①client/src/components/profile/ProfileGithub.js　新ファイルを作成

今回もReact HooksのuseEffectが大活躍です。そして、登録ユーザーがGitHubのユーザーネームを入力してレポジトリに何もなければスピナーが回ります。レポジトリがある場合は、レポジトリの名前や説明を表示できるようになっており、スターの数、ウォッチャーの数、Forksの数も表示されるようになっています。

（Profile.jsへのimportは前回のレッスンで完了しています。）

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Spinner from "../layout/Spinner";
import { getGithubRepos } from "../../actions/profile";

const ProfileGithub = ({ username, getGithubRepos, repos }) => {
  useEffect(() => {
    getGithubRepos(username);
  }, [getGithubRepos]);

  return (
    <div className='profile-github'>
      <h2 className='text-primary my-1'> Github Repos</h2>
      {repos === null ? (
        <Spinner />
      ) : (
        repos.map(repo => (
          <div key={repo.id} className='repo bg-white p-1 my-1'>
            <div>
              <h4>
                <a
                  href={repo.html_url}
                  target='_blank'
                  rel='noopener noreferrer'
                >
                  {repo.name}
                </a>
              </h4>
              <p>{repo.description}</p>
            </div>
            <div>
              <ul>
                <li className='badge badge-primary'>
                  Stars: {repo.stargazers_count}
                </li>
                <li className='badge badge-dark'>
                  Watchers: {repo.watchers_count}
                </li>
                <li className='badge badge-light'>Forks: {repo.forks_count}</li>
              </ul>
            </div>
          </div>
        ))
      )}
    </div>
  );
};

ProfileGithub.propTypes = {
  getGithubRepos: PropTypes.func.isRequired,
  repos: PropTypes.array.isRequired,
  username: PropTypes.string.isRequired
};

const mapStateToProps = state => ({
  repos: state.profile.repos
});

export default connect(
  mapStateToProps,
  { getGithubRepos }
)(ProfileGithub);