text: import React from 'react';
  import PropTypes from 'prop-types';
  import NotesContainer from '../Note/NoteContainer';
  import Edit from '../../components/Edit';
  import styles from './Lane.css';
  
  class Lane extends React.Component {
    render(){
      const { connectDropTarget, lane, laneNotes, updateLane, addNote, deleteLane, editLane } = this.props;
      const laneId = lane.id;
  
    return connectDropTarget(
      <div className={styles.laneContainer}>
        <div>
          <div>
            <button onClick={() => addNote({task: 'New Note'}, laneId)}>Add Note</button>
          </div>
          <Edit
            editing={lane.editing}
            value={lane.name}
            onValueClick={() => editLane(lane.id)}
  
            onUpdate={name => updateLane({ ...lane, name, editing: false })}
          />
          <div>
            <button onClick={() => deleteLane(lane)}>Remove Lane</button>
          </div>
        </div>
        <NotesContainer
          notes={laneNotes}
          laneId={laneId}
        />
      </div>
    );
    }
  };
  
  Lane.propTypes = {
    lane: PropTypes.object,
    laneNotes: PropTypes.array,
    addNote: PropTypes.func,
    updateLane: PropTypes.func,
    deleteLane: PropTypes.func,
    editLane: PropTypes.func,
  };
  
  export default Lane;