Implementation of the fullstack coding challenge

[mil22n]

Instructions for setting up the environment and running the app are in README.doc.md file.

I created the server using the Loopback framework, but it is pretty bare boned and with no authentication. There is a dummy login page which just stores the user in the localStorage.

For the client, I've used React with Redux.

The tests are not complete as I am late to submit the project but actions, reducers and a couple key components were covered.

Looking forward to your review.

[Jamesford]

Hey @mil22n

Had some time this morning to review your test and I've got some questions and feedback for the frontend part of it. Another colleague will follow up on the backend related part.

Questions

Why did you choose redux-promise over redux-thunk?

• It appears to be outdated, no new publish in 2 years
• Also it seems to have forced you into mixing Promises and Callbacks (related methods below)
  • talk-row.component.js - handleVote & handleUnvote methods
  • talks.actions.js - updateTalk
• Look like redux-promise-middleware is the active fork of this module
• Would you still use redux-promise (or the redux-promise-middleware version) for your next project?

In the tests for Talk and Submit components, you're also mounting the Provier and Router, was there an intentional decision to test it like this?

• For example a shallow render could have been used if the props passed to Talk or Submit were mocked instead of using Redux.

Bug

If I arrive on the page without ever visiting, the logout button is shown. In order to login I first have to logout, despite never logging in to begin with. It also looks like anonymous users should not be able to vote, however it seems as though it's possible. Probably related to this bug.

Comments

• Well organized file structure
  • if I were to be picky the 2 util files could have been put in their own /utils directory, but seeing as there are not many of them no problem in this case
• Good componentization, each component is a manageable size
• SCSS for styles 👍
• Some components have a lot of this.props.xyz in the JSX, could have cut down on it with const { xyz, abc } = this.props to make it a little easier to read.
• Some components have functions being bound inside render (eg. <button onClick={this.func.bind(this)}>) instead of in the constructor

Next steps

So as said above, this is for the frontend part, you'll get some feedback on the backend soon (friday latest). For now though, if you could answer the questions above and maybe take a look at the bug. Aside from all that, it looks good, quite happy with the frontend code you've submitted.

[mil22n]

Hey @Jamesford, thanks for your comments and a very detailed and professional review.

Answers

Why did you choose redux-promise over redux-thunk?

• No particular reason except that I am familiar with redux-promise and I didn't work with redux-thunk before. In hindsight I should have used the opportunity to try it out.

Also it seems to have forced you into mixing Promises and Callbacks

• I have to check, I'm not entirely sure that I had to use callbacks in handleVote and handleUnvote. I am not really happy about that part myself.

Would you still use redux-promise (or the redux-promise-middleware version) for your next project?

• I wasn't aware of the fork of the library and I would definitely try to use the newer version. It probably handles some of the issues that you pointed out more elegantly. And probably makes use of many changes made to browsers and standards in the last two years...

In the tests for Talk and Submit components, you're also mounting the Provider and Router, was there an intentional decision to test it like this?

• That was a mistake. There is no good reason I can think of not to mock props when rendering components if I am not testing the store or the Router's behavior. I would probably use shallow rendering for all component testing purposes.

Bug fix

Fixed the issue of user with the undefined username being added to the auth state when the checkSession action was called.