refactor(react): ternary conditional classnames

React v16.x reports errors when using boolean operators for conditional
classnames and requires that you instead use ternary style conditional
clauses.

app/components/Activity/InvoiceModal.js

@@ -69,7 +69,7 @@ const InvoiceModal = ({
                   <FaAngleDown />
                 </span>
               </section>
-              <ul className={showCurrencyFilters && styles.active}>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
                 {currentCurrencyFilters.map(filter => (
                   <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                     {filter.name}
@@ -81,7 +81,7 @@ const InvoiceModal = ({
               <p>
                 <Moment format="MM/DD/YYYY">{invoice.creation_date * 1000}</Moment>
               </p>
-              <p className={styles.notPaid}>{!invoice.settled && 'Not Paid'}</p>
+              {!invoice.settled && <p className={styles.notPaid}>Not Paid</p>}
             </section>
           </div>
 

app/components/Activity/PaymentModal.js

@@ -46,7 +46,7 @@ const PaymentModal = ({
 
     <div className={styles.amount}>
       <h1>
-        <i className={`${styles.symbol} ${payment.value > 0 && styles.active}`}>-</i>
+        <i className={`${styles.symbol} ${payment.value > 0 ? styles.active : undefined}`}>-</i>
         <Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} />
       </h1>
       <section
@@ -57,7 +57,7 @@ const PaymentModal = ({
         <span>
           <FaAngleDown />
         </span>
-        <ul className={showCurrencyFilters && styles.active}>
+        <ul className={showCurrencyFilters ? styles.active : undefined}>
           {currentCurrencyFilters.map(filter => (
             <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
               {filter.name}

app/components/Activity/TransactionModal.js

@@ -65,7 +65,7 @@ const TransactionModal = ({
 
     <div className={styles.amount}>
       <h1>
-        <i className={`${styles.symbol} ${transaction.received && styles.active}`}>
+        <i className={`${styles.symbol} ${transaction.received ? styles.active : undefined}`}>
           {transaction.received ? '+' : '-'}
         </i>
         <Value
@@ -82,7 +82,7 @@ const TransactionModal = ({
         <span>
           <FaAngleDown />
         </span>
-        <ul className={showCurrencyFilters && styles.active}>
+        <ul className={showCurrencyFilters ? styles.active : undefined}>
           {currentCurrencyFilters.map(filter => (
             <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
               {filter.name}

app/components/Contacts/ConnectManually.js

@@ -63,7 +63,9 @@ class ConnectManually extends React.Component {
           </div>
         </section>
 
-        <section className={`${styles.errorMessage} ${showErrors.manualInput && styles.active}`}>
+        <section
+          className={`${styles.errorMessage} ${showErrors.manualInput ? styles.active : undefined}`}
+        >
           {showErrors.manualInput && (
             <span>{manualFormIsValid && manualFormIsValid.errors.manualInput}</span>
           )}
@@ -71,7 +73,7 @@ class ConnectManually extends React.Component {
 
         <section className={styles.submit}>
           <div
-            className={`${styles.button} ${manualFormIsValid.isValid && styles.active}`}
+            className={`${styles.button} ${manualFormIsValid.isValid ? styles.active : undefined}`}
             onClick={formSubmitted}
           >
             Submit

app/components/Contacts/ContactModal.js

@@ -61,7 +61,7 @@ const ContactModal = ({
       {channel && (
         <div className={styles.container}>
           <header className={styles.header}>
-            <div className={`${styles.status} ${channel.active && styles.online}`}>
+            <div className={`${styles.status} ${channel.active ? styles.online : undefined}`}>
               <FaCircle style={{ verticalAlign: 'top' }} />
               <span>{channel.active ? 'Online' : 'Offline'}</span>
             </div>

app/components/Contacts/ContactsForm.js

@@ -208,7 +208,9 @@ class ContactsForm extends React.Component {
               </section>
 
               <section
-                className={`${styles.errorMessage} ${showErrors.manualInput && styles.active}`}
+                className={`${styles.errorMessage} ${
+                  showErrors.manualInput ? styles.active : undefined
+                }`}
               >
                 {showErrors.manualInput && (
                   <span>{manualFormIsValid && manualFormIsValid.errors.manualInput}</span>

app/components/Contacts/Network.js

@@ -180,11 +180,11 @@ class Network extends Component {
               <section>
                 <h2 onClick={toggleFilterPulldown} className={styles.filterTitle}>
                   {filter.name}{' '}
-                  <span className={filterPulldown && styles.pulldown}>
+                  <span className={filterPulldown ? styles.pulldown : undefined}>
                     <FaAngleDown />
                   </span>
                 </h2>
-                <ul className={`${styles.filters} ${filterPulldown && styles.active}`}>
+                <ul className={`${styles.filters} ${filterPulldown ? styles.active : undefined}`}>
                   {nonActiveFilters.map(f => (
                     <li key={f.key} onClick={() => changeFilter(f)}>
                       {f.name}
@@ -208,7 +208,7 @@ class Network extends Component {
             <SuggestedNodes {...suggestedNodesProps} />
           )}
 
-          <ul className={filterPulldown && styles.fade}>
+          <ul className={filterPulldown ? styles.fade : undefined}>
             {loadingChannelPubkeys.length > 0 &&
               loadingChannelPubkeys.map(loadingPubkey => {
                 // TODO(jimmymow): refactor this out. same logic is in displayNodeName above
@@ -242,8 +242,9 @@ class Network extends Component {
                 return (
                   <li
                     key={index}
-                    className={`${styles.channel} ${selectedChannel === channel &&
-                      styles.selectedChannel}`}
+                    className={`${styles.channel} ${
+                      selectedChannel === channel ? styles.selectedChannel : undefined
+                    }`}
                     onClick={() => channelClicked(channel)}
                   >
                     <section className={styles.channelTitle}>

app/components/Contacts/SubmitChannelForm.js

@@ -92,7 +92,7 @@ class SubmitChannelForm extends React.Component {
                   <FaAngleDown />
                 </span>
               </section>
-              <ul className={showCurrencyFilters && styles.active}>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
                 {currentCurrencyFilters.map(filter => (
                   <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                     {filter.name}
@@ -107,7 +107,7 @@ class SubmitChannelForm extends React.Component {
 
         <section className={styles.submit}>
           <div
-            className={`${styles.button} ${contactCapacity > 0 && styles.active}`}
+            className={`${styles.button} ${contactCapacity > 0 ? styles.active : undefined}`}
             onClick={formSubmitted}
           >
             Submit

app/components/Form/Pay.js

@@ -88,7 +88,9 @@ class Pay extends Component {
           <section className={styles.destination}>
             <div className={styles.top}>
               <label htmlFor="paymentRequest">Destination</label>
-              <span className={`${styles.description} ${(isOnchain || isLn) && styles.active}`}>
+              <span
+                className={`${styles.description} ${isOnchain || isLn ? styles.active : undefined}`}
+              >
                 {isOnchain && (
                   <i>
                     <Isvg src={link} />
@@ -114,7 +116,11 @@ class Pay extends Component {
                 id="paymentRequest"
                 rows="4"
               />
-              <section className={`${styles.errorMessage} ${showErrors.payInput && styles.active}`}>
+              <section
+                className={`${styles.errorMessage} ${
+                  showErrors.payInput ? styles.active : undefined
+                }`}
+              >
                 {showErrors.payInput && <span>{errors.payInput}</span>}
               </section>
             </div>
@@ -150,7 +156,7 @@ class Pay extends Component {
                     <FaAngleDown />
                   </span>
                 </section>
-                <ul className={showCurrencyFilters && styles.active}>
+                <ul className={showCurrencyFilters ? styles.active : undefined}>
                   {currentCurrencyFilters.map(filter => (
                     <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                       {filter.name}
@@ -163,15 +169,19 @@ class Pay extends Component {
             <div className={styles.usdAmount}>{`≈ ${usdAmount || 0} USD`}</div>
 
             <section
-              className={`${styles.errorMessage} ${styles.amount} ${showErrors.amount &&
-                styles.active}`}
+              className={`${styles.errorMessage} ${styles.amount} ${
+                showErrors.amount ? styles.active : undefined
+              }`}
             >
               {showErrors.amount && <span>{errors.amount}</span>}
             </section>
           </section>
 
           <section className={styles.submit}>
-            <div className={`${styles.button} ${isValid && styles.active}`} onClick={onPaySubmit}>
+            <div
+              className={`${styles.button} ${isValid ? styles.active : undefined}`}
+              onClick={onPaySubmit}
+            >
               Pay
             </div>
           </section>

app/components/Form/Request.js

@@ -62,7 +62,7 @@ const Request = ({
                   <FaAngleDown />
                 </span>
               </section>
-              <ul className={showCurrencyFilters && styles.active}>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
                 {currentCurrencyFilters.map(filter => (
                   <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                     {filter.name}
@@ -92,7 +92,7 @@ const Request = ({
 
         <section className={styles.submit}>
           <div
-            className={`${styles.button} ${amount > 0 && styles.active}`}
+            className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
             onClick={onRequestSubmit}
           >
             Request

app/components/GlobalError/GlobalError.js

@@ -15,7 +15,7 @@ class GlobalError extends React.Component {
     const { error, clearError } = this.props
 
     return (
-      <div className={`${styles.container} ${!error && styles.closed}`}>
+      <div className={`${styles.container} ${!error ? styles.closed : undefined}`}>
         <div className={styles.content}>
           <div className={styles.close} onClick={clearError}>
             <MdClose />

app/components/Onboarding/Autopilot.js

@@ -6,13 +6,17 @@ import styles from './Autopilot.scss'
 
 const Autopilot = ({ autopilot, setAutopilot }) => (
   <div className={styles.container}>
-    <section className={`${styles.enable} ${autopilot && styles.active}`}>
+    <section className={`${styles.enable} ${autopilot ? styles.active : undefined}`}>
       <div onClick={() => setAutopilot(true)}>
         {autopilot ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>Enable Autopilot</span>
       </div>
     </section>
-    <section className={`${styles.disable} ${!autopilot && autopilot !== null && styles.active}`}>
+    <section
+      className={`${styles.disable} ${
+        !autopilot && autopilot !== null ? styles.active : undefined
+      }`}
+    >
       <div onClick={() => setAutopilot(false)}>
         {!autopilot && autopilot !== null ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>Disable Autopilot</span>

app/components/Onboarding/ConnectionDetails.js

@@ -19,7 +19,7 @@ const ConnectionDetails = ({
       <input
         type="text"
         id="connectionHost"
-        className={`${styles.host} ${startLndHostError && styles.error}`}
+        className={`${styles.host} ${startLndHostError ? styles.error : undefined}`}
         ref={input => input}
         value={connectionHost}
         onChange={event => setConnectionHost(event.target.value)}
@@ -27,7 +27,7 @@ const ConnectionDetails = ({
       <p className={styles.description}>
         Hostname and port of the Lnd gRPC interface. Example: localhost:10009
       </p>
-      <p className={`${startLndHostError && styles.visible} ${styles.errorMessage}`}>
+      <p className={`${startLndHostError ? styles.visible : undefined} ${styles.errorMessage}`}>
         {startLndHostError}
       </p>
     </section>
@@ -36,13 +36,13 @@ const ConnectionDetails = ({
       <input
         type="text"
         id="connectionCert"
-        className={`${styles.cert} ${startLndCertError && styles.error}`}
+        className={`${styles.cert} ${startLndCertError ? styles.error : undefined}`}
         ref={input => input}
         value={connectionCert}
         onChange={event => setConnectionCert(event.target.value)}
       />
       <p className={styles.description}>Path to the lnd tls cert. Example: /path/to/tls.cert</p>
-      <p className={`${startLndCertError && styles.visible} ${styles.errorMessage}`}>
+      <p className={`${startLndCertError ? styles.visible : undefined} ${styles.errorMessage}`}>
         {startLndCertError}
       </p>
     </section>
@@ -51,7 +51,7 @@ const ConnectionDetails = ({
       <input
         type="text"
         id="connectionMacaroon"
-        className={`${styles.macaroon} ${startLndMacaroonError && styles.error}`}
+        className={`${styles.macaroon} ${startLndMacaroonError ? styles.error : undefined}`}
         ref={input => input}
         value={connectionMacaroon}
         onChange={event => setConnectionMacaroon(event.target.value)}
@@ -59,7 +59,7 @@ const ConnectionDetails = ({
       <p className={styles.description}>
         Path to the lnd macaroon file. Example: /path/to/admin.macaroon
       </p>
-      <p className={`${startLndMacaroonError && styles.visible} ${styles.errorMessage}`}>
+      <p className={`${startLndMacaroonError ? styles.visible : undefined} ${styles.errorMessage}`}>
         {startLndMacaroonError}
       </p>
     </section>

app/components/Onboarding/ConnectionType.js

@@ -6,13 +6,17 @@ import styles from './ConnectionType.scss'
 
 const ConnectionType = ({ connectionType, setConnectionType }) => (
   <div className={styles.container}>
-    <section className={`${styles.option} ${connectionType === 'local' && styles.active}`}>
+    <section
+      className={`${styles.option} ${connectionType === 'local' ? styles.active : undefined}`}
+    >
       <div className={`${styles.button}`} onClick={() => setConnectionType('local')}>
         {connectionType === 'local' ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>Default</span>
       </div>
     </section>
-    <section className={`${styles.option} ${connectionType === 'custom' && styles.active}`}>
+    <section
+      className={`${styles.option} ${connectionType === 'custom' ? styles.active : undefined}`}
+    >
       <div className={`${styles.button}`} onClick={() => setConnectionType('custom')}>
         {connectionType === 'custom' ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>Custom</span>

app/components/Onboarding/Login.js

@@ -7,7 +7,7 @@ const Login = ({ password, updatePassword, unlockingWallet, unlockWallet, unlock
     <input
       type="password"
       placeholder="Password"
-      className={`${styles.password} ${unlockWalletError.isError && styles.inputError}`}
+      className={`${styles.password} ${unlockWalletError.isError ? styles.inputError : undefined}`}
       ref={input => input && input.focus()}
       value={password}
       onChange={event => updatePassword(event.target.value)}
@@ -17,14 +17,14 @@ const Login = ({ password, updatePassword, unlockingWallet, unlockWallet, unlock
         }
       }}
     />
-    <p className={`${unlockWalletError.isError && styles.active} ${styles.error}`}>
+    <p className={`${unlockWalletError.isError ? styles.active : undefined} ${styles.error}`}>
       {unlockWalletError.message}
     </p>
 
     <section className={styles.buttons}>
       <div>
         <span
-          className={`${!unlockingWallet && styles.active} ${styles.button}`}
+          className={`${!unlockingWallet ? styles.active : undefined} ${styles.button}`}
           onClick={() => unlockWallet(password)}
         >
           {unlockingWallet ? <i className={styles.spinner} /> : 'Unlock'}

app/components/Onboarding/NewWalletPassword.js

@@ -15,7 +15,9 @@ const NewWalletPassword = ({
       <input
         type="password"
         placeholder="Password"
-        className={`${styles.password} ${showCreateWalletPasswordConfirmationError && styles.error} 
+        className={`${styles.password} ${
+          showCreateWalletPasswordConfirmationError ? styles.error : undefined
+        } 
         ${passwordMinCharsError && styles.error}`}
         value={createWalletPassword}
         onChange={event => updateCreateWalletPassword(event.target.value)}
@@ -26,18 +28,21 @@ const NewWalletPassword = ({
       <input
         type="password"
         placeholder="Confirm Password"
-        className={`${styles.password} ${showCreateWalletPasswordConfirmationError && styles.error} 
+        className={`${styles.password} ${
+          showCreateWalletPasswordConfirmationError ? styles.error : undefined
+        } 
         ${passwordMinCharsError && styles.error}`}
         value={createWalletPasswordConfirmation}
         onChange={event => updateCreateWalletPasswordConfirmation(event.target.value)}
       />
       <p
-        className={`${styles.errorMessage} ${showCreateWalletPasswordConfirmationError &&
-          styles.visible}`}
+        className={`${styles.errorMessage} ${
+          showCreateWalletPasswordConfirmationError ? styles.visible : undefined
+        }`}
       >
         Passwords do not match
       </p>
-      <p className={`${styles.helpMessage} ${passwordMinCharsError && styles.red}`}>
+      <p className={`${styles.helpMessage} ${passwordMinCharsError ? styles.red : undefined}`}>
         Password must be at least 8 characters long
       </p>
     </section>

app/components/Onboarding/Signup.js

@@ -6,13 +6,13 @@ import styles from './Signup.scss'
 
 const Signup = ({ signupForm, setSignupCreate, setSignupImport }) => (
   <div className={styles.container}>
-    <section className={`${styles.enable} ${signupForm.create && styles.active}`}>
+    <section className={`${styles.enable} ${signupForm.create ? styles.active : undefined}`}>
       <div onClick={setSignupCreate}>
         {signupForm.create ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>Create new wallet</span>
       </div>
     </section>
-    <section className={`${styles.disable} ${signupForm.import && styles.active}`}>
+    <section className={`${styles.disable} ${signupForm.import ? styles.active : undefined}`}>
       <div onClick={setSignupImport}>
         {signupForm.import ? <FaCircle /> : <FaCircleThin />}
         <span className={styles.label}>Import existing wallet</span>

app/components/Wallet/ReceiveModal.js

@@ -56,10 +56,16 @@ class ReceiveModal extends React.Component {
               <h2>{alias && alias.length ? alias : pubkey.substring(0, 10)}</h2>
 
               <div className={styles.qrCodeOptions}>
-                <div className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>
+                <div
+                  className={qrCodeType === 1 ? styles.active : undefined}
+                  onClick={changeQrCode}
+                >
                   Node Pubkey
                 </div>
-                <div className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>
+                <div
+                  className={qrCodeType === 2 ? styles.active : undefined}
+                  onClick={changeQrCode}
+                >
                   Bitcoin Address
                 </div>
               </div>

app/components/Wallet/Wallet.js

@@ -75,7 +75,7 @@ const Wallet = ({
                       <FaAngleDown />
                     </span>
 
-                    <ul className={info.showWalletCurrencyFilters && styles.active}>
+                    <ul className={info.showWalletCurrencyFilters ? styles.active : undefined}>
                       {currentCurrencyFilters.map(filter => (
                         <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
                           {filter.name}

app/routes/activity/components/Activity.js

@@ -155,12 +155,12 @@ class Activity extends Component {
                   {filters.map(f => (
                     <li
                       key={f.key}
-                      className={f.key === filter.key && styles.activeFilter}
+                      className={f.key === filter.key ? styles.activeFilter : undefined}
                       onClick={() => changeFilter(f)}
                     >
                       <span>{f.name}</span>
 
-                      <div className={f.key === filter.key && styles.activeBorder} />
+                      <div className={f.key === filter.key ? styles.activeBorder : undefined} />
                     </li>
                   ))}
                 </ul>
@@ -184,7 +184,11 @@ class Activity extends Component {
               </section>
             </header>
           )}
-          <ul className={`${styles.activityContainer} ${filterPulldown && styles.pulldown}`}>
+          <ul
+            className={`${styles.activityContainer} ${
+              filterPulldown ? styles.pulldown : undefined
+            }`}
+          >
             {currentActivity.map((activityBlock, index) => (
               <li className={styles.activity} key={index}>
                 <h2>{activityBlock.title}</h2>

app/routes/activity/components/components/Invoice/Invoice.js

@@ -10,7 +10,7 @@ import styles from '../Activity.scss'
 
 const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyName }) => (
   <div
-    className={`${styles.container} ${!invoice.settled && styles.unpaid}`}
+    className={`${styles.container} ${!invoice.settled ? styles.unpaid : undefined}`}
     onClick={() => showActivityModal('INVOICE', { invoice })}
   >
     <div className={styles.activityTypeIcon}>