Add connected but unstyled workload list

src/components/App/App.css

@@ -0,0 +1,3 @@
+.App {
+  text-align: center;
+}

src/components/App/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/components/App/App.tsx

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+
+import { WorkloadListContainer } from '../WorkloadList';
+import './App.css';
+
+
+class App extends PureComponent {
+  render() {
+    return (
+      <div className="App">
+        <div className="App-mainColumn">
+          <WorkloadListContainer />
+        </div>
+        <div className="App-asideColumn">
+          {/* <WorkloadFormContainer /> */}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/App/index.ts

@@ -0,0 +1,2 @@
+export { default } from './App';
+export * from './App';

src/components/WorkloadItem/WorkloadItem.css

@@ -0,0 +1,3 @@
+.WorkloadItem {
+  border: 2px solid var(--wf-blue);
+}

src/components/WorkloadItem/WorkloadItem.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import TimeAgo from 'react-timeago';
+import { Status } from '../../state/workloads'
+
+
+export interface WorkloadItemStateProps {
+  id: number;
+  complexity: number;
+  status: Status;
+  completeDate: Date;
+}
+
+export interface WorkloadItemMethodProps {
+  onCancel: () => void;
+}
+
+export interface WorkloadItemProps extends 
+  WorkloadItemStateProps,
+  WorkloadItemMethodProps {}
+
+
+const WorkloadItem: React.SFC<WorkloadItemProps> = (props) => (
+  <div className="WorkloadItem">
+    <div>
+      <h3 className="WorkloadItem-heading">Workload #{props.id}</h3>
+      <span className="WorkloadItem-subHeading">Complexity: {props.complexity}</span>
+    </div>
+    <div>
+      {props.status === 'WORKING'
+        ? (
+          <>
+            <span><TimeAgo date={props.completeDate} /></span>
+            <button 
+              className="WorkloadItem-secondaryButton" 
+              onClick={props.onCancel}
+            >
+              Cancel
+            </button>
+          </>
+        )
+        : (
+          <span className="WorkloadItem-statusText">{props.status.toLowerCase()}</span>
+        )
+      }
+    </div>
+  </div>
+);
+
+
+export { 
+  WorkloadItem,
+};
+
+export default WorkloadItem;

src/components/WorkloadItem/index.ts

@@ -0,0 +1,2 @@
+export { default } from './WorkloadItem';
+export * from './WorkloadItem';

src/components/WorkloadList/WorkloadList.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import { Action, State } from '../../state';
+import { cancel } from '../../state/workloads/actions';
+import { WorkloadItem, WorkloadItemStateProps } from '../WorkloadItem';
+
+
+export interface WorkloadListStateProps {
+  workloads: WorkloadItemStateProps[];
+}
+
+export interface WorkloadListDispatchProps {
+  cancelWorkload: (id: number) => void;
+}
+
+export interface WorkloadListProps extends 
+  WorkloadListStateProps,
+  WorkloadListDispatchProps {}
+
+
+const WorkloadList: React.SFC<WorkloadListProps> = ({ workloads, cancelWorkload }) => (
+  !workloads.length 
+    ? (
+      <span>No workloads to display</span>
+    )
+  : (
+    <ol>
+      {workloads.map((workload) => (
+        <li key={workload.id}>
+          <WorkloadItem {...workload} onCancel={() => cancelWorkload(workload.id)} />
+        </li>
+      ))}
+    </ol>
+  )
+);
+
+
+const mapStateToProps = (state: State): WorkloadListStateProps => ({
+  workloads: Object.values(state.workloads),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<Action>): WorkloadListDispatchProps => ({
+  cancelWorkload: (id: number) => dispatch(cancel({ id })),
+}) 
+
+const WorkloadListContainer = connect(mapStateToProps, mapDispatchToProps)(WorkloadList);
+
+
+export {
+  WorkloadList,
+  WorkloadListContainer,
+};
+
+export default WorkloadList;

src/components/WorkloadList/index.ts

@@ -0,0 +1 @@
+export * from './WorkloadList';