printing buildData in commitsCard.js

client/src/components/BuildDetails.js

@@ -0,0 +1,47 @@
+import React from 'react';
+class BuildDetails extends React.Component {
+  renderBuild = build => {
+    return (
+      <React.Fragment key={build.buildid}>
+        <div className='col-sm-3'>
+          <a
+            target='_blank'
+            rel='noreferrer noopener'
+            href={`https://build.reactos.org/#builders/${
+              build.builderid
+            }/builds/${build.number}`}
+          >
+            {this.props.builders[build.builderid - 1].name}
+          </a>
+        </div>
+        <div className='col-sm-3'>
+          {build.state_string}
+          {build.state_string === 'build successful' ? (
+            <i className='fa fa-check' />
+          ) : (
+            <i />
+          )}
+        </div>
+        <div className='col-sm-3'>started_at:{build.started_at}</div>
+        <div className='col-sm-3'>complete_at:{build.complete_at}</div>
+      </React.Fragment>
+    );
+  };
+  render() {
+    return this.props.build ? (
+      <React.Fragment>
+        {this.props.build.length > 0 ? (
+          <div className='row'>{this.props.build.map(this.renderBuild)}</div>
+        ) : (
+          <p>
+            <strong>No data Exists</strong>
+          </p>
+        )}
+      </React.Fragment>
+    ) : (
+      <h6>No data Exists</h6>
+    );
+  }
+}
+
+export default BuildDetails;

client/src/components/Commits.js

@@ -5,16 +5,20 @@ import Branches from './Branches';
 import './styles/Commit.css';
 import CommitsCard from './CommitsCard';
 import Loading from './Loading';
-
 class Commits extends React.Component {
   componentDidMount() {
     this.props.loadCommits();
     this.props.loadBuildSets();
   }
+
   renderCommits = commit => {
     return (
       <div className='panel-margin' key={commit.sha}>
-    <CommitsCard {...commit} />
+        <CommitsCard
+          {...commit}
+          builds={this.props.build[commit.sha]}
+          builders={this.props.builders}
+        />
       </div>
     );
   };
@@ -46,7 +50,9 @@ class Commits extends React.Component {
                     this.props.loadCommits(this.props.page.prev);
                   }}
                   className='btn btn-primary '
-         disabled={this.props.page.prev === null || this.props.error !== null}
+                  disabled={
+                    this.props.page.prev === null || this.props.error !== null
+                  }
                 >
                   <i className='fa fa-caret-left' aria-hidden='true' />
                   Previous Page{' '}
@@ -57,7 +63,9 @@ class Commits extends React.Component {
                     this.props.loadCommits(this.props.page.next);
                   }}
                   className='btn btn-primary'
-         disabled={this.props.page.next === null || this.props.error !== null}
+                  disabled={
+                    this.props.page.next === null || this.props.error !== null
+                  }
                 >
                   Next Page{'	'}
                   <i className='fa fa-caret-right' aria-hidden='true' />
@@ -78,6 +86,7 @@ class Commits extends React.Component {
 const mapStateToProps = ({
   isLoading,
   commits,
+  builders,
   error,
   branch,
   page,
@@ -85,6 +94,7 @@ const mapStateToProps = ({
 }) => ({
   isLoading,
   commits,
+  builders,
   error,
   branch,
   page,

client/src/components/CommitsCard.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { UncontrolledCollapse, CardBody, Card, CardHeader } from 'reactstrap';
+import BuildDetails from './BuildDetails';
+
 function CommitsCard(props) {
   let tog = 'toggler' + props.sha;
   let committerDate = new Date(props.commit.committer.date);
@@ -13,7 +15,9 @@ function CommitsCard(props) {
           <div className='col-sm'>{props.sha.substring(0, 7)}</div>
           <div className='col-sm'>{props.commit.committer.name}</div>
           <div className='col-sm'>{committerDate.toLocaleString()}</div>
-     <div className='col-sm'>{props.commit.message.substring(0, 17)}...</div>
+          <div className='col-sm'>
+            {props.commit.message.substring(0, 17)}...
+          </div>
         </div>
       </CardHeader>
       <UncontrolledCollapse toggler={tog}>
@@ -77,6 +81,9 @@ function CommitsCard(props) {
               </a>
             </div>
           </div>
+          <h5>Build Details:</h5>
+          <hr />
+          <BuildDetails build={props.builds} builders={props.builders} />
         </CardBody>
       </UncontrolledCollapse>
     </Card>

client/src/redux/api/index.js

@@ -17,12 +17,14 @@ export const fetchBuildSets = async () => {
 };
 
 export const fetchBuildReq = async str => {
+  if (str) {
     const response = await fetch(`/api/buildreq?${str}`);
     const data = await response.json();
     if (response.status >= 400) {
       throw new Error(data.errors);
     }
     return data.buildrequests;
+  }
 };
 
 export const fetchBuilds = async str => {