From 759fec17f3b40b6e375c6e62f6a5b5b576f9555d Mon Sep 17 00:00:00 2001
From: James Greenaway <james@stepsize.com>
Date: Wed, 30 Jan 2019 18:07:47 +0000
Subject: [PATCH] Add form component, redux devtools and fix reducers

---
 src/components/App/App.css                    |  4 +-
 src/components/App/App.tsx                    | 17 +++--
 src/components/WorkloadForm/WorkloadForm.tsx  | 71 +++++++++++++++++++
 src/components/WorkloadForm/index.ts          |  2 +
 src/components/WorkloadItem/WorkloadItem.css  |  3 -
 src/index.tsx                                 | 18 +++--
 src/state/index.ts                            |  2 +-
 src/state/{reducers.ts => reducer.ts}         |  2 +-
 src/state/workloads/epics.ts                  |  2 +-
 src/state/workloads/index.ts                  |  2 +-
 .../workloads/{reducers.ts => reducer.ts}     |  3 +
 11 files changed, 105 insertions(+), 21 deletions(-)
 create mode 100644 src/components/WorkloadForm/WorkloadForm.tsx
 create mode 100644 src/components/WorkloadForm/index.ts
 delete mode 100644 src/components/WorkloadItem/WorkloadItem.css
 rename src/state/{reducers.ts => reducer.ts} (82%)
 rename src/state/workloads/{reducers.ts => reducer.ts} (94%)

diff --git a/src/components/App/App.css b/src/components/App/App.css
index 4931613..f4e9e70 100755
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -1,3 +1 @@
-.App {
-  text-align: center;
-}
+/* .App {} */
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 02257aa..a87de9b 100755
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,18 +1,25 @@
 import React, { PureComponent } from 'react';
 
 import { WorkloadListContainer } from '../WorkloadList';
