From aed6f12e1b625ef0b63f208b11eabda3111b3621 Mon Sep 17 00:00:00 2001
From: hensm <m+github@matt.tf>
Date: Thu, 13 Dec 2018 11:35:31 +0000
Subject: [PATCH] Split bridge info into separate component

---
 ext/src/options/Bridge.jsx       | 102 +++++++++++++++++++++++++++++++
 ext/src/options/EditableList.jsx |   2 +-
 ext/src/options/index.jsx        |  97 ++---------------------------
 3 files changed, 107 insertions(+), 94 deletions(-)
 create mode 100644 ext/src/options/Bridge.jsx

diff --git a/ext/src/options/Bridge.jsx b/ext/src/options/Bridge.jsx
new file mode 100644
index 0000000..67fe330
--- /dev/null
+++ b/ext/src/options/Bridge.jsx
@@ -0,0 +1,102 @@
+import React, { Component } from "react";
+
+const _ = browser.i18n.getMessage;
+
+const BridgeStats = (props) => (
+    <table className="bridge__stats">
+        <tr>
+            <th>{ _("optionsBridgeStatsName") }</th>
+            <td>{ props.info.name }</td>
+        </tr>
+        <tr>
+            <th>{ _("optionsBridgeStatsVersion") }</th>
+            <td>{ props.info.version }</td>
+        </tr>
+        <tr>
+            <th>{ _("optionsBridgeStatsExpectedVersion") }</th>
+            <td>{ props.info.expectedVersion }</td>
+        </tr>
+        <tr>
+            <th>{ _("optionsBridgeStatsCompatibility") }</th>
+            <td>
+                { do {
+                    if (props.info.isVersionCompatible) {
+                        if (props.info.isVersionExact) {
+                            _("optionsBridgeCompatible")
+                        } else {
+                            _("optionsBridgeLikelyCompatible")
+                        }
+                    } else {
+                        _("optionsBridgeIncompatible")
+                    }
+                }}
+            </td>
+        </tr>
+        <tr>
+            <th>{ _("optionsBridgeStatsRecommendedAction") }</th>
+            <td>
+                { do {
+                    if (props.info.isVersionOlder) {
+                        _("optionsBridgeOlderAction")
+                    } else if (props.info.isVersionNewer) {
+                        _("optionsBridgeNewerAction")
+                    } else {
+                        _("optionsBridgeNoAction")
+                    }
+                }}
+            </td>
+        </tr>
+    </table>
+);
+
+export default (props) => (
+    <div className="bridge">
+        { do {
+            if (props.loading) {
+                <div className="bridge__loading">
+                    { _("optionsBridgeLoading") }
+                    <progress></progress>
+                </div>
+            } else {
+                const infoClasses = `bridge__info ${props.info
+                    ? "bridge__info--found"
+                    : "bridge__info--not-found"}`;
+
+                const [ statusIcon, statusText ] = do {
+                    if (!props.info) {
+                        [ "assets/icons8-cancel-120.png"
+                          , _("optionsBridgeNotFoundStatusText") ]
+                    } else {
+                        if (props.info.isVersionCompatible) {
+                            [ "assets/icons8-ok-120.png"
+                              , _("optionsBridgeFoundStatusText") ]
+                        } else {
+                            [ "assets/icons8-warn-120.png"
+                              , _("optionsBridgeIssueStatusText") ]
+                        }
+                    }
+                };
+
+                <div className={infoClasses}>
+                    <div className="bridge__status">
+                        <img className="bridge__status-icon"
+                             width="60" height="60"
+                             src={ statusIcon } />
+
+                        <h2 className="bridge__status-text">
+                            { statusText }
+                        </h2>
+                    </div>
+
+                    { do {
+                        if (props.info) {
+                            <BridgeStats info={ props.info }/>
+                        } else {
+                            // TODO: Download links
+                        }
+                    }}
+                </div>
+            }
+        }}
+    </div>
+);
diff --git a/ext/src/options/EditableList.jsx b/ext/src/options/EditableList.jsx
index 0ab13b5..80d260e 100644
--- a/ext/src/options/EditableList.jsx
+++ b/ext/src/options/EditableList.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import EditableListItem     from "./EditableListItem";
+import EditableListItem from "./EditableListItem";
 
 const _ = browser.i18n.getMessage;
 
