small bug fixes

src/components/RepoCard.jsx

@@ -13,15 +13,9 @@ const RepoCard = React.forwardRef((props, ref) => {
       <div className="repoTitle">{repo.name}</div>
       <p>{repo.description}</p>
       <div>
-        {repo.languages || repo.languages.length > 0
-          ? repo.languages.map((s) => <span key={s}>{s}</span>)
-          : repo.languages.map((a) => (
-              <span
-                key={a}
-                className="shine"
-                style={{ width: "50px", height: "20px" }}
-              ></span>
-            ))}
+        {repo.languages &&
+          repo.languages.length > 0 &&
+          repo.languages.map((s) => <span key={s}>{s}</span>)}
       </div>
     </a>
   );

src/components/User.jsx

@@ -31,9 +31,7 @@ const User = () => {
       if (observer.current) observer.current.disconnect();
       observer.current = new IntersectionObserver((entries) => {
         if (entries[0].isIntersecting && hasMore && currCursor !== nextCursor) {
-          // setPageNumber((prevPageNumber) => prevPageNumber + 1);
           setCurrCursor(nextCursor);
-          // fetchRepositories()
         }
       });
       if (node) observer.current.observe(node);
@@ -85,9 +83,9 @@ const User = () => {
           <div className="skills">
             {Object.keys(skills).length > 0 || repos.length > 0
               ? Object.keys(skills).map((s) => <span key={s}>{s}</span>)
-              : [...Array(5)].map((a) => (
+              : [...Array(5)].map((_, index) => (
                   <span
-                    key={a}
+                    key={index}
                     className="shine"
                     style={{ width: "50px", height: "20px" }}
                   ></span>
@@ -142,9 +140,9 @@ const User = () => {
           })}
           {reposLoading &&
             !error &&
-            [...Array(12)].map((p) => (
+            [...Array(12)].map((_, index) => (
               <div
-                key={p}
+                key={index}
                 className="repoCard shine"
                 style={{ height: "150px" }}
               ></div>

src/components/useRepoSearch.js

@@ -8,8 +8,6 @@ export default function useRepoSearch(username, currCursor) {
   const [repos, setRepos] = useState([]);
   const [hasMore, setHasMore] = useState(false);
   const [nextCursor, setNextCursor] = useState(null);
-
-  // const [endCursor, setEndCursor] = useState(null);
   const [skills, setSkills] = useState({});
 
   useEffect(() => {
@@ -53,6 +51,7 @@ function toRepositories(data) {
   if (data.user) {
     result = data.user.repositories.nodes.map((x) => {
       return {
+        id: x.id,
         name: x.name,
         description: x.description,
         url: x.url,

src/index.scss

@@ -130,7 +130,7 @@ input[type="text"] {
   }
 }
 
-div.user>div:first-child {
+div.user > div:first-child {
   margin: 10px 0;
 }
 
@@ -158,9 +158,10 @@ div.user>div:first-child {
 
 .repoCard {
   box-sizing: border-box;
-  display: block;
+  display: flex;
+  flex-direction: column;
   border-radius: 4px;
-  padding: 20px;
+  padding: 20px 20px 12px 20px;
   background-color: $darkBlueOpacity05;
   position: relative;
   transition: 0.2s all ease-in-out;
@@ -172,7 +173,8 @@ div.user>div:first-child {
     color: black;
     border-radius: 2px;
     padding: 4px 6px;
-    bottom: 15px;
+    // position: absolute;
+    // bottom: 15px;
     overflow-wrap: break-word;
     margin: 0 8px 8px 0;
     display: inline-flex;
@@ -182,6 +184,7 @@ div.user>div:first-child {
     padding-bottom: 15px;
     color: $light50;
     overflow-wrap: break-word;
+    flex: 1;
   }
 
   .repoTitle {
@@ -201,11 +204,11 @@ div.user>div:first-child {
   display: flex;
 }
 
-.social>span {
+.social > span {
   margin: 20px 20px 20px 0;
 }
 
-.details>div {
+.details > div {
   i {
     padding-right: 5px;
   }

src/utils/queries.js

@@ -24,6 +24,7 @@ query searchRepos($username: String!,$after:String) {
   user(login: $username) {
     repositories(orderBy: {field: UPDATED_AT, direction: DESC}, ownerAffiliations: OWNER, isFork: false, first: 30, after: $after) {
       nodes {
+        id
         name
         description
         url

src/variables.scss

@@ -1,5 +1,5 @@
 $light: #c6c9cf;
-$light50: rgba(198, 201, 207, 0.5);
+$light50: rgba(198, 201, 207, 0.7);
 $light20: rgba(198, 201, 207, 0.2);
 // $light50: #a0a0a0;
 $lightBlue: #202737;