import React, { Component } from 'react';
import { connect } from 'react-redux';

import {weaveOn, weaveOff, threadingOn, threadingOff} from '../actions/scheme4';
import Threading from './Threading';
import Weave from './Weave';
import TieUp from './TieUp';
import Treadling from './Treadling';

import '../styles/Scheme4.css';

class Scheme4 extends Component {
  render() {
    const {dispatch, switcher4} = this.props;

    return (
      <div className='Scheme4'>
        <span className='spanRow'>
          <span className='spanCell'>
            <Threading currentState={switcher4} />
          </span>
          <span className='spanCell'><TieUp /></span>
        </span>
        <span className='spanRow'>
          <span className='spanCell'>
            <Weave currentState={switcher4} />
          </span>
          <span className='spanCell'><Treadling /></span>
        </span>
      </div>
    );
  }
}

function select(state) {
  return state;
}

export default connect(select)(Scheme4);

@@ -556,16 +556,30 @@
 hreading
+%0A             
  current
@@ -587,32 +587,154 @@
 tate=%7Bswitcher4%7D
+%0A              onClick=%7B() =%3E dispatch(threadingOn())%7D%0A              offClick=%7B() =%3E dispatch(threadingOff())%7D%0A           
  /%3E%0A          %3C/
@@ -900,16 +900,30 @@
   %3CWeave
+%0A             
  current
@@ -939,16 +939,130 @@
 itcher4%7D
+%0A              onClick=%7B() =%3E dispatch(weaveOn())%7D%0A              offClick=%7B() =%3E dispatch(weaveOff())%7D%0A           
  /%3E%0A    

Add dispathers