RepoCard component added

public/index.html

@@ -12,7 +12,7 @@
  <link rel="apple-touch-icon" href="logo192.png" />
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
- <link href="https://fonts.googleapis.com/css?family=Nunito:400,600&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
  <!--
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.css

@@ -40,6 +40,7 @@
  display: block;
  opacity: 0;
  visibility: hidden;
+ overflow: auto;
  background: rgba(0,0,0, .4);
 }
 
@@ -71,6 +72,10 @@
  padding-left: 20px;
 }
 
+.repos h4 {
+ font-weight: bold;
+}
+
 
 .spinner {
  margin: 100px auto;

src/api/endPoints.js

@@ -17,7 +17,7 @@ const getUser = async userName =>
 const getUserRepos = async userName =>
  await to(
  http.get(
- `https://api.github.com/users/${userName}/repos?per_page=10&sort=created:asc`
+ `https://api.github.com/users/${userName}/repos?sort=created:asc`
  )
  );
 

src/components/Modal.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import Loader from '../components/Loader';
 
-const Modal = (props) => {
+const Modal = ({show, close, loading, children}) => {
  return (
- <div className={props.show ? 'modal fade show' : 'modal fade'}>
+ <div className={show ? 'modal fade show' : 'modal fade'}>
  <div className="modal-dialog modal-lg">
  <div className="modal-content">
- <div className="modal-header">
- <button type="button" className="close" onClick={props.close} >
+ <div className="modal-header pb-0">
+ <button type="button" className="close" onClick={close} >
  <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div className="modal-body">
- {props.loading ? <Loader /> : props.children}
+ {loading ? <Loader /> : children}
  </div>
  </div>
  </div>

src/components/RepoCard.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+const RepoCard = ({ name, html_url, description, language }) => {
+ return (
+ <div className="card mb-3 bg-light">
+ <div className="card-body">
+ <h4>{name}</h4>
+ <p className="mb-1">
+ <b>Repo Link: </b>
+ <a href={html_url} target="_blank" rel="noopener noreferrer">
+ {html_url}
+ </a>
+ </p>
+
+ {description ? (
+ <p className="card-text mb-1">
+ <b>Description: </b>
+ {description}
+ </p>
+ ) : null}
+
+ {language ? (
+ <p className="mb-0">
+ <b>Language: </b>
+ <span className="badge badge-dark">{language}</span>
+ </p>
+ ) : null}
+ </div>
+ </div>
+ );
+};
+
+export default RepoCard;

src/components/UserCard.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-const UserCard = (props) => {
+const UserCard = ({name, publicUrl, onClickUser, avatar}) => {
  const style = {
- background: `url(${props.avatar}) center center no-repeat`,
+ background: `url(${avatar}) center center no-repeat`,
  backgroundSize: 'cover'
  };
 
@@ -11,9 +11,9 @@ const UserCard = (props) => {
  <div className="user-card d-flex">
  <div className="avatar" style={style}></div>
  <div className="card-details d-flex flex-column align-items-start">
- <h5 className="pb-1">{props.name}</h5>
+ <h5 className="pb-1">{name}</h5>
  <a
- href={props.publicUrl}
+ href={publicUrl}
  target="_blank"
  rel="noopener noreferrer"
  className="btn btn-dark btn-sm mb-1"
@@ -23,7 +23,7 @@ const UserCard = (props) => {
 
  <button
  className="btn btn-primary btn-sm"
- onClick={props.onClickUser}
+ onClick={onClickUser}
  >
  View Details
  </button>

src/components/UserDetails.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import RepoCard from './RepoCard';
 
 const UserDetails = (props) => {
  const style = {
@@ -41,6 +42,19 @@ const UserDetails = (props) => {
  </div>
  </div>
  </div>
+
+ <div className="repos pt-4">
+ {props.repos.map(repo => (
+ <RepoCard
+ key={repo.node_id}
+ name={repo.name}
+ html_url={repo.html_url}
+ description={repo.description}
+ language={repo.language}
+ />
+
+ ))}
+ </div>
  </div>
  );
 }

src/pages/Home.js

@@ -90,6 +90,7 @@ const Home = () => {
  followers={user.followers}
  following={user.following}
  public_repos={user.public_repos}
+ repos={repos}
  />
  </Modal>
  </div>