Merge branch 'Remove-React-if'

4 files changed, 65 insertions, 82 deletions

diff --git a/app/components/Account.js b/app/components/Account.js
index 215014e543..47c11a622c 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -1,7 +1,6 @@
 // @flow
 import moment from 'moment';
 import React, { Component } from 'react';
-import { If, Then, Else } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { formatAccount } from '../lib/formatters';
 import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
@@ -49,14 +48,11 @@ export default class Account extends Component {
 
                   <div className="account__row">
                     <div className="account__row-label">Paid until</div>
-                    <If condition={ isOutOfTime }>
-                      <Then>
-                        <div className="account__out-of-time account__row-value account__row-value--error">OUT OF TIME</div>
-                      </Then>
-                      <Else>
-                        <div className="account__row-value">{ formattedExpiry }</div>
-                      </Else>
-                    </If>
+                    { isOutOfTime ?
+                      <div className="account__out-of-time account__row-value account__row-value--error">OUT OF TIME</div>
+                      :
+                      <div className="account__row-value">{ formattedExpiry }</div>
+                    }
                   </div>
 
                   <div className="account__footer">
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 2412a35872..fdbe927b77 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -2,7 +2,6 @@
 
 import moment from 'moment';
 import React, { Component } from 'react';
-import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { BackendError } from '../lib/backend';
 
@@ -79,16 +78,15 @@ export default class Connect extends Component {
           <div className="connect__error-message">
             { error.message }
           </div>
-          <If condition={ error.type === 'NO_CREDIT' }>
-            <Then>
-              <div>
-                <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }>
-                  <span className="button-label">Buy more time</span>
-                  <ExternalLinkSVG className="button-icon button-icon--16" />
-                </button>
-              </div>
-            </Then>
-          </If>
+          { error.type === 'NO_CREDIT' ?
+            <div>
+              <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }>
+                <span className="button-label">Buy more time</span>
+                <ExternalLinkSVG className="button-icon button-icon--16" />
+              </button>
+            </div>
+            : null
+          }
         </div>
       </div>
     );
@@ -193,31 +191,28 @@ export default class Connect extends Component {
             { /* location when disconnected.
             TODO: merge with the isConnecting block below when implemented in backend.
             */ }
-            <If condition={ isDisconnected }>
-              <Then>
-                <div className="connect__status-location">
-                  <span>{ '\u2002' }</span>
-                </div>
-              </Then>
-            </If>
+            { isDisconnected ?
+              <div className="connect__status-location">
+                <span>{ '\u2002' }</span>
+              </div>
+              : null
+            }
 
             { /* location when connecting */ }
-            <If condition={ isConnecting }>
-              <Then>
-                <div className="connect__status-location">
-                  <span>{ this.props.connection.country }</span>
-                </div>
-              </Then>
-            </If>
+            { isConnecting ?
+              <div className="connect__status-location">
+                <span>{ this.props.connection.country }</span>
+              </div>
+              : null
+            }
 
             { /* location when connected */ }
-            <If condition={ isConnected }>
-              <Then>
-                <div className="connect__status-location">
-                  { this.props.connection.city }<br/>{ this.props.connection.country }
-                </div>
-              </Then>
-            </If>
+            { isConnected ?
+              <div className="connect__status-location">
+                { this.props.connection.city }<br/>{ this.props.connection.country }
+              </div>
+              : null
+            }
 
             { /*
               **********************************
@@ -238,52 +233,49 @@ export default class Connect extends Component {
           */ }
 
           { /* footer when disconnected */ }
-          <If condition={ isDisconnected }>
-            <Then>
-              <div className="connect__footer">
-                <div className="connect__row">
-                  <button className="connect__server button button--neutral button--blur" onClick={ this.props.onSelectLocation }>
-                    <div className="connect__server-label">{ this._getLocationName() }</div>
-                    <div className="connect__server-chevron"><ChevronRightSVG /></div>
-                  </button>
-                </div>
+          { isDisconnected ?
+            <div className="connect__footer">
+              <div className="connect__row">
+                <button className="connect__server button button--neutral button--blur" onClick={ this.props.onSelectLocation }>
+                  <div className="connect__server-label">{ this._getLocationName() }</div>
+                  <div className="connect__server-chevron"><ChevronRightSVG /></div>
+                </button>
+              </div>
 
-                <div className="connect__row">
-                  <button className="button button--positive" onClick={ this.props.onConnect }>Secure my connection</button>
-                </div>
+              <div className="connect__row">
+                <button className="button button--positive" onClick={ this.props.onConnect }>Secure my connection</button>
               </div>
-            </Then>
-          </If>
+            </div>
+            : null
+          }
 
           { /* footer when connecting */ }
-          <If condition={ isConnecting }>
-            <Then>
-              <div className="connect__footer">
-                <div className="connect__row">
-                  <button className="button button--neutral button--blur" onClick={ this.props.onSelectLocation }>Switch location</button>
-                </div>
+          { isConnecting ?
+            <div className="connect__footer">
+              <div className="connect__row">
+                <button className="button button--neutral button--blur" onClick={ this.props.onSelectLocation }>Switch location</button>
+              </div>
 
-                <div className="connect__row">
-                  <button className="button button--negative-light button--blur" onClick={ this.props.onDisconnect }>Cancel</button>
-                </div>
+              <div className="connect__row">
+                <button className="button button--negative-light button--blur" onClick={ this.props.onDisconnect }>Cancel</button>
               </div>
-            </Then>
-          </If>
+            </div>
+            : null
+          }
 
           { /* footer when connected */ }
-          <If condition={ isConnected }>
-            <Then>
-              <div className="connect__footer">
-                <div className="connect__row">
-                  <button className="button button--neutral button--blur" onClick={ this.props.onSelectLocation }>Switch location</button>
-                </div>
+          { isConnected ?
+            <div className="connect__footer">
+              <div className="connect__row">
+                <button className="button button--neutral button--blur" onClick={ this.props.onSelectLocation }>Switch location</button>
+              </div>
 
-                <div className="connect__row">
-                  <button className="button button--negative-light button--blur" onClick={ this.props.onDisconnect }>Disconnect</button>
-                </div>
+              <div className="connect__row">
+                <button className="button button--negative-light button--blur" onClick={ this.props.onDisconnect }>Disconnect</button>
               </div>
-            </Then>
-          </If>
+            </div>
+            : null
+          }
 
           { /*
             **********************************
diff --git a/package.json b/package.json
index 509c3e4982..1d31c92e1e 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-if": "^2.2.1",
     "react-mapbox-gl": "^2.1.0",
     "react-native": "^0.50.4",
     "react-native-windows": "^0.50.0-rc.2",
diff --git a/yarn.lock b/yarn.lock
index bc57a0a9c2..1ada9efd22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6356,10 +6356,6 @@ react-dom@^16.0.0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-if@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-if/-/react-if-2.2.1.tgz#b6a2a3a15d6f80fa4db43ed6d18ece6e9d12a11c"
-
 react-mapbox-gl@^2.1.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/react-mapbox-gl/-/react-mapbox-gl-2.8.0.tgz#8c6cda60274d37b7c2c1b7feebac3db19b0e5f4d"