Technical debts

[DavideCarvalho]

Okay, now that I'm not beeing pushed to deploy it ASAP, I can start to take care of the things i've done. I'll try to make a more react-ish approach:

• Components are too big, need to make them smaller
  • Entrada Component
  • Comprar Component
  • Caixa Component
• Review how components are connected with Redux
  • Put redux properties inside an object called props;
  • Put component inner state inside an object called state.
• Route components are beeing used as containers, and its passing EVERYTHING to the child components, this is making the components hard to maintain
  • See which child components can be container components;
  • Route components MUST NOT be containers, they are just High Order Components, and their object is just to compose the view.
• Some actions are using getState from redux-thunk, this is a really bad practice, 'cause make testing actions really hard:
  • Review actions logics, so they become responsable for only one stuff, or compose actions with other functions inside it, breaking the logic into various functions.
• Since I cannot test web-components behavior with stuff like mocha or jest, I can at least test redux behavior
  • Test actions
  • Test reducers
• Change from realtime database to Cloud Firestore

And if everything is alright, I can think in something to test the components, something like Cypress

[DavideCarvalho]

Well, redux bindings are more react-ish now and waaaaay more elegant, there is a but in it, tho...
I couldn't put the reducers I wanted inside props properties. Seems like Hybrids only accepts a flat tree of properties, so for now, I'm using only getState() inside of the props, so the props has all the reducers inside of it (It works, but I dislike it).
Talking to Hybrids owner, seems like I can do something like this:

const Component = {
  props: connect(store, ({ myReducer, myOtherThing } ) => ({ myReducer, myOtherThing })),
  mergedThings: ({ props }) => props.myReducer + props.myOtherThing, 
}

Maybe put this "mergedThings" logic inside my redux binding for Hybrids. I hope it works

[DavideCarvalho]

E2E tests are out of league of now. Cypress can't access shadowDom for now. Maybe Selenium or WebDriver could do the trick, but I wanted something to make E2E tests easier, and Cypress definitely is the main choice.
There is an issue on Cypress about it, maybe i'll wait for it a little longer and see how this goes before trying Selenium or WebDriver

[DavideCarvalho]

"Route components MUST NOT be containers, they are just High Order Components, and their object is just to compose the view."
This is true, but routes like Entrada ("www.system.com/") has only one form, this would make it only call tag, doesn't make much sense for me.
So i'm making this rule less strict FOR NOW, since the routes are basically one component.
I'm changing this for: "Route components MUST NOT be containers if they have a bunch of stuff to do inside of it. If the route is only one component (or it has a only one responsability), I can let the route be a container"

[DavideCarvalho]

So, stuff got a little different, some of the business logic are being changed

• ComprarComponent let me buy only one product at a time, I should change it for some kind of Cart concept, where you put stuff in your cart and then buy everything at once
• Creation of Radio Buttons based on existing product category on database
  • Create Container responsable for getting the products categories and creating the radio buttons