import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import styles from './style.css'; import JustShowTheStuff from 'example/components/JustShowTheStuff'; import ThingsToDoArea from 'example/components/ThingsToDoArea'; import { collapseStuff, collapseToDoItems, getThingsToDo, loadStuff } from 'example/redux/actions'; class OldClassComponent extends Component { constructor(props) { super(props); this.handleEscKeyDown = handleEscKeyDown.bind(this) this.handleStuffClick = handleStuffClick.bind(this) this.handleSubmit = handleSubmit.bind(this) this.handleToDoItemClick = handleToDoItemClick.bind(this) } componentDidMount() { this.props.loadStuff( this.props.stuffSlug ) this.props.getThingsToDo( this.props.toDoItemId ) window.addEventListener('keydown', this.handleEscKeyDown) } componentWillUnmount() { window.removeEventListener('keydown', this.handleEscKeyDown) } render() { const canRenderStuff = this.props.stuff != null && typeof this.props.stuff === "object"; const canRenderThingsToDo = this.props.thingsToDo != null && Array.isArray(this.props.thingsToDo); return ( <div className={styles.stretchyLikeSuspenders}> <h2 className={styles.bolderPlease}>Look at this dashboard!</h2> {canRenderStuff && ( <JustShowTheStuff theStuff={this.props.stuff} handleStuffClick={this.handleStuffClick} handleSubmit={this.handleSubmit} /> )} {canRenderThingsToDo && ( <ThingsToDoArea things={this.props.thingsToDo} handleToDoItemClick={this.handleToDoItemClick} /> )} </div> ) } } function handleEscKeyDown(event) { if (event.keyCode === 27) { this.props.collapseStuff(); this.props.collapseToDoItems(); } } function handleStuffClick(e) { // do some stuff } function handleSubmit(e) { // do some stuff } function handleToDoItemClick(e) { // do some stuff } OldClassComponent.defaultProps = { stuff: null, things: null, }; OldClassComponent.propTypes = { stuff: PropTypes.object, stuffSlug: PropTypes.string.isRequired, thingsToDo: PropTypes.array, toDoItemId: PropTypes.string.isRequired, }; function mapStateToProps(state) { return { stuff: state.stuff.data, stuffSlug: state.stuff.id, thingsToDo: state.thingsToDo.displayData, toDoItemId: state.thingsToDo.itemSlug, }; }; const mapActionsToProps = { collapseStuff, collapseToDoItems, getThingsToDo, loadStuff, }; export default connect(mapStateToProps, mapActionsToProps)(OldClassComponent);