diff --git a/ext/src/options/index.jsx b/ext/src/options/index.jsx
index ba3cba9..8d2bdd9 100644
--- a/ext/src/options/index.jsx
+++ b/ext/src/options/index.jsx
@@ -4,7 +4,9 @@ import React, { Component } from "react";
 import ReactDOM from "react-dom";
 
 import defaultOptions from "./defaultOptions";
+
 import EditableList from "./EditableList";
+import Bridge from "./Bridge";
 
 import getBridgeInfo from "../lib/getBridgeInfo";
 
@@ -165,99 +167,8 @@ class App extends Component {
     render () {
         return (
             <div>
-
-                <div className="bridge">
-                    { do {
-                        if (this.state.bridgeLoading) {
-                            <div className="bridge__loading">
-                                { _("optionsBridgeLoading") }
-                                <progress></progress>
-                            </div>
-                        } else {
-                            const { bridgeInfo } = this.state;
-
-                            const bridgeInfoClasses = `bridge__info ${bridgeInfo
-                                ? "bridge__info--found"
-                                : "bridge__info--not-found"}`;
-
-                            const [ statusIcon, statusText ] = do {
-                                if (!bridgeInfo) {
-                                    [ "assets/icons8-cancel-120.png"
-                                      , _("optionsBridgeNotFoundStatusText") ]
-                                } else {
-                                    if (bridgeInfo.isVersionCompatible) {
-                                        [ "assets/icons8-ok-120.png"
-                                          , _("optionsBridgeFoundStatusText") ]
-                                    } else {
-                                        [ "assets/icons8-warn-120.png"
-                                          , _("optionsBridgeIssueStatusText") ]
-                                    }
-                                }
-                            };
-
-                            <div className={bridgeInfoClasses}>
-                                <div className="bridge__status">
-                                    <img className="bridge__status-icon"
-                                         width="60" height="60"
-                                         src={ statusIcon } />
-
-                                    <h2 className="bridge__status-text">
-                                        { statusText }
-                                    </h2>
-                                </div>
-
-                                { do { if (bridgeInfo) {
-                                    <table className="bridge__stats">
-                                        <tr>
-                                            <th>{ _("optionsBridgeStatsName") }</th>
-                                            <td>{ bridgeInfo.name }</td>
-                                        </tr>
-                                        <tr>
-                                            <th>{ _("optionsBridgeStatsVersion") }</th>
-                                            <td>{ bridgeInfo.version }</td>
-                                        </tr>
-                                        <tr>
-                                            <th>{ _("optionsBridgeStatsExpectedVersion") }</th>
-                                            <td>{ bridgeInfo.expectedVersion }</td>
-                                        </tr>
-                                        <tr>
-                                            <th>{ _("optionsBridgeStatsCompatibility") }</th>
-                                            <td>
-                                                { do {
-                                                    if (bridgeInfo.isVersionCompatible) {
-                                                        if (bridgeInfo.isVersionExact) {
-                                                            _("optionsBridgeCompatible")
-                                                        } else {
-                                                            _("optionsBridgeLikelyCompatible")
-                                                        }
-                                                    } else {
-                                                        _("optionsBridgeIncompatible")
-                                                    }
-                                                }}
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <th>{ _("optionsBridgeStatsRecommendedAction") }</th>
-                                            <td>
-                                                { do {
-                                                    if (bridgeInfo.isVersionOlder) {
-                                                        _("optionsBridgeOlderAction")
-                                                    } else if (bridgeInfo.isVersionNewer) {
-                                                        _("optionsBridgeNewerAction")
-                                                    } else {
-                                                        _("optionsBridgeNoAction")
-                                                    }
-                                                }}
-                                            </td>
-                                        </tr>
-                                    </table>
-                                } else {
-                                    // TODO: Download links
-                                }}}
-                            </div>
-                        }
-                    }}
-                </div>
+                <Bridge info={ this.state.bridgeInfo }
+                        loading={ this.state.bridgeLoading } />
 
                 <form id="form" ref={ form => { this.form = form; }}
                         onSubmit={ this.handleFormSubmit }