Add connected but unstyled workload list

src/App.tsx

@@ -1,14 +0,0 @@
-import React, { PureComponent } from 'react';
-import './App.css';
-
-class App extends PureComponent {
-  render() {
-    return (
-      <div className="App">
-        App goes here…
-      </div>
-    );
-  }
-}
-
-export default App;

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';

src/index.tsx

@@ -7,7 +7,7 @@ import { createEpicMiddleware } from 'redux-observable';
 import { reducers, epics, Action, State } from './state';
 import * as WorkloadActions from './state/workloads/actions';
 import './index.css';
-import App from './App';
+import App from './components/App';
 
 
 const epicMiddleware = createEpicMiddleware<Action, Action, State>();
@@ -15,6 +15,7 @@ const store = createStore(reducers, applyMiddleware(epicMiddleware));
 
 epicMiddleware.run(epics);
 store.dispatch(WorkloadActions.submit({ complexity: 100 }));
+store.dispatch(WorkloadActions.created({ id: 0, complexity: 100, completeDate: new Date() }));
 
 
 /*

src/state/workloads/index.ts

@@ -1,3 +1,4 @@
+export * from './types';
 export * from './actions';
 export * from './reducers';
 export * from './epics';

src/state/workloads/reducers.ts

@@ -3,6 +3,7 @@ import { Status } from './types';
 
 interface Entry<Id extends number> {
   id: Id;
+  complexity: number;
   completeDate: Date;
   status: Status;
 }
@@ -20,6 +21,7 @@ export const reducer = (state: State = initialState, action: Action): State => {
       return { 
         [action.payload.id]: {
           id: action.payload.id,
+          complexity: action.payload.complexity,
           completeDate: action.payload.completeDate,
           status: 'WORKING',
         },