From cb028c09df9269cb0f25d8c3146fc2b8aba8dbf5 Mon Sep 17 00:00:00 2001
From: Brian <Brian@Roser.co>
Date: Sat, 28 Jul 2018 15:32:14 +0200
Subject: [PATCH 1/2] Fixed Collapse bug and added test scenario to storybook.

---
 src/components/ReblocksPayment/BeerForm.tsx   |  5 +-
 .../ReblocksPayment/CollapseBugTest.tsx       | 71 +++++++++++++++++++
 .../ReblocksPayment/ReblocksPayment.story.tsx |  5 ++
 .../ReblocksPayment/ReblocksPayment.tsx       |  6 ++
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ReblocksPayment/CollapseBugTest.tsx

diff --git a/src/components/ReblocksPayment/BeerForm.tsx b/src/components/ReblocksPayment/BeerForm.tsx
index f7555b7..d943171 100644
--- a/src/components/ReblocksPayment/BeerForm.tsx
+++ b/src/components/ReblocksPayment/BeerForm.tsx
@@ -11,6 +11,8 @@ export interface Props {
 export interface State {
   currentXRBPrice?: number;
   xrbPerBeer?: number;
+  something?: string;
+  
 }
 
 export class BeerForm extends React.Component<Props, State> {
@@ -18,7 +20,7 @@ export class BeerForm extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    this.state = { currentXRBPrice: undefined, xrbPerBeer: undefined };
+    this.state = { currentXRBPrice: undefined, xrbPerBeer: undefined, something: undefined };
   }
 
   componentDidMount() {
@@ -51,6 +53,7 @@ export class BeerForm extends React.Component<Props, State> {
     return (
       <div>
         <p>
+    
           Current cost of a delicious IPA in Boston: {this.formatUSD(this.BEER_PRICE)}
           <br />
           {this.state.currentXRBPrice && (
diff --git a/src/components/ReblocksPayment/CollapseBugTest.tsx b/src/components/ReblocksPayment/CollapseBugTest.tsx
new file mode 100644
index 0000000..c2b072f
--- /dev/null
+++ b/src/components/ReblocksPayment/CollapseBugTest.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+import { ACCOUNT_ID, Currency, getCurrentXRBPrice } from '../../lib/';
+
+import { PaymentResponse, ReblocksPayment } from './ReblocksPayment';
+
+export interface Props {
+  onSuccess: (data: PaymentResponse) => void;
+}
+
+export interface State {
+  currentXRBPrice?: number;
+  something?: string;
+  price: number;
+  onSuccess: (data: PaymentResponse) => void;
+  accountId: string;
+}
+
+export class CollapseBugTest extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { accountId: ACCOUNT_ID, currentXRBPrice: undefined, something: undefined, price: 1, onSuccess: (data: PaymentResponse) => {} };
+  }
+
+  componentDidMount() {
+    this.loadData('USD');
+  }
+
+  loadData = (currency?: Currency) => {
+    getCurrentXRBPrice(currency as Currency)
+      .then(response => {
+        console.log('parsed json', response);
+        this.setState({
+          currentXRBPrice: parseFloat(response.price_local)
+        });
+      })
+      .catch(ex => {
+        console.log('parsing failed', ex);
+      });
+  };
+
+  formatUSD = (value?: number): string => {
+    if (!value) {
+      return '';
+    }
+    return `$${value.toFixed(2)}`;
+  };
+
+  render() {
+    return (
+      <div>
+        <p>
+          <h2>THIS BUG IS FIXED FOR NOW. TEST FOLLOWING FLOW:</h2>
+          1. Click the reblocks button to initiate a payment.<br />
+          2. Click the collapse button which sets the state of something irrelevant to the reblocks component.<br /><br />
+          <button onClick={() => this.setState({ something: "irrelevant" })}>Collapse reblocks component by setting irrevelant state of parent container.</button><br />
+          <button onClick={() => this.setState({ price: this.state.price + 1 })}>Update component by setting relevant state (price) of parent container.</button><br />
+          <button onClick={() => this.setState({ onSuccess: (data: PaymentResponse) => console.log(this.state.price) })}>Update component by setting relevant state (onSuccess) of parent container.</button><br />
+        </p>
+        <p>
+          <ReblocksPayment
+            accountId={this.state.accountId}
+            amount={this.state.price}
+            onPaymentSuccess={this.state.onSuccess}
+          />
+        </p>
+      </div>
+    );
+  }
+}
diff --git a/src/components/ReblocksPayment/ReblocksPayment.story.tsx b/src/components/ReblocksPayment/ReblocksPayment.story.tsx
index c6d5116..2cd5a44 100644
--- a/src/components/ReblocksPayment/ReblocksPayment.story.tsx
+++ b/src/components/ReblocksPayment/ReblocksPayment.story.tsx
@@ -6,6 +6,8 @@ import * as React from 'react';
 import { ACCOUNT_ID } from '../../lib/';
 
 import { BeerForm } from './BeerForm';
+import { CollapseBugTest } from './CollapseBugTest';
+
 import { PaymentForm } from './PaymentForm';
 import { PaymentResponse, ReblocksPayment } from './ReblocksPayment';
 
@@ -43,4 +45,7 @@ storiesOf('ReblocksPayment', module)
   })
   .add('Dynamic Button', () => {
     return <PaymentForm onSuccess={onSuccess} />;
+  })
+  .add('Collapse Bug Test', () => {
+    return <CollapseBugTest onSuccess={onSuccess} />;
   });
diff --git a/src/components/ReblocksPayment/ReblocksPayment.tsx b/src/components/ReblocksPayment/ReblocksPayment.tsx
index d40fe5b..6dccfd5 100644
--- a/src/components/ReblocksPayment/ReblocksPayment.tsx
+++ b/src/components/ReblocksPayment/ReblocksPayment.tsx
@@ -57,6 +57,12 @@ export class ReblocksPayment extends React.Component<Props, State> {
     );
   };
 
+  shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>) {
+    return (this.props.accountId !== nextProps.accountId
+      || this.props.amount !== nextProps.amount
+      || this.props.onPaymentSuccess !== nextProps.onPaymentSuccess)
+  }
+
   componentDidUpdate() {
     this.renderBrainblocksButton();
   }

From 3d28085549c38dd5d40cdf679e0d6de7a2dd1487 Mon Sep 17 00:00:00 2001
From: Brian <Brian@Roser.co>
Date: Sat, 28 Jul 2018 15:45:38 +0200
Subject: [PATCH 2/2] revert changes to beerform

---
 src/components/ReblocksPayment/BeerForm.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ReblocksPayment/BeerForm.tsx b/src/components/ReblocksPayment/BeerForm.tsx
index d943171..f7555b7 100644
--- a/src/components/ReblocksPayment/BeerForm.tsx
+++ b/src/components/ReblocksPayment/BeerForm.tsx
@@ -11,8 +11,6 @@ export interface Props {
 export interface State {
   currentXRBPrice?: number;
   xrbPerBeer?: number;
-  something?: string;
-  
 }
 
 export class BeerForm extends React.Component<Props, State> {
@@ -20,7 +18,7 @@ export class BeerForm extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    this.state = { currentXRBPrice: undefined, xrbPerBeer: undefined, something: undefined };
+    this.state = { currentXRBPrice: undefined, xrbPerBeer: undefined };
   }
 
   componentDidMount() {
@@ -53,7 +51,6 @@ export class BeerForm extends React.Component<Props, State> {
     return (
       <div>
         <p>
-    
           Current cost of a delicious IPA in Boston: {this.formatUSD(this.BEER_PRICE)}
           <br />
           {this.state.currentXRBPrice && (