Convert many smaller components to functional style (decred#652)

matheusd · Sep 11, 2017 · 7dfbfda · 7dfbfda
1 parent c3ef31e
commit 7dfbfda
Show file tree

Hide file tree

Showing 15 changed files with 124 additions and 225 deletions.
diff --git a/app/components/AgendaCard.js b/app/components/AgendaCard.js
@@ -1,47 +1,34 @@
-// @flow
 import React from "react";
 import "../style/AgendaCard.less";
 
 // Currently removing percent progress until a solution to populate is found
 // <div style={styles.agendaCardPercent}><span style={styles.agendaPercentNumber}>XX</span>%</div>
 // should go UNDER agendaCarBottomCfg div
-class AgendaCard extends React.Component {
-
-  render() {
-    let agendaCardProps;
-    if(!this.props.agenda.finished) {
-      agendaCardProps = { className: "agenda-card", onClick: this.props.onClick };
-    } else {
-      agendaCardProps = { className: "agenda-card-disabled" };
-    }
-
-    return (
-      <div {...agendaCardProps}>
-        <div className="agenda-card-bottom">
-          {this.renderIndicator()}
-          <div className="agenda-card-bottom-cfg">
-            {this.props.agenda.getDescription()} <span className="agenda-card-bottom-cfg-last">Agenda ID: <span className="agenda-card-bottom-cfg-last-bold">{this.props.agenda.getId()}</span></span>
-          </div>
-        </div>
-        <div className="agenda-card-top">
-          <div className="agenda-card-name">{this.props.agenda.getId()}</div>
-          <div className="agenda-card-top-preference">
-            Preference: <span className="agenda-card-text-highlight-small">{this.props.selectedChoice}</span>
-          </div>
-        </div>
+const AgendaCard = ({
+  agenda, onClick, selectedChoice
+}) => (
+  <div {...(
+    agenda.finished
+      ? ({ className: "agenda-card-disabled" })
+      : ({ className: "agenda-card", onClick })
+  )}>
+    <div className="agenda-card-bottom">
+      {agenda.finished ? (
+        <div className="agenda-card-indicator-finished">Finished</div>
+      ) : (
+        <div className="agenda-card-indicator-pending">In Progress</div>
+      )}
+      <div className="agenda-card-bottom-cfg">
+        {agenda.getDescription()} <span className="agenda-card-bottom-cfg-last">Agenda ID: <span className="agenda-card-bottom-cfg-last-bold">{agenda.getId()}</span></span>
       </div>
-    );
-  }
-
-  renderIndicator() {
-    if(this.props.agenda.finished) {
-      return <div className="agenda-card-indicator-finished">Finished</div>;
-    }
-    else {
-      return <div className="agenda-card-indicator-pending">In Progress</div>;
-    }
-  }
-
-}
+    </div>
+    <div className="agenda-card-top">
+      <div className="agenda-card-name">{agenda.getId()}</div>
+      <div className="agenda-card-top-preference">
+        Preference: <span className="agenda-card-text-highlight-small">{selectedChoice}</span>
+      </div>
+    </div>
+  </div>
+);
 
 export default AgendaCard;
diff --git a/app/components/AgendaClose.js b/app/components/AgendaClose.js
@@ -1,14 +1,8 @@
-// @flow
 import React from "react";
 import "../style/AgendaCard.less";
 
-class AgendaClose extends React.Component {
-  render() {
-    return (
-      <a className="agenda-overview-title-close" onClick={this.props.onClick}></a>
-    );
-
-  }
-}
+const AgendaClose = ({ onClick }) => (
+  <a className="agenda-overview-title-close" onClick={onClick}></a>
+);
 
 export default AgendaClose;
diff --git a/app/components/AutoBuyerSwitch.js b/app/components/AutoBuyerSwitch.js
@@ -1,17 +1,12 @@
-// @flow
 import React from "react";
 import "../style/StakePool.less";
 
-class AutoBuyerSwitch extends React.Component {
-  render() {
-    return (
-      <div className="autobuyer-switch">
-        <div className={this.props.enabled ? "autobuyer-switch-enabled" : "autobuyer-switch-disabled"} onClick={this.props.onClick}>
-          <div className={this.props.enabled ? "autobuyer-switch-knob-enabled" : "autobuyer-switch-knob-disabled"}></div>
-        </div>
-      </div>
-    );
-  }
-}
+const AutoBuyerSwitch = ({ enabled, onClick }) => (
+  <div className="autobuyer-switch">
+    <div className={enabled ? "autobuyer-switch-enabled" : "autobuyer-switch-disabled"} onClick={onClick}>
+      <div className={enabled ? "autobuyer-switch-knob-enabled" : "autobuyer-switch-knob-disabled"}></div>
+    </div>
+  </div>
+);
 
 export default AutoBuyerSwitch;
diff --git a/app/components/BalanceOverviewInfoModal.js b/app/components/BalanceOverviewInfoModal.js
@@ -1,39 +1,35 @@
-// @flow
 import React from "react";
 import SlateGrayButton from "./SlateGrayButton";
 import "../style/StakePool.less";
 
-class BalanceOverviewInfoModal extends React.Component {
-  render() {
-    return (
-      <div className="balance-overview-info-modal">
-        <div className="balance-overview-info-ticket-purchase">
-          <div className="balance-overview-info-ticket-purchase-header">
-            Balance Overview Information
-            <SlateGrayButton className="balance-overview-info-ticket-purchase-button" onClick={() =>this.props.closeModal()}>Close</SlateGrayButton>
-          </div>
-          <p className="balance-overview-info-ticket-purchase-text-column">
-            <span className="balance-overview-info-highlight-green">Total</span> - This is the total balance controlled by this account currently.
-            <br/>
-            <br/>
-            <span className="balance-overview-info-highlight-blue">Spendable Balance</span> - The spendable/accessible balance for the this account.
-            <br/>
-            <br/>
-            <span className="balance-overview-info-highlight-blue">Locked By Tickets</span> - This is the balance that is currently locked by tickets for this account. Once the tickets are voted or revoked these funds will be unlocked.
-            <br/>
-            <br/>
-            <span className="balance-overview-info-highlight-blue">Voting Authority</span> - This balance shows the total amount that this account has voting authority over.  For example, if you use a voting-only wallet this will show that total amount controlled.
-            <br/>
-            <br/>
-            <span className="balance-overview-info-highlight-blue">Immature Rewards</span> - These are regular coinbase rewards that are currently maturing (from PoW mining reward for instance).
-            <br/>
-            <br/>
-            <span className="balance-overview-info-highlight-blue">Immature Stake Generation </span>- This balance shows the current stake rewards and revocations that are awaiting maturity (256 blocks on mainnet).</p>
-            <br/>
-            <br/>
-        </div>
-      </div>);
-  }
-}
+const BalanceOverviewInfoModal = ({ closeModal }) => (
+  <div className="balance-overview-info-modal">
+    <div className="balance-overview-info-ticket-purchase">
+      <div className="balance-overview-info-ticket-purchase-header">
+        Balance Overview Information
+        <SlateGrayButton className="balance-overview-info-ticket-purchase-button" onClick={closeModal}>Close</SlateGrayButton>
+      </div>
+      <p className="balance-overview-info-ticket-purchase-text-column">
+        <span className="balance-overview-info-highlight-green">Total</span> - This is the total balance controlled by this account currently.
+        <br/>
+        <br/>
+        <span className="balance-overview-info-highlight-blue">Spendable Balance</span> - The spendable/accessible balance for the this account.
+        <br/>
+        <br/>
+        <span className="balance-overview-info-highlight-blue">Locked By Tickets</span> - This is the balance that is currently locked by tickets for this account. Once the tickets are voted or revoked these funds will be unlocked.
+        <br/>
+        <br/>
+        <span className="balance-overview-info-highlight-blue">Voting Authority</span> - This balance shows the total amount that this account has voting authority over.  For example, if you use a voting-only wallet this will show that total amount controlled.
+        <br/>
+        <br/>
+        <span className="balance-overview-info-highlight-blue">Immature Rewards</span> - These are regular coinbase rewards that are currently maturing (from PoW mining reward for instance).
+        <br/>
+        <br/>
+        <span className="balance-overview-info-highlight-blue">Immature Stake Generation </span>- This balance shows the current stake rewards and revocations that are awaiting maturity (256 blocks on mainnet).</p>
+        <br/>
+        <br/>
+    </div>
+  </div>
+);
 
 export default BalanceOverviewInfoModal;
diff --git a/app/components/DecredLoading.js b/app/components/DecredLoading.js
@@ -1,23 +1,12 @@
-// @flow
 import React from "react";
-import { PropTypes } from "prop-types";
 import "../style/Loading.less";
 
-class DecredLoading extends React.Component {
-
-  static propTypes = {
-    hidden: PropTypes.bool
-  };
-
-  render() {
-    return (
-      <div
-        className={"loading" + (this.props.className ? (" " + this.props.className) : "")}
-        style={{display: this.props.hidden ? "none" : "block"}}>
-        <div className="logo"/>
-      </div>
-    );
-  }
-}
+const DecredLoading = ({ hidden, className }) => (
+  <div
+    className={"loading" + (className ? (" " + className) : "")}
+    style={{display: hidden ? "none" : "block"}}>
+    <div className="logo"/>
+  </div>
+);
 
 export default DecredLoading;
diff --git a/app/components/ErrorScreen.js b/app/components/ErrorScreen.js
@@ -1,15 +1,11 @@
-// @flow
-import React, { Component } from "react";
+import React from "react";
 import { Link } from "react-router";
 
-class ErrorScreen extends Component {
-  render() {
-    const errorView = (
-      <div>
-        <p> Something went wrong, please go back </p>
-        <Link to='/'>Back home</Link>
-      </div>);
-    return (errorView);
-  }
-}
+const ErrorScreen = () => (
+  <div>
+    <p> Something went wrong, please go back </p>
+    <Link to='/'>Back home</Link>
+  </div>
+);
+
 export default ErrorScreen;
diff --git a/app/components/HelpLink.js b/app/components/HelpLink.js
@@ -1,16 +1,9 @@
-// @flow
 import React from "react";
 import { shell } from "electron";
 import "../style/MiscComponents.less";
 
-class HelpLink extends React.Component {
-  render() {
-    return (
-      <a className="help-link" onClick={function(x){shell.openExternal(x);}.bind(null, this.props.href)}>
-        {this.props.children}
-      </a>
-    );
-  }
-}
+const HelpLink = ({ href, children }) => (
+  <a className="help-link" onClick={() => shell.openExternal(href)}>{children}</a>
+);
 
 export default HelpLink;
diff --git a/app/components/ManagePoolsButton.js b/app/components/ManagePoolsButton.js
@@ -1,14 +1,8 @@
-// @flow
 import React from "react";
 import "../style/MiscComponents.less";
 
-class ManagePoolsButton extends React.Component {
-  render() {
-    return (
-      <a className="manage-pools-button" onClick={this.props.onClick} />
-    );
-
-  }
-}
+const ManagePoolsButton = ({ onClick }) => (
+  <a className="manage-pools-button" onClick={onClick} />
+);
 
 export default ManagePoolsButton;
diff --git a/app/components/MenuLink.js b/app/components/MenuLink.js
@@ -1,15 +1,10 @@
-// @flow
 import React from "react";
 import { Link } from "react-router";
 
-class MenuLink extends React.Component {
-  render() {
-    return (
-      <Link to={this.props.to} className="menu-navigation-link" activeClassName="menu-navigation-link-active">
-        {this.props.children}
-      </Link>
-    );
-  }
-}
+const MenuLink = ({ to, children }) => (
+  <Link to={to} className="menu-navigation-link" activeClassName="menu-navigation-link-active">
+    {children}
+  </Link>
+);
 
 export default MenuLink;
diff --git a/app/components/NumTicketsInput.js b/app/components/NumTicketsInput.js
@@ -1,23 +1,21 @@
-// @flow
 import React from "react";
 import "../style/NumTicketsInput.less";
 
-class NumTicketsInput extends React.Component {
-  render() {
-    return (
-      <div className="num-tickets-input-area">
-        <div className="num-tickets-input">
-          <input className="num-tickets-input-value" type="text" readOnly placeholder="" value={this.props.numTickets} data-max-width="70"/>
-          <span className="num-tickets-input-value-span">10000</span>
-        </div>
-        <div className="num-tickets-more-less">
-          <a key="more" className="num-tickets-more" onClick={()=>this.props.incrementNumTickets()}></a>
-          <a key="less" className="num-tickets-less" onClick={()=>this.props.decrementNumTickets()}></a>
-        </div>
-      </div>
-    );
-
-  }
-}
+const NumTicketsInput = ({
+  numTickets,
+  incrementNumTickets,
+  decrementNumTickets
+}) => (
+  <div className="num-tickets-input-area">
+    <div className="num-tickets-input">
+      <input className="num-tickets-input-value" type="text" readOnly placeholder="" value={numTickets} data-max-width="70"/>
+      <span className="num-tickets-input-value-span">10000</span>
+    </div>
+    <div className="num-tickets-more-less">
+      <a key="more" className="num-tickets-more" onClick={incrementNumTickets}></a>
+      <a key="less" className="num-tickets-less" onClick={decrementNumTickets}></a>
+    </div>
+  </div>
+);
 
 export default NumTicketsInput;
diff --git a/app/components/PurchaseTicketsInfoButton.js b/app/components/PurchaseTicketsInfoButton.js
@@ -1,11 +1,8 @@
-// @flow
 import React from "react";
 import "../style/MiscComponents.less";
 
-class PurchaseTicketsInfoButton extends React.Component {
-  render() {
-    return <a className="purchase-tickets-info-button" onClick={this.props.onClick} />;
-  }
-}
+const PurchaseTicketsInfoButton = ({ onClick }) => (
+  <a className="purchase-tickets-info-button" onClick={onClick} />
+);
 
 export default PurchaseTicketsInfoButton;
diff --git a/app/components/ShowError.js b/app/components/ShowError.js
@@ -1,14 +1,7 @@
-// @flow
-import React, { Component } from "react";
+import React from "react";
 
-class ShowError extends Component {
-  render() {
-    const { error, className } = this.props;
-    if (error === null) {
-      return null;
-    }
+const ShowError = ({ error, className }) => !error ? null : (
+  <div className={"error" + (className ? (" " + className) : "")}>{error}</div>
+);
 
-    return <div className={"error" + (className ? (" " + className) : "")}>{error}</div>;
-  }
-}
 export default ShowError;