Split HomePage into logic and presentation

app/components/views/HomePage/Page.js

@@ -0,0 +1,79 @@
+// @flow
+import React from "react";
+import ReactToolTip from "react-tooltip";
+import rescan from "../../../connectors/rescan";
+import home from "../../../connectors/home";
+import RescanProgress from "./RescanProgress";
+import DecredLoading from "../../DecredLoading";
+import KeyBlueButton from "../../KeyBlueButton";
+import Balance from "../../Balance";
+import SideBar from "../../SideBar";
+import TxHistory from "../../TxHistory";
+import Header from "../../Header";
+import "../../fonts.css";
+import { HomeStyles } from "../ViewStyles";
+
+const HomePage = ({
+  synced,
+  rescanRequest,
+  spendableTotalBalance,
+  rescanAttempt,
+  mined,
+  unmined,
+  getTransactionsRequestAttempt,
+  getAccountsResponse
+}) => (
+  <div style={HomeStyles.body}>
+    <SideBar />
+    <div style={HomeStyles.view}>
+      {rescanRequest ? (
+        <Header
+          headerTitleOverview="Rescanning"
+          headerMetaOverview={<RescanProgress/>}
+        />
+      ) : (
+        <Header
+          headerTop={synced ? null : (
+            <div key="notSynced" style={HomeStyles.viewNotificationNotSynced}>
+              Wallet not synced. Note: Balances will not be accurate until syncing is complete.
+            </div>
+          )}
+          headerTitleOverview="Available Balance"
+          headerMetaOverview={
+            <div>
+              <Balance amount={spendableTotalBalance} />
+              <div style={HomeStyles.rescanButtonArea} data-tip="Rescanning the blockchain may resolve some balance errors.">
+                <KeyBlueButton onClick={() => rescanAttempt(0)}>Rescan</KeyBlueButton>
+              </div>
+              <ReactToolTip place="left" type="info" effect="solid"/>
+            </div>
+          }
+        />
+      )}
+      {getTransactionsRequestAttempt ? (
+        <div style={HomeStyles.content}><DecredLoading/></div>
+      ) : (
+        <div style={HomeStyles.content}>
+          <div style={HomeStyles.contentTitle}>
+            <div style={HomeStyles.contentTitleText}>Recent Transactions</div>
+          </div>
+          <div style={HomeStyles.contentNest}>
+            {(mined.length > 0 || unmined.length > 0) ? (
+              <TxHistory {...{ getAccountsResponse, mined, unmined }} />
+            ) : (
+              <p>No transactions</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+);
+
+export default home(rescan(HomePage));
+
+/*
+  This is the transaction search button that needs to get implemented
+  <div style={HomeStyles.contentTitleButtonSearch}></div>
+
+*/

app/components/views/HomePage/RescanProgress.js

@@ -0,0 +1,24 @@
+import React from "react";
+import LinearProgress from "material-ui/LinearProgress";
+import { HomeStyles } from "../ViewStyles";
+import rescan from "../../../connectors/rescan";
+
+const RescanProgress = ({
+  rescanStartBlock,
+  rescanEndBlock,
+  rescanCurrentBlock,
+  rescanPercentFinished
+}) => (
+  <div style={HomeStyles.rescanProgressArea} >
+    <LinearProgress
+      mode="determinate"
+      min={rescanStartBlock}
+      max={rescanEndBlock}
+      value={rescanCurrentBlock}
+    />
+    <span style={HomeStyles.rescanProgressFraction}>{rescanCurrentBlock}/{rescanEndBlock}</span>
+    <span style={HomeStyles.rescanProgressPercent}>{rescanPercentFinished}%</span>
+  </div>
+);
+
+export default rescan(RescanProgress);

app/components/views/HomePage/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ErrorScreen from "../../ErrorScreen";
+import HomePage from "./Page";
+import service from "../../../connectors/service";
+
+const Home = ({ walletService, ...props }) =>
+  walletService
+    ? <HomePage {...props} />
+    : <ErrorScreen />;
+
+export default service(Home);

app/connectors/home.js

@@ -0,0 +1,26 @@
+// @flow
+import { connect } from "react-redux";
+import { selectorMap } from "../fp";
+import {
+  getTransactionsRequestAttempt,
+  getAccountsResponse,
+  txPerPage,
+  spendableTotalBalance,
+  transactions,
+  synced,
+  unmined,
+  homeHistoryMined
+} from "../selectors";
+
+const mapStateToProps = selectorMap({
+  getTransactionsRequestAttempt,
+  getAccountsResponse,
+  txPerPage,
+  spendableTotalBalance,
+  transactions,
+  synced,
+  unmined,
+  mined: homeHistoryMined
+});
+
+export default connect(mapStateToProps);

app/connectors/rescan.js

@@ -0,0 +1,26 @@
+// @flow
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import { selectorMap } from "../fp";
+import { rescanAttempt } from "../actions/ControlActions";
+import {
+  rescanRequest,
+  rescanStartBlock,
+  rescanEndBlock,
+  rescanCurrentBlock,
+  rescanPercentFinished
+} from "../selectors";
+
+const mapStateToProps = selectorMap({
+  rescanRequest,
+  rescanStartBlock,
+  rescanEndBlock,
+  rescanCurrentBlock,
+  rescanPercentFinished
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+  rescanAttempt
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps);

app/connectors/service.js

@@ -0,0 +1,7 @@
+import { connect } from "react-redux";
+import { selectorMap } from "../fp";
+import { walletService } from "../selectors";
+
+const mapStateToProps = selectorMap({ walletService });
+
+export default connect(mapStateToProps);