+import { WorkloadFormContainer } from '../WorkloadForm';
 import './App.css';
 
 
 class App extends PureComponent {
   render() {
     return (
-      <div className="App">
-        <div className="App-mainColumn">
-          <WorkloadListContainer />
+      <div>
+        <h1>CloudWork</h1>
+        <hr />
+        
+        <div >
+          <WorkloadFormContainer />
         </div>
-        <div className="App-asideColumn">
-          {/* <WorkloadFormContainer /> */}
+        <hr />
+
+        <div>
+          <h2>Workloads</h2>
+          <WorkloadListContainer />
         </div>
       </div>
     );
diff --git a/src/components/WorkloadForm/WorkloadForm.tsx b/src/components/WorkloadForm/WorkloadForm.tsx
new file mode 100644
index 0000000..f506689
--- /dev/null
+++ b/src/components/WorkloadForm/WorkloadForm.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+import { submit } from '../../state/workloads/actions';
+
+
+interface WorkloadFormDispatchProps {
+  submitWorkload: (complexity: number) => void  
+}
+
+interface WorkloadFormProps extends 
+  WorkloadFormDispatchProps {}
+
+interface WorkloadFormState {
+  complexity: number;
+}
+
+class WorkloadForm extends React.PureComponent<WorkloadFormProps, WorkloadFormState> {
+  defaultState = {
+    complexity: 5,
+  }
+
+  state = this.defaultState;
+
+  handleSubmit = (e: React.MouseEvent) => {
+    this.props.submitWorkload(this.state.complexity);
+    this.setState(this.defaultState);
+    e.preventDefault();
+  }
+
+  render() {
+    return (
+      <form>
+        <h2>Create workload</h2>
+        
+        <div>
+          <label>
+            Complexity: {this.state.complexity}
+            <br />
+            <input 
+              value={this.state.complexity} 
+              onChange={(e) => this.setState({ complexity: Number(e.target.value) })} 
+              type="range" 
+              min="1" 
+              max="10" 
+            />
+          </label>
+        </div>
+
+        <div>
+          <button onClick={this.handleSubmit} type="submit">Start work</button>
+        </div>
+      </form>
+    );
+  }
+}
+
+
+const mapDispatchToProps = (dispatch: Dispatch): WorkloadFormDispatchProps => ({
+  submitWorkload: (complexity: number) => dispatch(submit({ complexity })),
+});
+
+const WorkloadFormContainer = connect(null, mapDispatchToProps)(WorkloadForm);
+
+
+export {
+  WorkloadForm,
+  WorkloadFormContainer,
+}
+
+export default WorkloadForm;
\ No newline at end of file
diff --git a/src/components/WorkloadForm/index.ts b/src/components/WorkloadForm/index.ts
new file mode 100644
index 0000000..34ece6c
--- /dev/null
+++ b/src/components/WorkloadForm/index.ts
@@ -0,0 +1,2 @@
+export { default } from './WorkloadForm';
+export * from './WorkloadForm';
diff --git a/src/components/WorkloadItem/WorkloadItem.css b/src/components/WorkloadItem/WorkloadItem.css
deleted file mode 100644
index 3602dfb..0000000
--- a/src/components/WorkloadItem/WorkloadItem.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.WorkloadItem {
-  border: 2px solid var(--wf-blue);
-}
diff --git a/src/index.tsx b/src/index.tsx
index 68fa9dc..47bd841 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,21 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux';
 import { createEpicMiddleware } from 'redux-observable';
+import moment from 'moment';
 
-import { reducers, epics, Action, State } from './state';
+import { reducer, epics, Action, State } from './state';
 import * as WorkloadActions from './state/workloads/actions';
 import './index.css';
 import App from './components/App';
 
 
-const epicMiddleware = createEpicMiddleware<Action, Action, State>();
-const store = createStore(reducers, applyMiddleware(epicMiddleware));
+// @ts-ignore: use Redux devtools if installed in browser
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
+const epicMiddleware = createEpicMiddleware<Action, Action, State>();
+const store = createStore(reducer, composeEnhancers(applyMiddleware(epicMiddleware)));
 epicMiddleware.run(epics);
-store.dispatch(WorkloadActions.submit({ complexity: 100 }));
-store.dispatch(WorkloadActions.created({ id: 0, complexity: 100, completeDate: new Date() }));
+
+// demo actions
+store.dispatch(WorkloadActions.submit({ complexity: 10 }));
+store.dispatch(WorkloadActions.created({ id: 0, complexity: 10, completeDate: moment().add(10, 'second').toDate() }));
+store.dispatch(WorkloadActions.created({ id: 1, complexity: 10, completeDate: moment().add(18, 'second').toDate() }));
 
 
 /*
diff --git a/src/state/index.ts b/src/state/index.ts
index 957be3f..4982eb3 100644
--- a/src/state/index.ts
+++ b/src/state/index.ts
@@ -1,3 +1,3 @@
-export * from './reducers';
+export * from './reducer';
 export * from './actions';
 export * from './epics';
\ No newline at end of file
diff --git a/src/state/reducers.ts b/src/state/reducer.ts
similarity index 82%
rename from src/state/reducers.ts
rename to src/state/reducer.ts
index 9a44e48..e77ee0a 100644
--- a/src/state/reducers.ts
+++ b/src/state/reducer.ts
@@ -12,6 +12,6 @@ export interface State {
   workloads: WorkloadsState;
 }
 
-export const reducers = combineReducers<State, Action>({
+export const reducer = combineReducers<State, Action>({
   workloads: workloadReducer,
 });
diff --git a/src/state/workloads/epics.ts b/src/state/workloads/epics.ts
index 11a69e3..b99cf63 100644
--- a/src/state/workloads/epics.ts
+++ b/src/state/workloads/epics.ts
@@ -2,7 +2,7 @@ import { combineEpics, Epic, ofType } from 'redux-observable';
 import { map, tap, ignoreElements } from 'rxjs/operators';
 
 import { Action } from '../actions';
-import { State } from '../reducers';
+import { State } from '../reducer';
 
 
 type AppEpic = Epic<Action, Action, State>;
diff --git a/src/state/workloads/index.ts b/src/state/workloads/index.ts
index c758b74..6e978ef 100644
--- a/src/state/workloads/index.ts
+++ b/src/state/workloads/index.ts
@@ -1,5 +1,5 @@
 export * from './types';
 export * from './actions';
-export * from './reducers';
+export * from './reducer';
 export * from './epics';
 export * from './services';
diff --git a/src/state/workloads/reducers.ts b/src/state/workloads/reducer.ts
similarity index 94%
rename from src/state/workloads/reducers.ts
rename to src/state/workloads/reducer.ts
index fd6c02a..81daf04 100644
--- a/src/state/workloads/reducers.ts
+++ b/src/state/workloads/reducer.ts
@@ -19,6 +19,7 @@ export const reducer = (state: State = initialState, action: Action): State => {
   switch (action.type) {
     case 'WORKLOAD_CREATED':            
       return { 
+        ...state,
         [action.payload.id]: {
           id: action.payload.id,
           complexity: action.payload.complexity,
@@ -29,6 +30,7 @@ export const reducer = (state: State = initialState, action: Action): State => {
 
       case 'WORKLOAD_CANCEL': 
         return {
+          ...state,
           [action.payload.id]: {
             ...state[action.payload.id],
             status: 'CANCELED',
@@ -37,6 +39,7 @@ export const reducer = (state: State = initialState, action: Action): State => {
       
       case 'WORKLOAD_UPDATE_STATUS': 
         return {
+          ...state,
           [action.payload.id]: {
             ...state[action.payload.id],
             status: action.payload.status,