Refactor - Githubissues

Hi, i sent you a message on reddit that i might make this merge request, but i didn't get a response before i made it. I did some refactoring of your project to use React in a more standard way. Some of the things i did are on your issues list already, and some are recommendations of mine.

Here's what i changed, starting with the stuff in the issue backlog:

Instead of passing the store explicitly as props, switched to connected components. This corresponds to issue #11
made specialized actions to update just a portion of the data, rather than updating the entire json. updating the entire json still exists to support file import. This corresponds to issue #4 and possibly #2
combined Card, CardItem, Relic, and RelicItem into a single component named Item. Combined SaveEditNavItem and ItemNavItem into a single component named NavItem. These refactorings correspond to issue #1, though there may be more to do here

Other things i changed:

Eliminated all but one instance of ReactDom.Render, as is typical for a react project. Instead the render functions for ItemList and SaveEdit check a prop to decide what content they should render. I updated the store a bit to support this
Eliminated all but one instance of document.getElementById (the one being for ReactDom.Render). It's quite rare to need to get access to the underlying dom elements in react, and in those rare cases there's a mechanism called 'refs' which can do it. Refs were not needed for your cases, so i updated the form elements to be driven by component state or props as appropriate
I removed some things from the store and states that were superflous. For example, storing the color of components in addition to a flag that it's selected is not great since you have to manually keep those in sync. Better to store just a boolean indicating whether it's focussed or not, and then have the color be derived from that boolean in a render function.
I attempted to make a division between which components are for presentation, and which ones contain logic. This separation of concerns let some components be very lightweight, just taking in props and rendernig the result, while their containers can be in charge of connecting to the redux store and implementing the business logic. There may be more to do on this front.

I tested quite a bit to confirm that my new code behaves the same as the old one, including comparing the output from your version and mine to look for differences, and also including loading the output in slay the spire. I did identify the following differences, all quite minor

As a result of combining the components for the various card/relic components, the cards and relics in the Itemlist are a couple pixels taller than they used to be
The Relics nav item in your version was 1 pixel smaller than the other nav items. I made them all uniform
While looking at the Converter component, your code has the SaveEdit focus on the Basic button. Mine has nothing focused
If you check upgrade on the cards tab, then switch to relics, then switch back to cards, your version keeps the check while mine resets it
While looking at Advanced or Converter, if the user clicks to add a Card or Relic, my version will update the json and Base64 text areas. Yours waits until they click to the basic tab to update
I changed the Converter text area to be readOnly

zuelong / save-the-spire

Refactor #18