00.js

/**
 * how to get rid of react mixins the clean way
 *
 * Matthias Le Brun
 *
 * @bloodyowl
 * @reactjsfrance
 * @putaindecode
 */

01.js

/**
 * how to get rid of react mixins the clean way
 *
 * 1. l'API .createClass
 */

import React, {PropTypes} from "react"

const Button = React.createClass({

  propTypes: {
    onClick: PropTypes.func,
    disabled: PropTypes.bool,
  },

  render() {
    return (
      <div
        disabled={this.props.disabled}
        onClick={this.props.onClick}
        className="pjs-Button">
        {this.props.children}
      </div>
    )
  },

})

export default Button

02.js

/**
 * how to get rid of react mixins the clean way
 *
 * 2. mixins
 */

const LogEventMixin = {
  logEvent(event) {
    if(__DEV__) {
      event.persist()
      console.log(
        `DOMEvent fired: ${ event.type }`,
        event
      )
    }
  },
}

const Button = React.createClass({

  // composition
  mixins: [
    LogEventMixin,
  ],

  render() {
    return (
      <button onClick={this.logEvent}>
        {this.props.children}
      </button>
    )
  },

})

03.js

/**
 * how to get rid of react mixins the clean way
 *
 * 3. mixins & lifecycle
 */
import debounce from "utils/debounce"

const ResizeMixin = {

  componentDidMount() {
    this._handleResize =
      debounce(this.handleResize, 300)
    window.addEventListener(
      "resize",
      this._handleResize,
      false
    )
  },

  componentWillUnmount() {
    window.removeEventListener(
      "resize",
      this._handleResize,
      false
    )
    this._handleResize = null
  },

  handleResize() {
    this.forceUpdate()
  },

}

04.js

/**
 * how to get rid of react mixins the clean way
 *
 * 4. mixins & too much magic
 */

const ToggleMixin = {
  getInitialState() {
    return {
      visible: true,
    }
  },
  show() {
    this.setState({
      visible: true,
    })
  },
  hide() {
    this.setState({
      visible: false,
    })
  },
  toggle() {
    this.setState((state) => {
      return {
        visible: !state.visible,
      }
    })
  },
}

const MyComponent = React.createClass({

  mixins: [
    ToggleMixin,
  ],

  render() {
    return (
      <div className="pjs-MyComponent">
        <button onClick={this.toggle}>
          toggle
        </button>
        {this.state.visible &&
          <div>
            some content
          </div>}
      </div>
    )
  }
})

05.js

/**
 * how to get rid of react mixins the clean way
 *
 * 5. the flux case
 */

import MyStore from "stores/MyStore"

const MyComponent = React.createClass({

  mixins: [
    someFluxImplem.createMixinFor(MyStore),
  ],

  render() {
    return (
      <div className="pjs-MyComponent">
        {this.state.value}
        {/* ^ MyStore.getAll().value */}
      </div>
    )
  }
})

06.js

/**
 * how to get rid of react mixins the clean way
 *
 * 6. react@^0.13.0
 */

import React, {Component} from "react"

// no more mixins
// no autobinding

class MyComponent extends Component {
  render() {
    return (
      <div className="pjs-MyComponent">
        oh hai es6 classes
      </div>
    )
  }
}

07.js

/**
 * how to get rid of react mixins the clean way
 *
 * 7. fuck m8 how do I do
 */

import React, {Component, PropTypes} from "react"

class Button extends Component {

  static propTypes = {
    disabled: PropTypes.bool,
    onClick: PropTypes.func,
  }

  handleClick(event) {
    if(this.props.onClick) {
      this.props.onClick(event)
    }
  }

  render() {
    return (
      <button
        disabled={true}
        onClick={(e) => this.handleClick(e)}>
        {this.props.children}
      </button>
    )
  }
}

08_a.js

/**
 * how to get rid of react mixins the clean way
 *
 * 8. how 'bout mixins
 * a. no interaction with the component itself
 */

import React, {Component, PropTypes} from "react"
import logEvent from "utils/logEvent"

class Button extends Component {

  render() {
    return (
      <button onClick={logEvent}>
        {this.props.children}
      </button>
    )
  }

}

08_b.js

/**
 * how to get rid of react mixins the clean way
 *
 * 8. how 'bout mixins
 * b. interacts with the component & the component
 *    only
 */

import React, {Component} from "react"
import debounce from "utils/debounce"

export default (C) => {

  class Resizer extends Component {

    componentDidMount() {
      this._handleResize =
        // need to use function.bind now
        debounce(this.handleResize.bind(this), 300)
      window.addEventListener(
        "resize",
        this._handleResize,
        false
      )
    }

    componentWillUnmount() {
      window.removeEventListener(
        "resize",
        this._handleResize,
        false
      )
      this._handleResize = null
    }

    handleResize() {
      this.forceUpdate()
    }

    render() {
      return (
        <C {...this.props}>
          {this.props.children}
        </C>
      )
    }

  }

  return Resizer
}

