Integrate input page using the default material UI stepper, fix up np…

…m scripts and client webpack conf to allow for react router
jsjaspreet · Feb 24, 2017 · 7c9bfe0 · 7c9bfe0
1 parent 0987df6
commit 7c9bfe0
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 7 deletions.
diff --git a/client.webpack.js b/client.webpack.js
@@ -60,6 +60,7 @@ module.exports = {
   devtool: 'cheap-module-source-map',
   plugins: plugins,
   devServer: {
+    historyApiFallback: true,
     proxy: {
       "/api": "http://localhost:9090",
       "/graphql": "http://localhost:9090"

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "watch:server": "webpack -w --config server.webpack.js & nodemon build/server.js",
     "build:client": "webpack --config client.webpack.js",
     "build:client-prod": "export NODE_ENV=production && webpack -p --config client.webpack.js",
-    "dev": "npm run clean && export NODE_ENV=dev && webpack-dev-server --config client.webpack.js & npm run watch:server",
+    "dev": "npm run build && export NODE_ENV=dev && webpack-dev-server --config client.webpack.js & npm run watch:server",
     "clean": "rimraf build"
   },
   "keywords": [],

diff --git a/src/client/views/WorkoutForm/index.js b/src/client/views/WorkoutForm/index.js
@@ -1,12 +1,102 @@
 import React, { Component } from 'react'
+import {
+  Step,
+  Stepper,
+  StepLabel,
+} from 'material-ui/Stepper';
+import RaisedButton from 'material-ui/RaisedButton';
+import FlatButton from 'material-ui/FlatButton';
+import styles from './styles.css'
+
+class WorkoutInput extends React.Component {
+
+  state = {
+    finished: false,
+    stepIndex: 0,
+  };
+
+  handleNext = () => {
+    const { stepIndex } = this.state;
+    this.setState({
+      stepIndex: stepIndex + 1,
+      finished: stepIndex >= 2,
+    });
+  };
+
+  handlePrev = () => {
+    const { stepIndex } = this.state;
+    if (stepIndex > 0) {
+      this.setState({ stepIndex: stepIndex - 1 });
+    }
+  };
+
+  getStepContent(stepIndex) {
+    switch (stepIndex) {
+    case 0:
+      return 'Select campaign settings...';
+    case 1:
+      return 'What is an ad group anyways?';
+    case 2:
+      return 'This is the bit I really care about!';
+    default:
+      return 'You\'re a long way from home sonny jim!';
+    }
+  }
 
-class WorkoutInput extends Component {
   render() {
+    const { finished, stepIndex } = this.state;
+    const contentStyle = { margin: '0 16px' };
+
     return (
-      <div>
-        Form will go here
+
+      <div className={styles.fitnessBody}>
+        <div style={{ width: '100%', maxWidth: 700, margin: 'auto' }}>
+          <Stepper activeStep={stepIndex}>
+            <Step>
+              <StepLabel>Select campaign settings</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Create an ad group</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Create an ad</StepLabel>
+            </Step>
+          </Stepper>
+          <div style={contentStyle}>
+            {finished ? (
+              <p>
+                <a
+                  href="#"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    this.setState({ stepIndex: 0, finished: false });
+                  }}
+                >
+                  Click here
+                </a> to reset the example.
+              </p>
+            ) : (
+              <div>
+                <p>{this.getStepContent(stepIndex)}</p>
+                <div style={{ marginTop: 12 }}>
+                  <FlatButton
+                    label="Back"
+                    disabled={stepIndex === 0}
+                    onTouchTap={this.handlePrev}
+                    style={{ marginRight: 12 }}
+                  />
+                  <RaisedButton
+                    label={stepIndex === 2 ? 'Finish' : 'Next'}
+                    primary={true}
+                    onTouchTap={this.handleNext}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
-    )
+    );
   }
 }
 

diff --git a/src/server/index.js b/src/server/index.js
@@ -29,12 +29,12 @@ const app = express()
 app.use(compression())
 
 
-app.get('/api/status', (req, res) => res.send({"hello": "world"}))
+app.get('/api/status', (req, res) => res.send({ "hello": "world" }))
 app.use('/graphql', graphqlHTTP({
     schema,
     graphiql: true,
     context: {
-      pgPool
+      pgPool,
     }
   })
 )