Last adjustments

leoronne · leoronne · commit 71e587e2f74e · 2020-08-17T21:34:38.000-03:00
diff --git a/src/components/ProfileData/index.tsx b/src/components/ProfileData/index.tsx
@@ -17,6 +17,7 @@ import {
   OrganizationsContainer,
   OrganizationCard,
 } from './styles';
+import kFormatter from '../../utils/kFormatter';
 
 interface Orgs {
   login?: string;
@@ -52,9 +53,7 @@ const ProfileData: React.FC<Props> = ({ username, name, avatarUrl, followers, fo
   return (
     <Container>
       <Flex>
-        <a href={`https://github.com/${username}`} target="_blank" rel="noopener noreferrer" data-tip="Go to user's GitHub profile">
-          <Avatar src={avatarUrl} alt={username} data-tip="Go to user's GitHub profile" />
-        </a>
+        <Avatar src={avatarUrl} alt={username} data-tip="Go to user's GitHub profile" onClick={() => window.open(`https://github.com/${username}`, 'blank')} />
 
         <div>
           <h1>{name}</h1>
@@ -69,13 +68,13 @@ const ProfileData: React.FC<Props> = ({ username, name, avatarUrl, followers, fo
       <Row>
         <li className="link-li" onClick={() => window.open(`https://github.com/${username}?tab=followers`, '_blank')} data-tip="Go to user's followers">
           <PeopleIcon />
-          <b>{followers}</b>
+          <b>{kFormatter(followers)}</b>
           <span>followers</span>
           <span>·</span>
         </li>
 
         <li className="link-li" onClick={() => window.open(`https://github.com/${username}?tab=following`, '_blank')} data-tip="Go to user's followings">
-          <b>{following}</b>
+          <b>{kFormatter(following)}</b>
           <span>following</span>
         </li>
       </Row>
diff --git a/src/components/ProfileData/styles.ts b/src/components/ProfileData/styles.ts
@@ -19,6 +19,8 @@ export const Flex = styled.div`
       font-weight: 600;
     }
     > a {
+      width: 100%;
+      height: 100%;
       text-decoration: none;
       transition: filter 0.6s ease-in-out !important;
     }
@@ -55,6 +57,7 @@ export const Flex = styled.div`
 export const Avatar = styled.img`
   width: 16%;
   border-radius: 50%;
+  cursor: pointer;
 
   @media (min-width: 768px) {
     width: 100%;
diff --git a/src/components/RepoCard/index.tsx b/src/components/RepoCard/index.tsx
@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
 import languageColors from '../../utils/language-colors';
 
 import { Container, Topside, RepoIcon, Botside, StarIcon, ForkIcon, LanguageDot } from './styles';
+import kFormatter from '../../utils/kFormatter';
 
 interface Props {
   username: string;
@@ -43,13 +44,13 @@ const RepoCard: React.FC<Props> = ({ username, reponame, description, language,
           {stars && stars > 0 ? (
             <li data-tip={`Repository has ${stars} stars`}>
               <StarIcon />
-              <span>{stars}</span>
+              <span>{kFormatter(stars)}</span>
             </li>
           ) : null}
           {forks && forks > 0 ? (
             <li data-tip={`Repository was forked by ${forks} users`}>
               <ForkIcon />
-              <span>{forks}</span>
+              <span>{kFormatter(forks)}</span>
             </li>
           ) : null}
         </ul>
diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx
@@ -13,6 +13,7 @@ import Error404 from '../../components/Error404';
 import { APIUser, APIRepo } from '../../@types';
 import api from '../../services/api';
 import notify from '../../services/toast';
+import kFormatter from '../../utils/kFormatter';
 
 interface Data {
   user?: APIUser;
@@ -21,7 +22,7 @@ interface Data {
 }
 
 const Profile: React.FC = () => {
-  const { username = 'leoronne' } = useParams();
+  const { username = 'facebook' } = useParams();
   const [data, setData] = useState<Data>();
   const [panelActive, setPanelActive] = useState(1);
   const [repositories, setRepos] = useState([]);
@@ -73,11 +74,11 @@ const Profile: React.FC = () => {
         const userResponse = await api.get(`users/${username}`);
         const user = userResponse.data;
 
-        const reposResponse = await api.get(`users/${username}/repos`);
+        const reposResponse = await api.get(`users/${username}/repos?per_page=100`);
         const repos = reposResponse.data;
         setRepos(repos);
 
-        const orgsResponse = await api.get(`users/${username}/orgs`);
+        const orgsResponse = await api.get(`users/${username}/orgs?per_page=100`);
         const orgs = orgsResponse.data;
         setOrgs(orgs);
 
@@ -98,33 +99,6 @@ const Profile: React.FC = () => {
     }
     setData({});
     loadUserInfo();
-
-    // Promise.all([
-    //   fetch(`https://api.github.com/users/${username}`),
-    //   fetch(`https://api.github.com/users/${username}/repos`),
-    //   fetch(`https://api.github.com/users/${username}/orgs`),
-    // ]).then(async responses => {
-    //   const [userResponse, reposResponse, orgsResponse] = responses;
-
-    //   if (userResponse?.status === 404) {
-    //     setData({ error: 'User not found!' });
-    //     return;
-    //   }
-
-    //   const user = await userResponse.json();
-    //   const repos = await reposResponse.json();
-    //   const orgs = await orgsResponse.json();
-    //   setRepos(repos);
-    //   setOrgs(orgs);
-
-    //   const shuffledRepos = repos.sort(() => 0.5 - Math.random());
-    //   const slicedRepos = shuffledRepos.slice(0, 6); // 6 repos
-
-    //   setData({
-    //     user,
-    //     repos: slicedRepos,
-    //   });
-    // });
   }, [username]);
 
   if (loading) {
@@ -154,7 +128,7 @@ const Profile: React.FC = () => {
       <div className={`content ${panelActive === 2 ? ' active' : ''}`} onClick={() => setPanelActive(2)} role="button" data-tip="User's Repositories">
         <RepoIcon />
         <span className="label">Repositories</span>
-        <span className="number">{data.user?.public_repos}</span>
+        <span className="number">{kFormatter(data.user?.public_repos)}</span>
       </div>
       <div className="content" onClick={() => window.open(`https://github.com/${data.user.login}?tab=projects`, '_blank')} role="button" data-tip="Go to user's projects">
         <ProjectsIcon />
@@ -169,6 +143,7 @@ const Profile: React.FC = () => {
 
   return (
     <Container panelActive={panelActive} id="main-profile">
+      <ReactTooltip place="bottom" type="dark" effect="solid" />
       <Tab className="desktop">
         <div className="wrapper">
           <span className="offset" />
@@ -203,7 +178,7 @@ const Profile: React.FC = () => {
           {panelActive === 1 ? (
             <>
               <Repos>
-                <h2>Random Repositories</h2>
+                <h2>{data?.repos.length > 0 ? 'Random Repositories' : 'User does not have any public repositories yet'}</h2>
 
                 <div>
                   {data.repos.map(item => (
@@ -222,7 +197,7 @@ const Profile: React.FC = () => {
               </Repos>
 
               <CalendarHeading data-tip="Does not represent actual contribution data">
-                {`${Math.floor(Math.random() * (2000 - 1)) + 1} contributions in the last year`}
+                {`${kFormatter(Math.floor(Math.random() * (2000 - 1)) + 1)} contributions in the last year`}
               </CalendarHeading>
 
               <RandomCalendar />
@@ -231,7 +206,17 @@ const Profile: React.FC = () => {
             <>
               <Repos>
                 <h2>Repositories</h2>
-
+                {data?.repos.length > 0 && (
+                  <a
+                    href={`https://github.com/${username}?tab=repositories`}
+                    className="repo-link"
+                    data-tip={`see all repositories from ${username}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    see all repositories
+                  </a>
+                )}
                 <div>
                   {repositories.map(item => (
                     <RepoCard
@@ -251,7 +236,6 @@ const Profile: React.FC = () => {
           )}
         </RightSide>
       </Main>
-      <ReactTooltip place="bottom" type="dark" effect="solid" />
     </Container>
   );
 };
diff --git a/src/pages/Profile/styles.ts b/src/pages/Profile/styles.ts
@@ -62,10 +62,20 @@ export const RightSide = styled.div`
 
 export const Repos = styled.div`
   margin-top: var(--verticalPadding);
+  position: relative;
+
+  > .repo-link {
+    position: absolute;
+    font-size: 14px;
+    color: var(--link);
+    top: 0;
+    right: 0;
+  }
 
   > h2 {
     font-size: 16px;
-    font-weight: normal;
+    font-weight: 500;
+    margin-bottom: 15px;
   }
   > div {
     margin-top: 8px;
diff --git a/src/pages/Repo/index.tsx b/src/pages/Repo/index.tsx
@@ -9,6 +9,7 @@ import { useFavicon } from 'react-use';
 import notify from '../../services/toast';
 
 import languageColors from '../../utils/language-colors';
+import kFormatter from '../../utils/kFormatter';
 
 import Error404 from '../../components/Error404';
 
@@ -47,6 +48,8 @@ import {
   IssuesIcon,
   CommitsIcon,
   CheckIcon,
+  HorizontalBar,
+  LanguageBar,
 } from './styles';
 
 import { APIRepo } from '../../@types';
@@ -91,7 +94,11 @@ const Repo: React.FC = () => {
 
   useFavicon(`${window.location.origin}/favicon.ico`);
 
-  // https://api.github.com/repos/leoronne/twitter-ui-clone
+  const sumValues = obj => Object.values(obj).reduce((a: number, b: number) => a + b);
+  const getPercentageValue = (value: number, total: number) => {
+    const percentage = (value * 100) / total;
+    return percentage.toFixed(2);
+  };
 
   useEffect(() => {
     async function loadRepoInfo() {
@@ -111,15 +118,31 @@ const Repo: React.FC = () => {
 
         const languagesResponse = await api.get(`repos/${username}/${reponame}/languages`);
         const languages = languagesResponse.data;
-        setLanguages(Object.keys(languages));
+        if (languages !== {}) {
+          const allMb = sumValues(languages);
+          const languageKeys = Object.keys(languages);
+          const calculatedLanguages = languageKeys.map(lang => {
+            return { language: lang, percentage: getPercentageValue(languages[lang], Number(allMb)) };
+          });
+          if (calculatedLanguages.length > 7) {
+            const mainLanguages = calculatedLanguages.slice(0, 6); // 6 languages
+            const slicedLanguages = calculatedLanguages.slice(6, calculatedLanguages.length); // other languages
+            let remainingValues = 0;
+            slicedLanguages.forEach(lng => {
+              remainingValues += Number(lng.percentage);
+            });
+            mainLanguages.push({ language: 'Other', percentage: String(remainingValues) });
+            setLanguages(mainLanguages);
+          } else setLanguages(calculatedLanguages);
+        }
 
-        const pullsResponse = await api.get(`repos/${username}/${reponame}/pulls`);
+        const pullsResponse = await api.get(`repos/${username}/${reponame}/pulls?per_page=100`);
         const pulls = pullsResponse.data;
         setPulls(pulls.length > 0 ? pulls.length : 0);
 
-        const issuesResponse = await api.get(`repos/${username}/${reponame}/issues`);
-        const issues = issuesResponse.data;
-        setIssues(issues.length > 0 ? issues.length : 0);
+        // const issuesResponse = await api.get(`repos/${username}/${reponame}/issues?per_page=100`);
+        // const issues = issuesResponse.data;
+        setIssues(repo.open_issues > 0 ? repo.open_issues - (pulls.length > 0 ? pulls.length : 0) : repo.open_issues);
 
         const contributorsResponse = await api.get(`repos/${username}/${reponame}/contributors`);
         const contributors = contributorsResponse.data;
@@ -144,46 +167,6 @@ const Repo: React.FC = () => {
       }
     }
     loadRepoInfo();
-    // Promise.all([
-    //   fetch(`https://api.github.com/repos/${username}/${reponame}`),
-    //   fetch(`https://api.github.com/repos/${username}/${reponame}/commits`),
-    //   fetch(`https://api.github.com/repos/${username}/${reponame}/releases`),
-    //   fetch(`https://api.github.com/repos/${username}/${reponame}/languages`),
-    //   fetch(`https://api.github.com/repos/${username}/${reponame}/pulls`),
-    //   fetch(`https://api.github.com/repos/${username}/${reponame}/issues`),
-    //   fetch(`https://api.github.com/repos/${username}/${reponame}/contributors`),
-    // ]).then(async responses => {
-    //   const [repoResponse, commitsResponse, releasesResponse, languagesResponse, pullsResponse, issuesResponse, contributorsResponse] = responses;
-    //   if (repoResponse?.status === 404) {
-    //     setData({ error: 'Repository not found!' });
-    //     return;
-    //   }
-
-    //   const repo = await repoResponse.json();
-    //   const commits = await commitsResponse.json();
-
-    //   if (commitsResponse?.status === 409) {
-    //     setData({ repo });
-    //     setEmptyRepo(true);
-    //     throw new Error('Repository is empty!');
-    //   }
-
-    //   const releases = await releasesResponse.json();
-    //   const languages = await languagesResponse.json();
-    //   const pulls = await pullsResponse.json();
-    //   const issues = await issuesResponse.json();
-    //   const contributors = await contributorsResponse.json();
-
-    //   const shuffledContributors = contributors.sort(() => 0.5 - Math.random());
-    //   const slicedContributors = shuffledContributors.slice(0, 10);
-    //   setLanguages(Object.keys(languages));
-    //   setReleases(releases);
-    //   setPulls(pulls.length > 0 ? pulls.length : 0);
-    //   setIssues(issues.length > 0 ? issues.length : 0);
-    //   setContributors(slicedContributors);
-    //   setCommits(commits);
-    //   setData({ repo });
-    // });
   }, [reponame, username]);
 
   function getLanguageColor(language) {
@@ -284,7 +267,7 @@ const Repo: React.FC = () => {
             >
               <WatchIcon />
               <span>Watch</span>
-              <b>{data.repo.subscribers_count}</b>
+              <b>{kFormatter(data.repo.subscribers_count)}</b>
             </li>
             <li
               data-tip={`This repository has ${data.repo.stargazers_count} stars`}
@@ -293,7 +276,7 @@ const Repo: React.FC = () => {
             >
               <StarIcon />
               <span>Star</span>
-              <b>{data.repo.stargazers_count}</b>
+              <b>{kFormatter(data.repo.stargazers_count)}</b>
             </li>
             <li
               data-tip={`This repository was forked by ${data.repo?.fork && data.repo?.parent?.forks_count ? data.repo.parent.forks_count : data.repo.forks} users`}
@@ -302,7 +285,7 @@ const Repo: React.FC = () => {
             >
               <ForkIcon />
               <span>Fork</span>
-              <b>{data.repo?.fork && data.repo?.parent?.forks_count ? data.repo.parent.forks_count : data.repo.forks}</b>
+              <b>{data.repo?.fork && data.repo?.parent?.forks_count ? kFormatter(data.repo.parent.forks_count) : kFormatter(data.repo.forks)}</b>
             </li>
           </Stats>
         </HeaderInfo>
@@ -351,7 +334,7 @@ const Repo: React.FC = () => {
                   )}
                   {repoCommits[0]?.commit?.message && (
                     <span className="message">
-                      <a href={`https://github.com/${username}/${reponame}/commit/${repoCommits[0].sha}`} data-tip="See commit on GitHub" target="_blank" rel="noopener noreferrer">
+                      <a href={`https://github.com/${username}/${reponame}/commit/${repoCommits[0].sha}`} target="_blank" rel="noopener noreferrer">
                         {repoCommits[0].commit.message}
                       </a>
                     </span>
@@ -395,11 +378,17 @@ const Repo: React.FC = () => {
             <Row>
               <h4>Languages</h4>
 
+              <HorizontalBar>
+                {repoLanguages.map(lng => (
+                  <LanguageBar color={getLanguageColor(lng.language)} size={lng.percentage} key={lng.language} />
+                ))}
+              </HorizontalBar>
+
               <ul className="languages">
-                {repoLanguages.map((language, index) => (
+                {repoLanguages.map((lng, index) => (
                   <li key={index}>
-                    <LanguageDot color={getLanguageColor(language)} />
-                    <span>{language}</span>
+                    <LanguageDot color={getLanguageColor(lng.language)} />
+                    <span>{`${lng.language}: ${lng.percentage}%`}</span>
                   </li>
                 ))}
               </ul>
diff --git a/src/pages/Repo/styles.ts b/src/pages/Repo/styles.ts
diff --git a/src/utils/kFormatter.ts b/src/utils/kFormatter.ts