// somewhere else

class MyComponent extends Component{
  render() {
    return (
      <div
        style={{
          width:
            window.innerWidth - MARGIN * 2,
        }}>
        hey
      </div>
    )
  }
}

export default resizer(MyComponent)

08_c.js

/**
 * how to get rid of react mixins the clean way
 *
 * 8. how 'bout mixins
 * c. the stateful stuff
 */

import React, {Component} from "react"

export default (C) => {

  class Toggle extends Component {

    state = {
      visible: true,
    }

    show() {
      this.setState({
        visible: true,
      })
    }

    hide() {
      this.setState({
        visible: false,
      })
    }

    toggle() {
      this.setState((state) => {
        return {
          visible: !state.visible,
        }
      })
    }

    render(C) {
      return (
        <C
          {...this.props}
          {...this.state}
          show={() => this.show()}
          hide={() => this.hide()}
          toggle={() => this.toggle()}>
          {this.props.children}
        </C>
      )
    }
  }

  return Toggle

}

class MyComponent extends Component {

  render() {
    return (
      <div className="pjs-MyComponent">
        <button onClick={this.props.toggle}>
          toggle
        </button>
        {this.props.visible &&
          <div>
            some content
          </div>}
      </div>
    )
  }
}

export default toggle(MyComponent)

08_d.js

/**
 * how to get rid of react mixins the clean way
 *
 * 8. how 'bout mixins
 * d. how does it play with flux?
 */

import React, {Component} from "react"

export default (C) => {

  class StoreReceiver extends Component {

    static contextTypes = {
      dispatcher: PropTypes.func,
    }

    constructor() {
      this._updateStateFromStore =
        this.updateStateFromStore.bind(this)
    }

    componentWillMount() {
      this.setState({
        [C.storePropName]: this.context.dispatcher
          .getStore(C.storeName)state,
      })
    }

    componentDidMount() {
      this.context.dispatcher.getStore(C.storeName)
        .addChangeListener(
          this._updateStateFromStore
        )
    }

    componentWillUnmount() {
      this.context.dispatcher.getStore(C.storeName)
        .removeChangeListener(
          this._updateStateFromStore
        )
    }

    updateStateFromStore() {
      this.setState({
        [C.storePropName]: this.context.dispatcher
          .getStore(C.storeName).state
      })
    }

    render() {
      return (
        <C {...this.props} {...this.state}>
          {this.props.children}
        </C>
      )
    }

  }

}

09.js

/**
 * how to get rid of react mixins the clean way
 *
 * 9. contexts?
 */

import React, {Component, PropTypes} from "react"

class App extends Component {

  static childContextTypes = {
    dispatcher: PropTypes.object,
    RouteHandler: PropTypes.func,
  }

  static propTypes = {
    dispatcher: PropTypes.object,
    RouteHandler: PropTypes.func,
  }

  getChildContext() {
    return {
      dispatcher: this.props.dispatcher,
      RouteHandler: this.props.RouteHandler,
    }
  }

  render() {
    return (
      <div className="pjs-App">
        <this.props.RouteHandler />
      </div>
    )
  }

}



export SomeComponent extends Component {

  static contextTypes = {
    dispatcher: this.props.dispatcher,
  }

  handleClick() {
    this.context.dispatcher.dispatch(
      SomeAction.updateStuff({
        id: this.props.id,
      })
    )
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {`do something`}
      </button>
    )
  }

}

10.js

/**
 * how to get rid of react mixins the clean way
 *
 * 10. contexts use cases
 */
class Container extends Component {

  static childContextTypes = {
    // user's rights
    user: PropTypes.object,
    // style variables shared with cssnext
    styleVariables: PropTypes.object,
    // handler from react router
    RouteHandler: PropTypes.func,
    // flux dispatcher which holds the stores
    ...Dispatcher.getContextType(),
    // translations
    i18n: PropTypes.object,
    // form validation schemas
    schemas: PropTypes.object,
  }

  // …

}


class SomeComponent extends Component {

  static contextTypes = {
    i18n: PropTypes.object,
  }

  render() {
    const t = this.context.i18n
      .createTranslator("SomeComponent")
    return (
      <div className="pjs-SomeComponent">
        {t("HELLOWORLD")}
        {t("YOU_ARE", {
          n: this.props.attendees.length,
        })}
      </div>
    )
  }

}

11.js

/**
 * how to get rid of react mixins the clean way
 *
 * merci 😄
 *
 * Matthias Le Brun
 *
 * @bloodyowl
 * @reactjsfrance
 * @putaindecode
 */