Merge pull request #32 from ChoukseyKhushbu/dev

Release 1.0.1
ChoukseyKhushbu · Aug 2, 2020 · 9f728c1 · 9f728c1
2 parents 680e3cd + b2b3c45
commit 9f728c1
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 250 deletions.
diff --git a/.env.sample b/.env.sample
@@ -0,0 +1 @@
+REACT_APP_GITHUB_TOKEN=
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Gitzilla
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -66,3 +66,6 @@ This section has moved here: https://facebook.github.io/create-react-app/docs/de
 ### `npm run build` fails to minify
 
 This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+
+# License
+[MIT](./LICENSE) © Gitzilla
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -4,11 +4,11 @@ import Home from "./Home";
 import User from "./User";
 import Container from "./Container";
 function App() {
-  const [userName, setuserName] = useState("");
+  const [userName, setUserName] = useState("");
 
   const changeName = (name) => {
     console.log(name);
-    setuserName(name);
+    setUserName(name);
   };
   return (
     <Switch>

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -1,21 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-// import { Button } from "@material-ui/core";
-// import { makeStyles } from "@material-ui/core/styles";
-// import { useState } from "react";
-// import axios from "axios";
-
-// const useStyles = makeStyles({
-//   button: {
-//     backgroundColor: "rgb(122, 72, 216)",
-//     color: "white",
-//     boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
-//     transform: "rotate(-0.12deg)",
-//   },
-// });
 const Home = (props) => {
-  // const [userName, setuserName] = useState("");
-  // const classes = useStyles();
   const handleChange = async (e) => {
     const newUser = e.target.value;
     props.changeName(newUser);
@@ -49,16 +34,6 @@ const Home = (props) => {
             >
               Generate Resume
             </Link>
-            {/* <Button
-            variant="outlined"
-            // color="secondary"
-            size="small"
-            className={classes.button}
-            href={`/users/${props.userName}`}
-            disabled={props.userName ? false : true}
-          >
-            Generate Resume
-          </Button> */}
           </div>
         </div>
       </div>
@@ -68,8 +43,6 @@ const Home = (props) => {
           src={require("../assets/femalecodertocat.png")}
           alt=" resume builder"
         />
-        {/* eslint-disable-next-line jsx-a11y/accessible-emoji */}
-        {/* <div className="footer">Made with ❤️ by Khushbu</div> */}
       </div>
       <div className="mobileTop">
         <h1>GitZilla</h1>

diff --git a/src/components/RepoCard.jsx b/src/components/RepoCard.jsx
@@ -1,8 +1,10 @@
 import React from "react";
 
-const RepoCard = ({ repo }) => {
+const RepoCard = React.forwardRef((props, ref) => {
+  let { repo } = props;
   return (
     <a
+      ref={ref}
       href={repo.html_url}
       className="repoCard"
       target="_blank"
@@ -13,6 +15,6 @@ const RepoCard = ({ repo }) => {
       {repo.language && <span>{repo.language}</span>}
     </a>
   );
-};
+});
 
 export default RepoCard;
diff --git a/src/components/User.jsx b/src/components/User.jsx
@@ -4,37 +4,54 @@ import { useEffect, useState } from "react";
 import Axios from "axios";
 import RepoCard from "./RepoCard";
 import { Link } from "react-router-dom";
+import useRepoSearch from "./useRepoSearch";
+import { useRef } from "react";
+import { useCallback } from "react";
+
+const headers = {
+  "Content-Type": "application/json",
+  Accept: "application/vnd.github.v3+json",
+  Authorization: `token ${process.env.REACT_APP_GITHUB_TOKEN}`,
+};
 
 const User = () => {
   let { userName } = useParams();
   const [userData, setuserData] = useState(null);
-  const [repos, setrepos] = useState([]);
-  const [skills, setSkills] = useState({});
   const [userFound, isUserFound] = useState(true);
+  const [pageNumber, setPageNumber] = useState(1);
+
+  const { reposLoading, error, repos, hasMore, skills } = useRepoSearch(
+    userName,
+    pageNumber
+  );
+
+  const observer = useRef();
+  const lastRepoElementRef = useCallback(
+    (node) => {
+      if (reposLoading) return;
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          setPageNumber((prevPageNumber) => prevPageNumber + 1);
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [reposLoading, hasMore]
+  );
 
   useEffect(() => {
     (async () => {
       try {
-        const res = await Axios.get(`https://api.github.com/users/${userName}`);
-        setuserData(res.data);
-        const userRepos = await Axios.get(
-          `${res.data.repos_url}?page=1&per_page=100&sort=updated`
-        );
-        // console.log(userRepos.data);
-        setrepos(userRepos.data);
-        let obj = {};
-        userRepos.data.forEach((repo) => {
-          // console.log(repo);
-          if (repo.language) {
-            obj[repo.language] = obj[repo.language] ? obj[repo.language]++ : 1;
+        const res = await Axios.get(
+          `https://api.github.com/users/${userName}`,
+          {
+            headers: headers,
           }
-        });
-        setSkills(obj);
+        );
+        setuserData(res.data);
       } catch (error) {
         isUserFound(false);
-        // console.log(error);
-        // console.log(error.response.status);
-        // document.body.innerHTML = "404 User not found!!!";
       }
     })();
   }, [userName]);
@@ -118,15 +135,22 @@ const User = () => {
       <div className="main">
         <h1>Repositories</h1>
         <div className="repoContainer">
-          {userData && repos.length > 0
-            ? repos.map((repo) => <RepoCard key={repo.id} repo={repo} />)
-            : [...Array(12)].map((p) => (
-                <div
-                  key={p}
-                  className="repoCard shine"
-                  style={{ height: "150px" }}
-                ></div>
-              ))}
+          {repos.map((repo, index) => {
+            if (repos.length === index + 1) {
+              return (
+                <RepoCard ref={lastRepoElementRef} key={repo.id} repo={repo} />
+              );
+            } else return <RepoCard key={repo.id} repo={repo} />;
+          })}
+          {reposLoading &&
+            !error &&
+            [...Array(12)].map((p) => (
+              <div
+                key={p}
+                className="repoCard shine"
+                style={{ height: "150px" }}
+              ></div>
+            ))}
         </div>
       </div>
     </>
@@ -143,79 +167,3 @@ const User = () => {
 
 export default User;
 
-// The below class component method I used to demonstrate a case
-//  of updating the component when the prop passed to it changes
-
-// class User extends Component {
-//   constructor(props) {
-//     super(props);
-//     this.state = {
-//       userData: null,
-//       repos: [],
-//     };
-//   }
-
-//   fetchDetails() {
-//     console.log("mounted");
-//     let { userName } = this.props.match.params;
-//     (async () => {
-//       try {
-//         const res = await Axios.get(`https://api.github.com/users/${userName}`);
-//         // setuserData(res.data);
-//         this.setState({
-//           userData: res.data,
-//         });
-//         const userRepos = await Axios.get(res.data.repos_url);
-//         console.log(userRepos.data);
-//         // setrepos(userRepos.data);
-//         this.setState({
-//           repos: userRepos.data,
-//         });
-//       } catch (error) {
-//         console.log(error.response.status);
-//         document.body.innerHTML = "404 User not found!!!";
-//       }
-//     })();
-//   }
-//   componentDidMount() {
-//     this.fetchDetails();
-//   }
-
-//   componentDidUpdate(prevProps) {
-//     if (this.props.match.params.userName !== prevProps.match.params.userName) {
-//       this.fetchDetails();
-//     }
-//   }
-
-//   render() {
-//     console.log(this.props);
-
-//     let { userData, repos } = this.state;
-//     return (
-//       <>
-//         {userData ? (
-//           <div>
-//             <h1>{userData.name}</h1>
-//             <Link to="/users/DivyanshBatham">DB</Link>
-//             <br />
-//             <Link to="/users/ChoukseyKhushbu">KC</Link>
-//             {repos.map((repo) => {
-//               return (
-//                 <li key={repo.id}>
-//                   {/* <a href={repo.html_url} target="_blank"> */}
-//                   {repo.name}
-//                   {/* </a> */}
-//                 </li>
-//               );
-//             })}
-//           </div>
-//         ) : (
-//           <>
-//             <h1>loading...</h1>
-//           </>
-//         )}
-//       </>
-//     );
-//   }
-// }
-// export default User;
diff --git a/src/components/useRepoSearch.js b/src/components/useRepoSearch.js
@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+
+export default function useRepoSearch(query, pageNumber) {
+  const [reposLoading, setReposLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [repos, setRepos] = useState([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [skills, setSkills] = useState({});
+
+  useEffect(() => {
+    setRepos([]);
+  }, [query]);
+
+  useEffect(() => {
+    setReposLoading(true);
+    setError(false);
+    axios
+      .get(
+        `https://api.github.com/users/${query}/repos?page=${pageNumber}&per_page=100&sort=updated`
+      )
+      .then((res) => {
+        setRepos((previousRepos) => {
+          return [...previousRepos, ...res.data];
+        });
+        // setSkills((prevSkills) => {
+        //   let updatedSkills = { ...prevSkills };
+        //   res.data.forEach((repo) => {
+        //     if (repo.language) {
+        //       updatedSkills[repo.language] = updatedSkills[repo.language]
+        //         ? updatedSkills[repo.language]++
+        //         : 1;
+        //     }
+        //   });
+        //   return { updatedSkills };
+        // });
+        let obj = skills;
+        res.data.forEach((repo) => {
+          if (repo.language) {
+            obj[repo.language] = obj[repo.language] ? obj[repo.language]++ : 1;
+          }
+        });
+        setSkills(obj);
+
+        setHasMore(res.data.length > 0);
+        setReposLoading(false);
+      })
+      .catch((e) => {
+        setError(true);
+      });
+  }, [query, pageNumber, skills]);
+  return { reposLoading, error, repos, hasMore, skills };
+}