Issue 25 gh projects imptovement infer tech from language and topics

src/components/Projects/ProjectDisplayer/ProjectDisplayer.js

@@ -1,6 +1,9 @@
 import React from "react";
 import styled from "styled-components";
-import { projectDisplayerStyle } from "./ProjectDisplayer.style";
+import {
+  projectDisplayerStyle,
+  repositoryLanguagesStyle,
+} from "./ProjectDisplayer.style";
 import * as customHooks from "../../../utils/CustomHooks/CustomHooks";
 import * as githubUtils from "../utils/GithubUtils";
 import Loader from "../../UI/Loader/Loader";
@@ -9,15 +12,24 @@ import StarIcon from "../../UI/Icons/StarIcon";
 const ProjectDisplayer = styled.div`
   ${projectDisplayerStyle}
 `;
+const RepositoryLanguages = styled.div`
+  ${repositoryLanguagesStyle}
+`;
 
-const projectDisplayer = ({ userName, repoName }) => {
+const projectDisplayer = ({ userName, repoName, languageThreshold }) => {
   const githubFetchState = customHooks.useFetch(
     githubUtils.fetchRepo,
     userName,
     repoName
   );
 
-  if (githubFetchState.isLoading) {
+  const githubRepoLanguages = customHooks.useFetch(
+    githubUtils.fetchRepoLanguages,
+    userName,
+    repoName
+  );
+
+  if (githubFetchState.isLoading || githubRepoLanguages.isLoading) {
     return (
       <ProjectDisplayer>
         <Loader />
@@ -32,6 +44,18 @@ const projectDisplayer = ({ userName, repoName }) => {
     return <div>{errorMessage}</div>;
   }
 
+  if (!githubRepoLanguages.isLoading) {
+    let sum = 0;
+
+    Object.keys(githubRepoLanguages.data).forEach(item => {
+      // console.log(item); // key
+      // console.log(githubRepoLanguages.data[item]); // value
+      sum += githubRepoLanguages.data[item];
+    });
+
+    githubRepoLanguages.sum = sum;
+  }
+
   return (
     <ProjectDisplayer>
       <a
@@ -52,6 +76,17 @@ const projectDisplayer = ({ userName, repoName }) => {
         <div className="project_description">
           <div>{githubFetchState.data.description}</div>
         </div>
+        <RepositoryLanguages>
+          {Object.keys(githubRepoLanguages.data).map(item => {
+            if (
+              githubRepoLanguages.data[item] / githubRepoLanguages.sum >
+              (languageThreshold || 10) / 100
+            ) {
+              return <div key={item}>{item}</div>;
+            }
+            return null;
+          })}
+        </RepositoryLanguages>
       </a>
     </ProjectDisplayer>
   );

src/components/Projects/ProjectDisplayer/ProjectDisplayer.style.js

@@ -46,3 +46,27 @@ export const projectDisplayerStyle = css`
     }
   }
 `;
+
+export const repositoryLanguagesStyle = 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;
+    }
+  }
+`;

src/components/Projects/Projects.js

@@ -18,6 +18,7 @@ const projects = () => {
           key={repo}
           userName={settings.github.name}
           repoName={repo}
+          languageThreshold={settings.github.languageThreshold}
         />
       ))}
     </Projects>

src/components/Projects/utils/GithubUtils.js

@@ -7,3 +7,13 @@ 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());
+};