Contributor added

Author: zonayedpca

src/App.css

@@ -162,6 +162,42 @@ pre.code {
   overflow-y: hidden;
 }
 
+.contributor {
+  list-style: none;
+  margin-bottom: 15px;
+}
+
+.contributor p {
+  margin-bottom: 10px;
+  font-weight: 900;
+}
+
+.contributor li {
+  display: inline-block;
+  position: relative;
+  margin: 0 5px;
+}
+
+.contributor-profile span {
+  position: absolute;
+  bottom: 5px;
+  right: -2px;
+  font-weight: bold;
+  background-color: #4CAF50;
+  color: #fff;
+  font-size: 11px;
+  width: 15px;
+  height: 15px;
+  line-height: 15px;
+  border-radius: 40px;
+}
+
+.contributor-profile img {
+  width: 40px;
+  border-radius: 40px;
+  border: 3px solid #FFC107;
+}
+
 .single-content {
   display: flex;
   flex-wrap: wrap;
@@ -424,4 +460,4 @@ footer ul li a {
   .footer-area {
     visibility: hidden !important;
   }
-}
+}

src/components/Content.js

@@ -8,9 +8,12 @@ import HeaderContent from './HeaderContent';
 import Page404 from './404';
 import Footer from './Footer';
 
+import contributorMap from '../utils/contributorMap';
+
 class Content extends Component {
   state = {
     data: '',
+    contributor: '',
     redirect: false
   }
 
@@ -27,15 +30,17 @@ class Content extends Component {
   getData = async(id) => {
     try {
       const { data } = await axios(`https://raw.githubusercontent.com/devsonket/devsonket.github.io/develop/data/${id}.json`);
-      this.setState({data});
+      let { data: contributor } = await axios(`https://api.github.com/repos/devsonket/devsonket.github.io/commits?path=data/${id}.json`);
+      contributor = contributorMap(contributor);
+      this.setState({data, contributor});
       this.setTitle();
     } catch(e) {
       this.setState({redirect: true})
     }
   }
 
   render() {
-    const { data, redirect } = this.state;
+    const { data, contributor, redirect } = this.state;
     const { match: { url } } = this.props;
 
     if(redirect && url !== '/404') {
@@ -54,7 +59,7 @@ class Content extends Component {
 
     return (
       <React.Fragment>
-        <HeaderContent title={data.title} description={data.description} />
+        <HeaderContent title={data.title} description={data.description} contributor={contributor} />
         <Container>
           <div className="single-content">
             {data.contents.map(({title, items, code: onlyCode}, index) => (

src/components/HeaderContent.js

@@ -5,7 +5,7 @@ import SocialShare from './SocialShare';
 
 export default class HeaderContent extends PureComponent {
   render() {
-    const {title, description} = this.props;
+    const {title, description, contributor} = this.props;
 
     return (
       <header className="header-area">
@@ -14,6 +14,17 @@ export default class HeaderContent extends PureComponent {
           <div className="intro">
             <h1>{title}</h1>
             <p>{description}</p>
+            <ul className="contributor">
+              <p>কন্ট্রিবিউটর</p>
+              {Object.keys(contributor).map(oneContributor => (
+                <li key={oneContributor}>
+                  <div className="contributor-profile">
+                    <a rel="noopener noreferrer" target="_blank" href={contributor[oneContributor].html_url}><img alt={contributor[oneContributor].login} src={contributor[oneContributor].avatar_url} /></a>
+                    <span>{contributor[oneContributor].count}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
             <div className="print no-print">
               <button className="btn btn-print" onClick={() => window.print()}>প্রিন্ট করুন</button>
             </div>

src/utils/contributorMap.js

@@ -0,0 +1,17 @@
+export default data => {
+  const charMap = {};
+  data.forEach(oneData => {
+    const { login } = oneData.author;
+    if(!charMap[login]) {
+      charMap[login] = {
+        count: 1,
+        login: oneData.author.login,
+        avatar_url: oneData.author.avatar_url,
+        html_url: oneData.author.html_url
+      }
+    } else {
+      charMap[login].count++;
+    }
+  });
+  return charMap;
+}