Implement auto-refresh of the project statuses (#42)

#41

src/components/ProjectDetails/ProjectDetails.css

@@ -1,3 +1,19 @@
+.ProjectDetails {
+  position: relative;
+}
+
+.ProjectDetails .autoRefreshButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: white;
+  outline: none;
+  border: none;
+  background-color: #0D65CA;
+  padding: 5px;
+}
+
+
 table {
     font-family: arial, sans-serif;
     font-size: 0.8rem;

src/components/ProjectDetails/ProjectDetails.js

@@ -1,31 +1,66 @@
 import React, { Component } from 'react';
 import "./ProjectDetails.css";
 var axios = require('axios');
+
+const params = {};
+
+if (process.env.REACT_APP_GITHUB_TOKEN) {
+  params.headers = {
+    Authorization: process.env.REACT_APP_GITHUB_TOKEN,
+  };
+}
+
 export default class ProjectDetails extends Component {
     state={
-        commitDetails:null
+        commitDetails:null,
+        shouldRefresh: false,
     }
     componentDidMount=()=>{
-        const params = {};
-      if (process.env.REACT_APP_GITHUB_TOKEN) {
-        params.headers = {
-          Authorization: process.env.REACT_APP_GITHUB_TOKEN,
-        };
-      }
-
       axios.get(
         `https://api.github.com/repos/${this.props.name}/commits`,
         params
       ).then(data=>this.setState({commitDetails:data.data}))
     }
+
+    componentWillUnmount () {
+      clearInterval(this.interval);
+    }
+
+    toggleAutoRefresh (e) {
+      e.stopPropagation(); // Prevent the click event from being fired on the parent elements as well
+
+      this.setState({
+        shouldRefresh: !this.state.shouldRefresh,
+      }, () => {
+
+        clearInterval(this.interval);
+
+        if (this.state.shouldRefresh) {
+          this.interval = setInterval(() => {
+            axios.get(
+              `https://api.github.com/repos/${this.props.name}/commits`,
+              params
+            )
+            .then(data => this.setState({ commitDetails:data.data }))
+          }, 30000); // Refresh every 30 seconds
+        }
+
+      })
+    }
+
     render() {
        if(!this.state.commitDetails){
            return(
                <div><h5>Loading details ...</h5></div>
            )
        }
         return (
-            <div>
+            <div className='ProjectDetails'>
+
+              <button onClick={(e) => this.toggleAutoRefresh(e)} className='autoRefreshButton'>
+                Toggle Auto Refresh {this.state.shouldRefresh ? 'OFF' : 'ON'}
+              </button>
+
              Commit Details
              <table>
                  <thead>