Add form component, redux devtools and fix reducers

src/components/App/App.css

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

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

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;

src/components/WorkloadForm/index.ts

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

src/components/WorkloadItem/WorkloadItem.css

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