Skip to content

Conversation

@Konstiman
Copy link
Contributor

This PR introduces the 1st part of the List component refactoring: the refactored toggle subcomponent.

The new code can be tested by building the application with MODERN_FRONTEND=true.

Main features:

Redux:

  • There are three new actions: TOGGLE_LIST (triggered by clicking the toggle), SHOW_LIST (triggered by mediator e.g. when paper in map is clicked) and SET_ITEMS_COUNT (sets a counter of displayed papers - temporary solution until full data is stored in the redux store).
  • New reducer for the list data: it shows that the list toggle reacts to multiple events (initialization, list toggle, showing the list).

Components:

  • Simple template ListToggle created. Its container, div id="show_hide_button", has to keep in the handlebars for now, so the onclick events are bound to each element in the container. This will change once the whole list is refactored. It may also cause a small bug: sometimes when the toggle is clicked too fast after mouseover, nothing happens.
  • This template is simply given data from the store, no logic required.

Legacy code:

  • Intermediate layer glues the behavior together: one way with the createListToggleMiddleware middleware, one way with a function that triggers the showList action.
  • List is rendered in a separate function in the intermediate layer, because it has to be rendered later than the MVP.
  • I had to create some new mediator methods to push some operations closer to the intermediate.
  • CSS style simplified: instead of adding "hover" class on mouseover, I simply added the :hover style.

Testing:

  • 100% code coverage, including a simple snapshot test.

Known bugs:

  • Toggle sometimes doesn't react to a click if it's clicked too fast after the mouseover. It's probably caused by the fact that the onclick event isn't bound to the whole subcomponent, but rather to each of its elements. I'll solve this later in the list refactoring.

@chreman chreman merged commit b77ab52 into master Oct 28, 2020
@Konstiman Konstiman deleted the refactoring-list-toggle branch December 21, 2020 11:51
chreman added a commit to chreman/Headstart that referenced this pull request Oct 13, 2021
…toring-list-toggle

Refactoring (List): toggle

Former-commit-id: b77ab52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants