display real data from github api

Author: saadazghour

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+debug.log

src/Components/Repo.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import moment from 'moment'
+// import 'moment/locale/es'  // without this line it didn't work
+// moment.locale('es')
+
 import {
     withStyles,
     Typography,
     ButtonBase,
-    Grid,
     Paper,
+    Grid,
     Chip,
+    Link,
 
 } from '@material-ui/core';
 
@@ -32,44 +37,76 @@ const styles = theme => ({
     },
     chip: {
       margin: theme.spacing.unit,
+    },
+    link: {
+      margin: theme.spacing.unit,
     }
 });
 
 
 
-const Repo = ({ classes }) => {
+const Repo = ({
+  classes,
+  avatar_url,
+  name,
+  html_url,
+  owner,
+  description,
+  stargazers_count,
+  open_issues_count,
+  // issues_url,
+  // stargazers_url,
+  created_at
+
+}) => {
+
+  // console.log("last 30 days is: ", moment(created_at).fromNow())
 
   return (
     <div className={ classes.root }>
       <Paper className={ classes.paper }>
         <Grid container spacing={ 16 }>
           <Grid item>
             <ButtonBase className={ classes.image }>
-              <img className={ classes.img } alt="Owner Avatar" src="" />
+              <a href={ ` https://github.com/${ owner } ` } target="_blank"  rel="noopener noreferrer">
+                <img className={ classes.img } alt="Owner Avatar" src={ ` ${ avatar_url } ` } />
+              </a>
             </ButtonBase>
           </Grid>
           <Grid item xs={ 12 } sm container>
             <Grid item xs container direction="column" spacing={ 24 }>
               <Grid item xs>
-                <Typography gutterBottom={ true } variant="h3" color='textPrimary'>
-                  Repository name
+                <Typography gutterBottom={ true } variant="h3">
+                  <Link
+                    href={ html_url }
+                    color="inherit"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    underline="hover"
+                    className={ classes.link }
+                  >
+                    { name }
+                  </Link>
                 </Typography>
-                <Typography gutterBottom={ true } variant="headline">Repository description</Typography>
+                <Typography gutterBottom={ true } variant="headline">{ description }</Typography>
                 <Chip
-                  label="Number of stars"
+                  label= { ` Stars: ${ stargazers_count } ` }
                   className={ classes.chip }
                   href="#chip"
                   clickable
                   variant="outlined"
                 />
                 <Chip
-                  label="Number of issues"
+                  label={ ` Issues: ${ open_issues_count } ` }
                   className={ classes.chip }
-                  href="#chip"
                   clickable
                   variant="outlined"
                 />
-                <Typography color="primary"  inline={ true }>Submitted 30 day ago By Tenserflow</Typography>
+                <Typography
+                  color="primary"
+                  inline={ true }>
+                  Submitted { moment(created_at).fromNow() } By { owner }
+                </Typography>
               </Grid>
             </Grid>
           </Grid>

src/Containers/App.css

@@ -0,0 +1,33 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+  pointer-events: none;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/Containers/App.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 import RepoList from '../Components/RepoList';
 import axios from 'axios';
+import moment from 'moment';
 
 
 class App extends Component {
@@ -18,12 +19,14 @@ class App extends Component {
     componentDidMount(){
         // Getting the data from Github API
 
+        const DATE_30_DAYS_BEFORE = moment().subtract(30, 'days').format('YYYY-MM-DD')
+
         axios.get(
-            'https://api.github.com/search/repositories?q=created:>2017-10-22&sort=stars&order=desc&page=3'
+            ` https://api.github.com/search/repositories?q=created:>${ DATE_30_DAYS_BEFORE }&sort=stars&order=desc&page=3 `
         )
 
         .then(resp => {
-            console.log(resp);
+            // console.log(resp);
             this.setState({
               repo: resp.data.items,
             });

src/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './Containers/App';
+// import Repo from './Components/Repo';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));