<Directory /> component refactored

[isnifer]

Hey, @JiniHendrix, @markmarcelo, @bitadj, please take a look!

[calvinrbnspiess]

Arrow functions in classes are really hard to read. Maybe you should write them in a classical way like:

handleListItemClick(proxyEvent) {

    this.props.clickHandler(
        this.props.id,
        this.props.directory.path,
        this.props.directory.type,
        proxyEvent
    );
}

That change should also preserve a consistent code style because the handlers in the App component were not written as Arrow functions.

Also, wouldn't the methods handlePlusIconClick and handleListItemClick need to be bound to the this instance in the Component constructor?

[isnifer]

You're wrong. Arrow functions are easy to read. They help us to avoid using bind in constructor.
When we are writing arrow functions we do not need constructor and bind, because arrow functions already bound into an instance.

Just read - https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

[isnifer]

What about code consistency - I've refactored all other files except App.jsx already. It will be next step

[calvinrbnspiess]

That are good points - Thanks, I didn't know that article! When the utilization of arrow functions makes the binding in classes obsolete, then it is a great design decision to use them. Overall I like your changes. You're awesome 😄

[isnifer]

Thanks, Calvin! 👌

[agpt]

@isnifer Probably if we can wrap the arrow function with the round parenthesis,
handleListItemClick = (proxyEvent) => {}
it would be more readable in terms of both classical and latest way of JavaScript coding pattern. Let me know your thoughts on this.

[isnifer]

This branch was rebased over updated master

[ryany1819]

As the main codebase shifted, this Pull Request created in 2017 was no longer applicable.