Refactor listings/listings.jsx

[JulianoGTZ]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

I'm trying to solve the issues on codeclimate about the app/javascript/listings/listings.jsx file

I have failed to eliminate the code-smells 😢 . I thought it was better to dive into refactoring and then try to decrease code-smells in a more specific pull-request.

I increased the maintainability of the file from D to C.

I have done the tests by a BDD approach. Only on some small components that I did a snapshot test

Related Tickets & Documents

Refactor CodeClimate Issues

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added tests?

• yes
• no, because they aren't needed
• no, because I need help

Added to documentation?

• docs.dev.to
• readme
• no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[CLAassistant]

All committers have signed the CLA.

[nickytonline]

Thanks so much for the PR @JulianoGTZ! This is looking good, but requires some changes.

Also, in regards to components, file names should be PascalCased and in regards to the folder called elements, rename it to components.

Thanks again for contributing!

[JulianoGTZ]

Hi @nickytonline. Thanks a lot for the Code Review. I'm going to work on this.

Do you have any tips to separate the responsibilities on the componentWillMount?

First, I thought about hooks, but for that I would need to update the version of the Preact.

[nickytonline]

Hi @nickytonline. Thanks a lot for the Code Review. I'm going to work on this.

Do you have any tips to separate the responsibilities on the componentWillMount?

First, I thought about hooks, but for that, I would need to update the version of the Preact.

@JulianoGTZ, we cannot use hooks as you mentioned because it requires Preact X. I have a PR open for it, #5639, but it's blocked by the testing tools we use. We're looking into when we can schedule this upgrade as it's a little more involved than just upgrading Preact.

In regards to componentWillMount, use your judgement if you think things should be pulled out into a function or method or some other type of refactor. The one thing I would remove is this line: const t = this; and just replace all the ts with this.

[nickytonline]

I didn’t forget about this @JulianoGTZ . I’ll be getting to this this week.

[nickytonline]

@JulianoGTZ, an easy change to make, but one of the modal props is spelt incorrectly. You might also need to update some snapshots. To do that, run yarn test -u.

[nickytonline]

There was a regression created when the listings page got split into smaller components. I've suggested a fix.

[nickytonline]

LGTM!

[nickytonline]

Thanks so much @JulianoGTZ for contributing to the DEV codebase and thanks for being patient during the PR review. 👏