Added modal with user name

src/App.css

@@ -37,6 +37,22 @@
  font-weight: bold;
 }
 
+.modal {
+ display: block;
+ opacity: 0;
+ visibility: hidden;
+ background: rgba(0,0,0, .4);
+}
+
+.modal.show {
+ opacity: 1;
+ visibility: visible;
+}
+
+.modal .modal-header {
+ border-bottom: 0;
+}
+
 
 .spinner {
  margin: 100px auto;

src/App.js

@@ -1,13 +1,17 @@
 import React from 'react';
 
 import Routes from './routes/router';
+import ModalContextProvider from './context/modalContext';
+
 
 import './App.css';
 
 function App() {
  return (
  <div className="App">
- <Routes />
+ <ModalContextProvider>
+ <Routes />
+ </ModalContextProvider>
  </div>
  );
 }

src/api/endPoints.js

@@ -3,10 +3,22 @@ import { config } from '../config/config';
 import { http } from '../http';
 
 
-const searchUser = async user => {
- return await to(
+const searchUser = async user => await to(
  http.get(`search/users?q=${user}&access_token=${config.appToken}`)
  );
-}
 
-export { searchUser };
+const getUser = async userName =>
+ await to(
+ http.get(
+ `/users/${userName}`
+ )
+ );
+
+const getUserRepos = async userName =>
+ await to(
+ http.get(
+ `https://api.github.com/users/${userName}/repos?per_page=10&sort=created:asc`
+ )
+ );
+
+export { searchUser, getUser, getUserRepos };

src/components/Modal.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Loader from '../components/Loader';
+
+const Modal = (props) => {
+ return (
+ <div className={props.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} >
+ <span aria-hidden="true">&times;</span>
+ </button>
+ </div>
+ <div className="modal-body">
+ {props.loading ? <Loader /> : props.children}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default Modal;

src/components/UserCard.js

@@ -21,7 +21,12 @@ const UserCard = (props) => {
  Public Profile
  </a>
 
- <button className="btn btn-primary btn-sm">View Details</button>
+ <button
+ className="btn btn-primary btn-sm"
+ onClick={props.onClickUser}
+ >
+ View Details
+ </button>
  </div>
  </div>
  </div>

src/components/UserDetails.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const UserDetails = (props) => {
+ const style = {
+ background: `url(${props.avatar}) center center no-repeat`,
+ backgroundSize: 'cover'
+ };
+
+ return (
+ <div className="user-details">
+ <div className="basic-info">
+ <div className="avatar" style={style}></div>
+ <div className="details">
+ <h3>{props.name}</h3>
+ <p className="text-mutes">@{props.login}</p>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default UserDetails;

src/context/ModalContext.js

@@ -5,12 +5,7 @@ export const ModalContext = createContext();
 const ModalContextProvider = props => {
  const [show, setShow] = useState(false);
 
- const openModal = () => {
- console.log("open modal");
- console.log(show);
- setShow(true);
- };
-
+ const openModal = () => setShow(true);
  const closeModal = () => setShow(false);
 
  return (

src/pages/Home.js

@@ -1,57 +1,87 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 
-import { searchUser } from "../api/endPoints";
+import { searchUser, getUser, getUserRepos } from "../api/endPoints";
+
+import { ModalContext } from "../context/modalContext";
 
 import WithLoading from "../hoc/WithLoading";
 import Search from "../components/Search";
 import UserCard from "../components/UserCard";
+import Modal from '../components/Modal';
+import UserDetails from '../components/UserDetails';
 
 const Home = () => {
- const [userName, setUserName] = useState("");
- const [users, setUsers] = useState([]);
- const [loading, setLoading] = useState(false);
+ const [text, setText] = useState('');
+ const [state, setState] = useState({
+ loading: false,
+ userLoading: false,
+ users: [],
+ user: {},
+ repos: []
+ })
+
+ const { show, openModal, closeModal } = useContext(ModalContext);
 
  let err, response;
 
- const onChangeInput = e => setUserName(e.target.value);
+ const onChangeInput = e => setText(e.target.value);
 
- const getUser = async () => {
- setLoading(true);
- if (userName === "") {
- setLoading(false);
- return setUsers([]);
+ const searchUsers = async () => {
+ setState({ ...state, loading: true });
+ if (state.text === "") {
+ return setState({...state, users: [], loading: false});
  }
 
- [err, response] = await searchUser(userName);
+ [err, response] = await searchUser(text);
  if (err) return err.resopnse;
 
- console.log(response.data);
+ setState({ ...state, users: response.data.items, loading: false });
+ };
+
+ const singleUser = async user => {
+ openModal();
+ setState({ ...state, userLoading: true });
 
- setUsers(response.data.items);
- setLoading(false);
+ const [errorUser, responseUser] =
+ await getUser(user.login);
+
+ const [errorRepos, responseRepos] = await getUserRepos(user.login);
+
+ if (errorUser || errorRepos) return;
+ setState({
+ ...state,
+ user: responseUser.data,
+ repos: responseRepos.data,
+ userLoading: false
+ });
  };
 
  return (
- <div className="container pt-5">
+ <div className="container pt-5 pb-5">
  <Search
- inputValue={userName}
+ inputValue={text}
  onChange={onChangeInput}
- onKeyUp={getUser}
+ onKeyUp={searchUsers}
  />
 
- <WithLoading loading={loading}>
+ <WithLoading loading={state.loading}>
  <div className="card-holder row pt-5">
- {users &&
- users.map(user => (
+ {state.users &&
+ state.users.map(user => (
  <UserCard
  key={user.id}
  name={user.login}
  avatar={user.avatar_url}
  publicUrl={user.html_url}
+ onClickUser={() => singleUser(user)}
  />
  ))}
  </div>
  </WithLoading>
+
+ <Modal show={show} close={closeModal} loading={state.userLoading}>
+ <UserDetails name={state.user.name}/>
+ </Modal>
  </div>
  );
 };