Component resets after state change.

[ThatBrianDude]

Even if the state change doesnt affect the reblocks component it will collapse back to its initial state after calling setState in its parent component. This is absolutely unacceptable as users might have already scanned the QR code in which case their payment will be lost.

[goldcaddy77]

Can you provide a minimal example that reproduces the issue? Happy to fix if you can provide an example.

[ThatBrianDude]

Here you go:

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      irrelevant: ""
    }
  }

  render() {
    return <div className="App">
      <ReblocksPayment
        accountId="xrb_3ritoyx4zcixshfbezg4aycb49xbupw9ggink1rfm43tm6uh87t4ifuxg5dm"
        amount={1}
        onPaymentSuccess={data => console.log(data)}
      />
      <input type="submit" value="collapse reblocks by setting state" onClick={() => this.setState({irrelevant: "something irrelevant"})} />
    </div>
  }
}

1. Click the reblocks button to generate QR code.
2. Click the button

For me it was easier to just completely scrap this component and render it myself whenever I need it by writing a renderBrainblocks() function in the index.html and calling that in react via window.renderBrainblocks(elementId, currency, amount, onSuccess)

and then when I dont need it anymore I remove it by doing:

document.querySelector("#"+ elementId).innerHTML = ""

Here you will have to make sure though that the div you are using as a paceholder is dependant on some part of your state so that it is rerendered before you call renderBrainblocks(). I did that with something like so:

{
    this.state.paying ? 
    <div id="brainblocks-payment-placeholder"></div>
     : null
}

This way I make sure that the div will always be there whenever I want to render it:

this.setState({paying: true}, () => {
    window.renderBrainblocks(...)
})

I am not sure how to apply this fix in the component itself, maybe we need to make use of shouldComponentUpdate()?

[ThatBrianDude]

I think you could check in shouldComponentUpdate if newProps !== this.props and return false if not. This will prevent the component from updating when state changes dont affect the reblocks component

[ThatBrianDude]

Any further updates here? If not I would take a look

[goldcaddy77]

Hey, sorry been busy working on some other projects. Would love to see a PR if you can whip something up.

[ThatBrianDude]

@goldcaddy77 I tried running the project but I haven't yet worked with TS so Im getting all these frustrating errors. Is there a step by step process I could follow to at least get the project running? Im pretty sure I could write the required code to fix the bug but I don't have the time as of now to learn TS from front to back. Maybe you could elaborate a bit in the contributions sections?

[goldcaddy77]

Hey, sorry for the slow response - a lot going on at work. Here you go: https://github.com/goldcaddy77/reblocks/pull/18/files. What sorts of TypeScript errors are you getting. In theory, you should just need to run the project and the TS pieces should be transparent to you.

---

To get the project running locally, run yarn to install dependencies, and then run:

yarn run storybook

This will build the project and run storybook on localhost:6006. Storybook is also what drives the demo page. You can test out your changes by editing the *.story.ts files. These are what generate the stories on the left navigation.

Let me know if something doesn't work.

[ThatBrianDude]

Wow, that was pleasant. I tried using npm with tsc && webpack which didnt work at all. Silly me. I will be working on a PR, thanks

[ThatBrianDude]

Fixed in @ #19