Load more button

Author: thenamankumar

src/App.js

@@ -1,31 +1,68 @@
 import React from 'react';
 import Search from './components/Search';
 import UserCard from './components/UserCard';
+import RepoCard from './components/RepoCard';
+
+const PAGE_SIZE = 30;
 
 class App extends React.Component {
   state = {
     user: null,
-    error: null,
+    repos: [],
+    userDataError: null,
     loading: false,
+    page: 1,
   };
 
   fetchUserData = async username => {
+    const res = await fetch(`https://api.github.com/users/${username}`);
+    if (res.ok) {
+      const data = await res.json();
+
+      return { data };
+    }
+
+    const error = (await res.json()).message;
+
+    return { error };
+  };
+
+  fetchRepos = async username => {
+    const { page } = this.state;
+    const res = await fetch(
+      `https://api.github.com/users/${username}/repos?page=${page}&per_page=${PAGE_SIZE}`,
+    );
+    if (res.ok) {
+      const data = await res.json();
+
+      return { data, page: page + 1 };
+    }
+
+    const error = (await res.json()).message;
+
+    return { error };
+  };
+
+  fetchData = async username => {
     this.setState({ loading: true }, async () => {
       try {
-        const res = await fetch(`https://api.github.com/users/${username}`);
-        if (res.ok) {
-          const data = await res.json();
+        const [user, repos] = await Promise.all([
+          this.fetchUserData(username),
+          this.fetchRepos(username),
+        ]);
 
+        if (user.data !== undefined && repos.data !== undefined) {
           return this.setState({
-            user: data,
+            user: user.data,
+            repos: repos.data,
+            page: repos.page,
             loading: false,
           });
         }
 
-        const error = (await res.json()).message;
-
         this.setState({
-          error,
+          userDataError: user.error,
+          reposError: repos.error,
           loading: false,
         });
       } catch (err) {
@@ -37,18 +74,49 @@ class App extends React.Component {
     });
   };
 
+  loadMore = async () => {
+    const { data, page } = await this.fetchRepos(this.state.user.login);
+
+    if (data)
+      this.setState(state => ({
+        repos: [...state.repos, ...data],
+        page,
+      }));
+  };
+
   render() {
-    const { error, loading, user } = this.state;
+    const {
+      userDataError,
+      reposError,
+      loading,
+      user,
+      repos,
+      page,
+    } = this.state;
 
     return (
       <div>
-        <Search fetchData={this.fetchUserData} />
+        <Search fetchData={this.fetchData} />
         <div className="container">
           <div className="text-center pt-5">
             {loading && <p>Loading...</p>}
-            {error && <p className="text-danger">{error}</p>}
+            {userDataError && <p className="text-danger">{userDataError}</p>}
           </div>
-          {!loading && !error && user && <UserCard user={user} />}
+          {!loading && !userDataError && user && <UserCard user={user} />}
+          {reposError && <p className="text-danger">{reposError}</p>}
+
+          {!loading &&
+            !reposError &&
+            repos.map(repo => <RepoCard key={repo.id} repo={repo} />)}
+
+          {!loading &&
+            !userDataError &&
+            user &&
+            (page - 1) * PAGE_SIZE < user.public_repos && (
+              <button className="btn btn-success" onClick={this.loadMore}>
+                Load More
+              </button>
+            )}
         </div>
       </div>
     );

src/components/RepoCard.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const RepoCard = ({ repo }) => (
+  <div className="card mb-4">
+    <div className="card-body">
+      <a href={repo.html_url} target="_blank">
+        <h3>{repo.full_name}</h3>
+
+        <p>
+          <strong>Stars:</strong> {repo.stargazers_count}
+        </p>
+        <p className="mb-0">
+          <strong>Watchers:</strong> {repo.watchers_count}
+        </p>
+      </a>
+    </div>
+  </div>
+);
+
+export default RepoCard;

src/components/UserCard.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const UserCard = ({ user }) => {
   return (
-    <div className="card">
+    <div className="card mb-4">
       <div className="card-body">
         <div className="d-flex">
           <img className="img-round user-image mr-5" src={user.avatar_url} />

src/index.css

@@ -16,3 +16,12 @@ code {
   width: 100px;
   height: 100px;
 }
+
+a {
+  color: inherit !important;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: none !important;
+}