Merge pull request #94 from c-hive/issue-25_gh-projects-imptovement-i…

…nfer-tech-from-language-and-topics Issue 25 gh projects imptovement infer tech from language and topics
c-hive · Mar 26, 2020 · a40d197 · a40d197
2 parents bc7feae + 0d74fcc
commit a40d197
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,7 @@ Replace
   "medium": "examplemediumuser",
   "github": {
     "name": "examplegithubuser",
+    "languageThreshold": 10,
     "repos": ["examplegithubrepo1", "examplegithubrepo2"]
   }
 }
@@ -99,7 +100,9 @@ Replace
 | `products.socialLinks`            | Product online presence.                                                                                                                                          | `object`               | **No**   |
 | `teamContributionCalendarUsers` | GitHub-like contribution calendar for the whole team. Supports GitHub and GitLab, **[you can learn more here](https://github.com/c-hive/team-contribution-calendar)**. | `object`               | **No**   |
 | `medium`                        | Medium user/publication name.                                                                                                                                          | `string`               | **No**   |
-| `github`                        | GitHub user/organization name and repository name(s).                                                                                                                  | `object`               | **No**   |
+| `github.name`                        | GitHub user/organization name.                                                                                                                  | `string`               | **No**   |
+| `github.languageThreshold`                        | Percentage threshold for coding languages in a repository to be displayed for the project (by default 10%).                                                                                                                     | `integer`               | **No**   |
+| `github.repos`                        | GitHub user/organization repository name(s).                                                                                                                  | `array`               | **No**   |
 
 Note:
 - Leading slashes for static resources might work locally but fail in production

diff --git a/public/static/svg/html.svg b/public/static/svg/html.svg
diff --git a/public/static/svg/js.svg b/public/static/svg/js.svg
diff --git a/src/components/Projects/ProjectDisplayer/ProjectDisplayer.js b/src/components/Projects/ProjectDisplayer/ProjectDisplayer.js
@@ -1,23 +1,41 @@
 import React from "react";
 import styled from "styled-components";
-import { projectDisplayerStyle } from "./ProjectDisplayer.style";
-import * as customHooks from "../../../utils/CustomHooks/CustomHooks";
+import {
+  projectDisplayerStyle,
+  errorContainerStyle,
+  languagesTextContainerStyle,
+  languagesIconContainerStyle,
+} from "./ProjectDisplayer.style";
 import * as githubUtils from "../utils/GithubUtils";
 import Loader from "../../UI/Loader/Loader";
 import StarIcon from "../../UI/Icons/StarIcon";
+import settings from "../../../../settings/settings.json";
+import IconDisplayer from "../../UI/Icons/IconDisplayer";
 
 const ProjectDisplayer = styled.div`
   ${projectDisplayerStyle}
 `;
 
+const ErrorContainer = styled.div`
+  ${errorContainerStyle}
+`;
+
+const LanguagesTextContainer = styled.div`
+  ${languagesTextContainerStyle}
+`;
+
+const LanguagesIconContainer = styled.div`
+  ${languagesIconContainerStyle}
+`;
+
 const projectDisplayer = ({ userName, repoName }) => {
-  const githubFetchState = customHooks.useFetch(
-    githubUtils.fetchRepo,
-    userName,
-    repoName
-  );
+  const {
+    githubFetchState,
+    githubRepoLanguages,
+    repoLanguages,
+  } = githubUtils.useRepoLanguages(userName, repoName);
 
-  if (githubFetchState.isLoading) {
+  if (githubFetchState.isLoading || githubRepoLanguages.isLoading) {
     return (
       <ProjectDisplayer>
         <Loader />
@@ -26,10 +44,16 @@ const projectDisplayer = ({ userName, repoName }) => {
   }
 
   if (githubFetchState.err) {
-    const errorMessage =
-      "An error has occurred while loading the Github projects. Please try again later.";
+    const errorMessage = `An error has occurred while loading the ${repoName} Github project. Please try again later.`;
 
-    return <div>{errorMessage}</div>;
+    return <ErrorContainer>{errorMessage}</ErrorContainer>;
+  }
+
+  if (githubRepoLanguages.err) {
+    /* eslint-disable-next-line no-console */
+    console.warn(
+      `An error has occurred while loading the ${repoName} Github project languages. Please try again later.`
+    );
   }
 
   return (
@@ -52,6 +76,30 @@ const projectDisplayer = ({ userName, repoName }) => {
         <div className="project_description">
           <div>{githubFetchState.data.description}</div>
         </div>
+        {repoLanguages && settings.display === "icon" ? (
+          <LanguagesIconContainer>
+            {repoLanguages.map(tech =>
+              settings.technologyIcons[tech.toLowerCase()] ? (
+                <IconDisplayer
+                  key={tech.toLowerCase()}
+                  name={settings.technologyIcons[tech.toLowerCase()].name}
+                  src={settings.technologyIcons[tech.toLowerCase()].icon}
+                />
+              ) : (
+                /* eslint-disable-next-line no-console */
+                console.warn(
+                  `There is no icon path specified in the settings for ${tech} technology`
+                )
+              )
+            )}
+          </LanguagesIconContainer>
+        ) : (
+          <LanguagesTextContainer>
+            {repoLanguages.map(language => {
+              return <div key={language}>{language}</div>;
+            })}
+          </LanguagesTextContainer>
+        )}
       </a>
     </ProjectDisplayer>
   );

diff --git a/src/components/Projects/ProjectDisplayer/ProjectDisplayer.style.js b/src/components/Projects/ProjectDisplayer/ProjectDisplayer.style.js
@@ -46,3 +46,44 @@ export const projectDisplayerStyle = css`
     }
   }
 `;
+
+export const errorContainerStyle = css`
+  margin-bottom: 1.2em;
+`;
+
+export const languagesIconContainerStyle = css`
+  margin-top: 5px;
+
+  & > div {
+    margin-right: 5px;
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+  }
+`;
+
+export const languagesTextContainerStyle = css`
+  margin: 4px 2px;
+
+  div {
+    display: inline-block;
+    margin: 3px 9px 3px 0;
+    padding: 0.4em 1em;
+    background-color: rgba(247, 176, 84, 1);
+    font-size: 0.8em;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    text-decoration: none;
+    color: #325359;
+    white-space: nowrap;
+    border-radius: 0.25rem;
+    transition: 0.3s;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
diff --git a/src/components/Projects/utils/GithubUtils.js b/src/components/Projects/utils/GithubUtils.js
@@ -1,3 +1,7 @@
+import { useState, useEffect } from "react";
+import * as customHooks from "../../../utils/CustomHooks/CustomHooks";
+import settings from "../../../../settings/settings.json";
+
 export const fetchRepo = (userName, repositoryName) => {
   const url = `https://api.github.com/repos/${userName}/${repositoryName}`;
 
@@ -7,3 +11,55 @@ export const fetchRepo = (userName, repositoryName) => {
     },
   }).then(fetchedProjectDetails => fetchedProjectDetails.json());
 };
+
+export const fetchRepoLanguages = (userName, repositoryName) => {
+  const url = `https://api.github.com/repos/${userName}/${repositoryName}/languages`;
+
+  return fetch(url, {
+    headers: {
+      Accept: "application/vnd.github.baptiste-preview+json",
+    },
+  }).then(fetchedProjectLanguages => fetchedProjectLanguages.json());
+};
+
+export const useRepoLanguages = (userName, repoName) => {
+  const [repoLanguages, setRepoLanguages] = useState([]);
+
+  const githubFetchState = customHooks.useFetch(fetchRepo, userName, repoName);
+
+  const githubRepoLanguages = customHooks.useFetch(
+    fetchRepoLanguages,
+    userName,
+    repoName
+  );
+
+  useEffect(() => {
+    if (!githubRepoLanguages.isLoading && !githubRepoLanguages.err) {
+      const sumOfNumberOfBytesOfLanguages = Object.values(
+        githubRepoLanguages.data
+      ).reduce((x, y) => x + y, 0);
+
+      const defaultThreshold = 10;
+      const threshold = settings.github.languageThreshold || defaultThreshold;
+
+      const languages = Object.keys(githubRepoLanguages.data).filter(
+        language => {
+          const currentNumberOfBytes = githubRepoLanguages.data[language];
+
+          return (
+            (currentNumberOfBytes / sumOfNumberOfBytesOfLanguages) * 100 >
+            threshold
+          );
+        }
+      );
+
+      setRepoLanguages(languages);
+    }
+  }, [githubRepoLanguages.isLoading, githubRepoLanguages.err]);
+
+  return {
+    githubFetchState,
+    githubRepoLanguages,
+    repoLanguages,
+  };
+};