Refactor HeaderSections

[debragail]

Currently HeaderSection includes:

Last Block
RPC Server
Transactions
Mining Status

../src/reducers/headerSections.js

It might make sense to handle this container differently.

Expected Behavior

Current Behavior

The state for all 4 classes are handled as HeaderSections and it might be better to refactor this now.

Possible Solution

Handle HeaderSections as a header with individual components instead of together in headersections

Steps to Reproduce (for bugs)

Context

Trying to update the Xplore page to have results and be more modular in regards to state and clickable links.

Your Environment

[bicep]

Hello!

Handle HeaderSections as a header with individual components instead of together in headersections

My plan of attack: 4 different reducers in the reducers folder and then 4 different components within the HeaderSections.jsx file.

Does this make sense?

Actually I thought the original writer of the code wanted to just put it all together so that each of the sections could be iterated/mapped through. Am I right to say that you are requesting this change now because each of the header sections are getting more different from each other and should not be treated in the same way?

[TalAter]

I also think it makes sense to refactor it like that... this attempt at over generalization could be simplified simply by having 4 components - and if there are similarities between all of them, we can simply have all 4 extend another component.

@bicep would you like to take this one after you handle the other task?

[debragail]

Also take into consideration that for search results page we will need a page to return for each section.

[bicep]

@TalAter @debragail Yeap let me give this one a shot.

[debragail]

@bicep let me know when you're ready to tackle this and I can write the corresponding tests.

[bicep]

Yep, will do! I may give it a shot this weekend.

[mariolo1985]

Hey guys - may I suggest writing any React components that does not use state as a functional component. This will be more pure without needing to go through additional lifecycles pass render. You can also destruct props and know what arguments you are using.

Please correct me if I am interrupting the implementation wrong. One thing I saw on the Redux side is that reducers should not be passing in a hardcoded state. It should use the state declared for the store. If ever a property needs to be updated in the hardcoded state, this will override the update.