From acef1130cb0ab180be48ffb5ae0d805c881db795 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 28 Feb 2019 14:04:55 -0300
Subject: [PATCH] cleanup, keep render function short

---
 src/routes/Faucet.tsx | 78 +++++++++++++++++++++++++------------------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/routes/Faucet.tsx b/src/routes/Faucet.tsx
index 2909dce..51f9404 100644
--- a/src/routes/Faucet.tsx
+++ b/src/routes/Faucet.tsx
@@ -13,7 +13,7 @@ interface FaucetState {
     eth?: string
 }
 
-class Faucet extends PureComponent<{}, FaucetState> {
+export default class Faucet extends PureComponent<{}, FaucetState> {
     public state = {
         isLoading: false,
         success: undefined,
@@ -37,6 +37,50 @@ class Faucet extends PureComponent<{}, FaucetState> {
         }
     }
 
+    private RequestMarkup = () => (
+        <User.Consumer>
+            {states => (
+                <Button
+                    primary
+                    onClick={() => this.getTokens(states.requestFromFaucet)}
+                >
+                    Request Ether
+                </Button>
+            )}
+        </User.Consumer>
+    )
+
+    private ActionMarkup = () => (
+        <div className={styles.action}>
+            {this.state.isLoading ? (
+                <Spinner message="Getting Ether..." />
+            ) : this.state.error ? (
+                <div className={styles.error}>
+                    {this.state.error}{' '}
+                    <Button link onClick={this.reset}>
+                        Try again
+                    </Button>
+                </div>
+            ) : this.state.success ? (
+                <div className={styles.success}>{this.state.success}</div>
+            ) : (
+                <this.RequestMarkup />
+            )}
+
+            <p>
+                You can only request Ether once every 24 hours for your address.
+            </p>
+        </div>
+    )
+
+    private reset = () => {
+        this.setState({
+            error: undefined,
+            success: undefined,
+            isLoading: false
+        })
+    }
+
     public render() {
         return (
             <Route
@@ -45,38 +89,8 @@ class Faucet extends PureComponent<{}, FaucetState> {
             >
                 <Web3message />
 
-                <div className={styles.action}>
-                    <User.Consumer>
-                        {states =>
-                            this.state.isLoading ? (
-                                <Spinner message="Getting Ether..." />
-                            ) : this.state.error ? (
-                                this.state.error
-                            ) : this.state.success ? (
-                                <div className={styles.success}>
-                                    {this.state.success}
-                                </div>
-                            ) : (
-                                <Button
-                                    primary
-                                    onClick={() =>
-                                        this.getTokens(states.requestFromFaucet)
-                                    }
-                                >
-                                    Request Ether
-                                </Button>
-                            )
-                        }
-                    </User.Consumer>
-
-                    <p>
-                        You can only request Ether once every 24 hours for your
-                        address.
-                    </p>
-                </div>
+                <this.ActionMarkup />
             </Route>
         )
     }
 }
-
-export default Faucet