Add Github Repo API project (WIP)

src/components/Clock/Clock.js

@@ -34,6 +34,7 @@ function Clock() {
 
   return (
     <div id="clock" className={'time-' + ampm}>
+      <h2 className="project-title">Clock</h2>
       <div className={'clock time-' + ampm}>
         <button className="time-button" onClick={handleHour}>
           {hour}

src/components/GitRepos/GitRepos.js

@@ -0,0 +1,105 @@
+import React from 'react'
+import Ajax from '../../service/Ajax'
+import './GitRepos.scss'
+
+const gitUser = 'nntrn'
+
+const git = {
+  user: 'nntrn',
+  repo: 'react-mini-projects'
+}
+
+const api = {
+  userRepos: `https://api.github.com/repos/${git.user}`,
+  commits: `https://api.github.com/repos/${git.user}/${git.repo}/commits`,
+  contents: `https://api.github.com/repos/${git.user}/${git.repo}/contents`,
+  contributiors: `https://api.github.com/repos/${git.user}/${git.repo}/contributors`
+}
+
+function Avi(props) {
+  return (
+    <div
+      className={'flex before'}
+      title={`${props.contributions} contributions by ${props.name} value=${props.contributions}`}
+    >
+      <div
+        className={'avi'}
+        style={props.img}
+        name={props.name}
+        contributions={props.contributions}
+      />
+    </div>
+  )
+}
+
+class Repos extends React.Component {
+  render() {
+    const { repoName } = this.props
+
+    const config = data => {
+      return (
+        <div>
+          {data.map((e, i) => {
+            return (
+              <Avi
+                key={i}
+                url={e.avatar_url}
+                img={{ backgroundImage: `url(${e.avatar_url})` }}
+                name={e.login}
+                contributions={e.contributions}
+              />
+            )
+          })}
+        </div>
+      )
+    }
+    return (
+      <Ajax
+        url={`https://api.github.com/repos/${gitUser}/${repoName}/contributors`}
+        config={config}
+      />
+    )
+  }
+}
+
+const parseDate = str => {
+  return new Date(Date.parse(str)).toLocaleDateString()
+}
+
+class Github extends React.Component {
+  render() {
+    const { url } = this.props
+
+    const config = data => {
+      return (
+        <div id="github-activity">
+          <h2 className="project-title">github repo API</h2>
+          {Object.entries(data).map((e, i) => {
+            return (
+              <div key={e[0]} className="my">
+                <h3>
+                  <a href={data[i]['html_url']}>{data[i]['name']}</a>
+                </h3>
+                <div>{e[1].description}</div>
+                <div className="before green" value="last updated: ">
+                  {parseDate(data[i]['updated_at'])}
+                </div>
+                <Repos repoName={data[i]['name']} />
+              </div>
+            )
+          })}
+        </div>
+      )
+    }
+
+    return <Ajax url={url} config={config} />
+  }
+}
+
+class GitRepos extends React.Component {
+  render() {
+    return <Github url="//api.github.com/users/nntrn/repos?sort=created" />
+  }
+}
+
+export default GitRepos

src/components/GitRepos/GitRepos.scss

@@ -0,0 +1,79 @@
+$base: #222;
+$primary: #444;
+
+#github-activity {
+  .section {
+    margin: 1rem;
+    border: 1px solid $base;
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  .flex,
+  .avi {
+    display: inline-flex;
+    flex-wrap: wrap;
+    font-size: 0.8em;
+    flex-direction: row;
+  }
+
+  .contributions {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    margin: 1rem 0;
+  }
+
+  .avi {
+    border-radius: 50%;
+    border: 2px solid lighten($base, 60%);
+    margin: 0 0.25rem;
+    width: 20px;
+    height: 20px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+
+    &:hover:after {
+      content: attr(name);
+      position: absolute;
+      font-size: 11px;
+      bottom: 50%;
+      line-height: 1;
+      white-space: pre;
+      color: white;
+      background: black;
+      padding: 0 0.25rem;
+      z-index: 100;
+    }
+  }
+
+  .repo-list {
+    width: 250px;
+    white-space: pre-wrap;
+
+    .repo-name {
+      color: $base;
+      font-weight: bold;
+    }
+
+    .last-updated {
+      color: $primary;
+    }
+  }
+
+  .my {
+    margin: 1rem 0.5rem;
+  }
+
+  :before {
+    content: attr(value);
+  }
+}

src/components/Layout/layout.scss

@@ -30,3 +30,8 @@
     }
   }
 }
+
+.project-title {
+  display: flex;
+  justify-content: center;
+}

src/components/Todo/Todo.js

@@ -58,7 +58,7 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div id="todo">
-        <h3>TO DO LIST</h3>
+        <h2 className="project-title">TO DO LIST</h2>
         <form>
           <input type="text" onChange={this.handleTextChange} value={this.state.text} />
           <button onClick={this.handleAddItem} className="submit" disabled={!this.state.text}>

src/components/Weather/Weather.js

@@ -6,10 +6,11 @@ import './weather.scss'
 const url = 'https://api.weather.gov/gridpoints/EWX/182,91/forecast'
 class Weather extends React.Component {
   render() {
-    const config = {
-      output(data) {
-        return (
-          <table id="weather">
+    const config = data => {
+      return (
+        <div id="weather">
+          <h2 className="project-title">weather API</h2>
+          <table>
             {data.properties['periods'].map(
               req =>
                 req.name.indexOf('Night') === -1 && (
@@ -35,8 +36,9 @@ class Weather extends React.Component {
               <a href="https://api.weather.gov/gridpoints/EWX/182,91/forecast">api.weather.gov</a>
             </caption>
           </table>
-        )
-      }
+          <div className="json">{JSON.stringify(data, null, 4)}</div>
+        </div>
+      )
     }
 
     return <Ajax url={url} config={config} />

src/components/Weather/weather.scss

@@ -3,3 +3,9 @@ table {
     border: 1px solid #ddd;
   }
 }
+
+.json {
+  display: block;
+  height: 40vh;
+  overflow: scroll;
+}

src/service/Ajax.js

@@ -48,7 +48,7 @@ export default class Ajax extends React.Component {
       return this.renderError()
     }
 
-    return this.props.config.output(ajaxRequest)
+    return this.props.config(ajaxRequest)
   }
 
   render() {