actions.js

import fetch from 'cross-fetch'

export const SET_NAME = 'SET_NAME'

export function setName (name) {
  return {
    type: SET_NAME,
    name
  }
}


export function setCampaignName(campaignName) {
  return {import { combineReducers } from 'redux'
import { SET_NAME } from './actions'
import { reducer as formReducer } from 'redux-form'


function name (state = 'World', action) {
  switch (action.type) {
    case SET_NAME:
      return action.name
    default:
      return state
  }
}

const rootReducer = combineReducers({
  name
})

const reducers = {
  // ... your other reducers here ...
  form: formReducer // <---- Mounted at 'form'
}


export default rootReducer

// const defaultState = {
//   campaignName: "--",
// };

// export default function reducer(state = defaultState, action) {
//   switch (action.type) {
//     case "setCampaignName":
//       return Object.assign({}, state, {
//         campaignName: action.campaignName
//       });
//     default:
//       return state;
//   }
// }

// const reducers = {
//   // ... your other reducers here ...
//   form: formReducer // <---- Mounted at 'form'
// }
// const reducer = combineReducers(reducers)
// const store = createStore(reducer)
 

    type: "setCampaignName",
    campaignName
  };
}

configureStore.js

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from './reducers'

const loggerMiddleware = createLogger()

export default function configureStore (preloadedState) {
  return createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    )
  )
}

EquipmentMetadata.jsRoot.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Greeting from '../components/Greeting'

class EquipmentMetadata extends Component {
  render () {
    const { name } = this.props

    return (
      <Greeting name={name} />
    )
  }
}

EquipmentMetadata.propTypes = {
  name: PropTypes.string.isRequired
}

function mapStateToProps (state) {
  const { name } = state
  return {
    name
  }
}

function mapDispatchToProps (dispatch) {
  return {}
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EquipmentMetadata)

Greeting.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from "react-redux";
import * as actions from "../actions";



class Greeting extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleName = this.handleName.bind(this);
  }

