Improved UI of Pull Requests page

client/src/components/BuildDetails.js

@@ -54,7 +54,7 @@ const mapStateToProps = ({ builders }, ownProps) => {
   return {
     builds: ownProps.builds.map(build => ({
       ...build,
-      builderName: builders[build.builderid].name
+      builderName: builders[build.builderid] && builders[build.builderid].name
     }))
   };
 };

client/src/components/PullState.js

@@ -7,6 +7,7 @@ import {
  DropdownItem
 } from 'reactstrap';
 import { currState, loadPulls } from '../redux/actions';
+import {PULL_STATE} from '../redux/constants'
 
 class pullState extends React.Component {
  constructor(props) {
@@ -57,7 +58,7 @@ class pullState extends React.Component {
       }
      }}
     >
-     {this.props.pullState.pullsState.map(this.renderPullsState)}
+     {Object.values(PULL_STATE).map(this.renderPullsState)}
     </DropdownMenu>
    </Dropdown>
   );

client/src/components/PullsCard.js

@@ -3,35 +3,25 @@ import { UncontrolledCollapse, CardBody, Card, CardHeader } from 'reactstrap';
 import BuildDetails from './BuildDetails';
 import TestDetails from './TestDetails';
 
+
 function PullsCard(props) {
   let tog = 'toggler' + props.id;
   let createdDate = new Date(props.created_at);
   let closedDate = new Date(props.closed_at);
   let mergedDate = new Date(props.merged_at);
+
   return (
     <Card>
       <CardHeader className='new' type='button' id={tog}>
         <div className='row'>
-          <div className='col-sm'>{props.number}</div>
+          <div className='col-sm-1'><a href={props.html_url}>#{props.number}</a></div>
-          <div className='col-sm'>{props.merge_commit_sha.substring(0, 7)}</div>
+          <div className='col-sm-9'>{props.title}</div>
-          <div className='col-sm'>{props.state}</div>
+          <div className='col-sm-2'>{props.user.login}</div>
-          <div className='col-sm'>{props.user.login}</div>
         </div>
       </CardHeader>
       <UncontrolledCollapse toggler={tog}>
         <CardBody className='indent'>
-          <p>
+          <p style={{whiteSpace: "pre-line"}}>{props.body}</p>
-            <strong>Pull number: </strong>{' '}
-            <a target='_blank' rel='noreferrer noopener' href={props.html_url}>
-              {props.number}
-            </a>
-          </p>
-          <p>
-            <strong>Title:</strong> {props.title}
-          </p>
-          <p>
-            <strong>Body:</strong> {props.body}
-          </p>
           <div className='row'>
             <div className='col-sm'>
               <strong>Created at: </strong>

client/src/components/styles/Tabs.css

@@ -6,7 +6,6 @@
  display: block;
 }
 .s {
- text-align: center;
  margin-top: 2em;
 }
 .m1 {
@@ -20,6 +19,7 @@
  border-bottom: 1px solid #aaa;
  margin: 10px 0px;
  padding: 0;
+ text-align: center;
 }
 
 .react-tabs__tab {

client/src/redux/constants/index.js

@@ -1,3 +1,9 @@
+export const PULL_STATE = {
+    OPEN:   'open',
+    CLOSED: 'closed',
+    ALL:    'all',
+}
+
 export const COMMITS = {
   LOAD: 'COMMITS_LOAD',
   LOAD_SUCCESS: 'COMMITS_LOAD_SUCCESS',

client/src/redux/reducers/pullStateReducer.js

@@ -1,17 +1,11 @@
-import { PULLS } from '../constants';
+import { PULLS, PULL_STATE } from '../constants';
 
-const pullStateReducer = (
+const pullStateReducer = (state = PULL_STATE.OPEN, action) => {
- state = { pullsState: ['open', 'closed', 'all'], currentPullState: 'all' },
+  if (action.type === PULLS.CURRENT) {
- action
+    return action.pullState;
-) => {
+  }
- if (action.type === PULLS.CURRENT) {
-  return {
-   ...state,
-   currentPullState: action.pullState
-  };
- }
 
- return state;
+  return state;
 };
 
 export default pullStateReducer;

client/src/redux/sagas/pullsSaga.js

@@ -3,7 +3,7 @@ import { PULLS } from '../constants';
 import { fetchPulls } from '../api';
 import { setPulls, setPullsError, setPages } from '../actions';
 const getNewPage = state => parseInt(state.isLoading.newPage, 10);
-const getNewState = state => state.pullState.currentPullState;
+const getNewState = state => state.pullState;
 function* handlePullsLoad() {
  try {
   const newPage = yield select(getNewPage);