//  componentDidMount() {
//  	$.getJSON("ddd").then(
//  		value => this.setState({loading: false, data: value}),
//  		error => this.setState({loading: false, error: error})
//  	);
//  }

    handleInputChange(event) {
      const target = event.target;
      const value = target.type === "checkbox" ? target.checked : target.value;
      const name = target.name;
      this.setState({
        [name]: value
      });
    }

    handleName(event) {
      this.props.setCampaignName(event.target.value);
    }

    renderNewCampaignForm() {
        if (this.state.campaigntype === "1") {
          return ( 
            <div className="node-options">
            <div className="node-container">
                <input                         
                  className="radio-field"
                  type = "checkbox"
                  value = "" />
                  Packaged Rooftop  
            </div> 
            <br />
            <div className="node-container">
                <input 
                  className = "radio-field"
                  type = "checkbox" 
                  value = ""/> 
                  Interior 
            </div>
            <br />
            <div className="node-container">
                <input 
                  className = "radio-field"
                  type = "checkbox" 
                  value = ""/>
                  100 % Makeup Unit 
            </div>          
            <br />
            <div>
              <span> Heating Method</span> 
              <select id = "duct" >
                  <option value = "" > Choose... </option> 
                  <option value = "elecHeat" > elecHeat </option> 
                  <option value = "hotWaterHeat" > hotWaterHeat </option> 
                  <option value = "hotWaterHeat" > steamHeat </option> 
                  <option value = "hotWaterHeat" > gasHeat </option> 
              </select> 
            </div>               
            <br />
            <div>
              <span> Cooling Method </span> 
              <select id = "duct" >
                <option value = "" > Choose... </option> 
                <option value = "dxcool" > dxcool </option> 
                <option value = "chilledWaterCool" > chilledWaterCool </option> 
              </select> 
            </div> 
            <br />
            <div>
              <div className="node-container">
                <input                         
                  className="radio-field"
                  type = "radio" 
                  name = "optionsRadios" 
                  id = "optionsRadios1" 
                  value = "option1" 
                  checked = "" />
                constantVolume 
              </div> 
              <div className="node-container">
                <input 
                  className = "radio-field"
                  type = "radio" 
                  name = "optionsRadios" 
                  id = "optionsRadios2" 
                  value = "option2" 
                  checked = "" />
                variableVolume 
              </div> 
            </div>
            <br />
            <div>
              <span> Zone Delivery </span> 
              <select>
                <option value = "" > Choose... </option> 
                <option value = "directZone" > directZone: AHU supplies air directly to the zone </option> 
                <option value = "vavZone" > vavZone: AHU supplies air to VAV terminal units </option> 
                <option value = "chilledBeamZone" > chilledBeamZone: AHU supplies air to chilled beam terminal units </option> 
                <option value = "multiZone" > multiZone: Air is split into a duct per zone </option>
              </select> 
            </div> 
            <br />
            <div>
              <span> Ductwork </span> 
                <select>
                  <option value = "" > Choose... </option> 
                  <option value = "singleDuct" > singleDuct </option> 
                  <option value = "dualDuct" > dualDuct </option> 
                  <option value = "tripleDuct" > tripleDuct </option> 
                </select> 
            </div> 
            <br />
            <div className="">
              <p>
              <button type = "submit"> Button submit </button> 
          </p>
              </div>
          </div>
          )
        } else if (this.state.campaigntype === "2") {
          return (
        <div className="node-options">
          <div className="node-container">

            <span> Ductwork Configuration </span> 
            <input
              type="radio"
              value="2"
              checked={this.state.campaigntype === "2"}
              name="campaigntype"
              id="vav" 
              className="radio-field"
              onChange={this.handleInputChange}
            />
            <select>
              <option value = "" > Choose... </option> 
              <option value = "single" > Single </option> 
              <option value = "dual"> Dual </option> 
            </select> 
          </div>
          <br />
          <div>
            <span>
              <input                         
                className="radio-field"
                type = "checkbox" 
                value = "coolOnly"/>
              Cool Only 
            </span> 
          </div>
          <br />
          <div>
            <span>
              <input                         
                className="radio-field"
                type = "checkbox" 
                value = "coolWRepeat"/>
              Cool Only with Reheat 
            </span> 
          </div>  
          <br />
          <div>
            <span> Fan Power Configuration </span> 
              <select>
                <option value = ""> Choose... </option> 
                <option value = "seriesaFanPoweredElecReheat"> series fanPowered elecReheat </option>
                <option value = "seriesFanPoweredHotWaterReheat"> series fanPowered hotWaterReheat </option> 
                <option value = "parrallelFanPoweredElecReheat"> parallel fanPowered elecReheat </option> 
                <option value = "parrallelFanPoweredHotWaterReheat"> parallel fanPowered hotWaterReheat </option> 
              </select> 
          </div>
          <br />
          <div className="">
              <p>
            <button type = "submit"> Button submit </button> 
          </p>
              </div>
          </div> 
          )
        } else {
          return null;
        }
      }

  render () {
    // const { name } = this.props
            
    return (
            <div>
            <form role="form">
            <div>
              <SimpleForm />
            </div>
                <div className="form-group-attached">
                  <div className="form-group form-group-defaultx required">
                    <span className="">Display Name</span>
                    <input
                      onChange={this.handleName}
                      name="campaignName"
                      type="text"
                      className="form-control"
                      placeholder = "TUE04321"
                      required=""
                    />
                  </div>
                </div>
                <div className="">
                  <div className="">
                    <span className="">Type</span>
                    <div className="radio radio-success">
                      <input
                        type="radio"
                        value="1"
                        checked={this.state.campaigntype === "1"}
                        name="campaigntype"
                        id="AHU"
                        className="radio-field"
                        onChange={this.handleInputChange}
                      />
                      
                        <span className="radio-text">A H U</span>
                      
                      <input
                        type="radio"
                        value="2"
                        checked={this.state.campaigntype === "2"}
                        name="campaigntype"
                        id="vav" 
                        className="radio-field"
                        onChange={this.handleInputChange}
                      />
                      <span className="radio-text">
                        V A V</span>
                      
                    </div>
                  </div>
                </div>
              </form>

              {this.renderNewCampaignForm()}

            </div>

    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
    setCampaignName: PropTypes.func

}

const mapDispatchToProps = {
  setCampaignName: actions.setCampaignName
};


export default connect(
  null,
  mapDispatchToProps
)(Greeting);

// MailingWizard.propTypes = {
//   setCampaignName: PropTypes.func
// };

index.js

import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import Root from './containers/Root'
import {
  setName
} from './actions'
render(
  <Root />,
  document.getElementById('equipment-metadata')
)

reducers.js

import { combineReducers } from 'redux'
import { SET_NAME } from './actions'
import { reducer as formReducer } from 'redux-form'


function name (state = 'World', action) {
  switch (action.type) {
    case SET_NAME:
      return action.name
    default:
      return state
  }
}

const rootReducer = combineReducers({
  name
})

const reducers = {
  // ... your other reducers here ...
  form: formReducer // <---- Mounted at 'form'
}


export default rootReducer

// const defaultState = {
//   campaignName: "--",
// };

// export default function reducer(state = defaultState, action) {
//   switch (action.type) {
//     case "setCampaignName":
//       return Object.assign({}, state, {
//         campaignName: action.campaignName
//       });
//     default:
//       return state;
//   }
// }

// const reducers = {
//   // ... your other reducers here ...
//   form: formReducer // <---- Mounted at 'form'
// }
// const reducer = combineReducers(reducers)
// const store = createStore(reducer)
 

Root.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from '../configureStore'
import {
  setName
} from '../actions'
import EquipmentMetadata from './EquipmentMetadata'
import SimpleForm from "./SimpleForm";

const store = configureStore()

window.EquipmentMetadata = {
  store,
  setName
}

export default class Root extends Component {
  render () {
    return (
      <Provider store={store}>
        <EquipmentMetadata />
        <SimpleForm />
      </Provider>
    )
  }
}

SimpleForm.js

import React from 'react';
import { Field, reduxForm } from 'redux-form';

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
      </div>
      <div>
        <label>Email</label>
        <div>
          <Field
            name="email"
            component="input"
            type="email"
            placeholder="Email"
          />
        </div>
      </div>
      <div>
        <label>Sex</label>
        <div>
          <label>
            <Field name="sex" component="input" type="radio" value="male" />
            {' '}
            Male
          </label>
          <label>
            <Field name="sex" component="input" type="radio" value="female" />
            {' '}
            Female
          </label>
        </div>
      </div>
      <div>
        <label>Favorite Color</label>
        <div>
          <Field name="favoriteColor" component="select">
            <option />
            <option value="ff0000">Red</option>
            <option value="00ff00">Green</option>
            <option value="0000ff">Blue</option>
          </Field>
        </div>
      </div>
      <div>
        <label htmlFor="employed">Employed</label>
        <div>
          <Field
            name="employed"
            id="employed"
            component="input"
            type="checkbox"
          />
        </div>
      </div>
      <div>
        <label>Notes</label>
        <div>
          <Field name="notes" component="textarea" />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);

UserForm.js

import React from 'react';
import { Control, Form, actions } from 'react-redux-form';

class UserForm extends React.Component {
  handleSubmit(user) {
    // Do whatever you like in here.
    // If you connect the UserForm to the Redux store,
    // you can dispatch actions such as:
    // dispatch(actions.submit('user', somePromise));
    // etc.
  }
  render() {
    return (
      <Form
        model="user"
        onSubmit={(user) => this.handleSubmit(user)}
      >
        <label htmlFor="user.firstName">First name:</label>
        <Control.text model="user.firstName" id="user.firstName" />

        <label htmlFor="user.lastName">Last name:</label>
        <Control.text model="user.lastName" id="user.lastName" />

        <button type="submit">
          Finish registration!
        </button>
      </Form>
    );
  }
}

export default UserForm;