From 1cbc96533b4d20faa4f218ce97e8a2058bdde578 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Thu, 17 Aug 2017 16:19:29 -0400
Subject: [PATCH] refactor wallet area

---
 app/main.js                            |  2 +-
 ui/js/component/router/view.jsx        |  8 +++++---
 ui/js/component/walletBalance/index.js | 15 ++++++++++++++
 ui/js/component/walletBalance/view.jsx | 28 ++++++++++++++++++++++++++
 ui/js/page/{filePage => file}/index.js |  0
 ui/js/page/{filePage => file}/view.jsx |  0
 ui/js/page/receiveCredits/index.js     |  5 +++++
 ui/js/page/receiveCredits/view.jsx     | 16 +++++++++++++++
 ui/js/page/sendCredits/index.js        |  5 +++++
 ui/js/page/sendCredits/view.jsx        | 16 +++++++++++++++
 ui/js/page/{showPage => show}/index.js |  0
 ui/js/page/{showPage => show}/view.jsx |  2 +-
 ui/js/page/wallet/index.js             | 14 +------------
 ui/js/page/wallet/view.jsx             | 28 +++-----------------------
 14 files changed, 96 insertions(+), 43 deletions(-)
 create mode 100644 ui/js/component/walletBalance/index.js
 create mode 100644 ui/js/component/walletBalance/view.jsx
 rename ui/js/page/{filePage => file}/index.js (100%)
 rename ui/js/page/{filePage => file}/view.jsx (100%)
 create mode 100644 ui/js/page/receiveCredits/index.js
 create mode 100644 ui/js/page/receiveCredits/view.jsx
 create mode 100644 ui/js/page/sendCredits/index.js
 create mode 100644 ui/js/page/sendCredits/view.jsx
 rename ui/js/page/{showPage => show}/index.js (100%)
 rename ui/js/page/{showPage => show}/view.jsx (97%)

diff --git a/app/main.js b/app/main.js
index 27c8f72c8..b572eba82 100644
--- a/app/main.js
+++ b/app/main.js
@@ -51,7 +51,7 @@ let daemonStopRequested = false;
 let readyToQuit = false;
 
 // If we receive a URI to open from an external app but there's no window to
-// send it to, it's cached in this variable.
+// sendCredits it to, it's cached in this variable.
 let openUri = null;
 
 function processRequestedUri(uri) {
diff --git a/ui/js/component/router/view.jsx b/ui/js/component/router/view.jsx
index fa26f61eb..4b1b20641 100644
--- a/ui/js/component/router/view.jsx
+++ b/ui/js/component/router/view.jsx
@@ -4,7 +4,9 @@ import HelpPage from "page/help";
 import ReportPage from "page/report.js";
 import StartPage from "page/start.js";
 import WalletPage from "page/wallet";
-import ShowPage from "page/showPage";
+import ReceiveCreditsPage from "page/receiveCredits";
+import SendCreditsPage from "page/sendCredits";
+import ShowPage from "page/show";
 import PublishPage from "page/publish";
 import DiscoverPage from "page/discover";
 import DeveloperPage from "page/developer.js";
@@ -35,11 +37,11 @@ const Router = props => {
     help: <HelpPage params={params} />,
     publish: <PublishPage params={params} />,
     published: <FileListPublished params={params} />,
-    receive: <WalletPage params={params} />,
+    receive: <ReceiveCreditsPage params={params} />,
     report: <ReportPage params={params} />,
     rewards: <RewardsPage params={params} />,
     search: <SearchPage params={params} />,
-    send: <WalletPage params={params} />,
+    send: <SendCreditsPage params={params} />,
     settings: <SettingsPage params={params} />,
     show: <ShowPage params={params} />,
     start: <StartPage params={params} />,
diff --git a/ui/js/component/walletBalance/index.js b/ui/js/component/walletBalance/index.js
new file mode 100644
index 000000000..51e4ebb06
--- /dev/null
+++ b/ui/js/component/walletBalance/index.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { connect } from "react-redux";
+import { doNavigate } from "actions/app";
+import { selectBalance } from "selectors/wallet";
+import WalletBalance from "./view";
+
+const select = state => ({
+  balance: selectBalance(state),
+});
+
+const perform = dispatch => ({
+  navigate: path => dispatch(doNavigate(path)),
+});
+
+export default connect(select, perform)(WalletBalance);
diff --git a/ui/js/component/walletBalance/view.jsx b/ui/js/component/walletBalance/view.jsx
new file mode 100644
index 000000000..45c6a7c4d
--- /dev/null
+++ b/ui/js/component/walletBalance/view.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import Link from "component/link";
+import { CreditAmount } from "component/common";
+
+const WalletBalance = props => {
+  const { balance, navigate } = props;
+
+  return (
+    <section className="card">
+      <div className="card__title-primary">
+        <h3>{__("Balance")}</h3>
+      </div>
+      <div className="card__content">
+        {balance && <CreditAmount amount={balance} precision={8} />}
+      </div>
+      <div className="card__content">
+        <div className="help">
+          <Link
+            onClick={() => navigate("/backup")}
+            label={__("Backup Your Wallet")}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WalletBalance;
diff --git a/ui/js/page/filePage/index.js b/ui/js/page/file/index.js
similarity index 100%
rename from ui/js/page/filePage/index.js
rename to ui/js/page/file/index.js
diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/file/view.jsx
similarity index 100%
rename from ui/js/page/filePage/view.jsx
rename to ui/js/page/file/view.jsx
diff --git a/ui/js/page/receiveCredits/index.js b/ui/js/page/receiveCredits/index.js
new file mode 100644
index 000000000..475548da7
--- /dev/null
+++ b/ui/js/page/receiveCredits/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import ReceiveCreditsPage from "./view";
+
+export default connect(null, null)(ReceiveCreditsPage);
diff --git a/ui/js/page/receiveCredits/view.jsx b/ui/js/page/receiveCredits/view.jsx
new file mode 100644
index 000000000..11e0e0690
--- /dev/null
+++ b/ui/js/page/receiveCredits/view.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import SubHeader from "component/subHeader";
+import WalletBalance from "component/walletBalance";
+import WalletAddress from "component/walletAddress";
+
+const ReceiveCreditsPage = props => {
+  return (
+    <main className="main--single-column">
+      <SubHeader />
+      <WalletBalance />
+      <WalletAddress />
+    </main>
+  );
+};
+
+export default ReceiveCreditsPage;
diff --git a/ui/js/page/sendCredits/index.js b/ui/js/page/sendCredits/index.js
new file mode 100644
index 000000000..2a36f2719
--- /dev/null
+++ b/ui/js/page/sendCredits/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import { connect } from "react-redux";
+import SendCreditsPage from "./view";
+
+export default connect(null, null)(SendCreditsPage);
diff --git a/ui/js/page/sendCredits/view.jsx b/ui/js/page/sendCredits/view.jsx
new file mode 100644
index 000000000..06e8ed5ce
--- /dev/null
+++ b/ui/js/page/sendCredits/view.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import SubHeader from "component/subHeader";
+import WalletBalance from "component/walletBalance";
+import WalletSend from "component/walletSend";
+
+const SendCreditsPage = props => {
+  return (
+    <main className="main--single-column">
+      <SubHeader />
+      <WalletBalance />
+      <WalletSend />
+    </main>
+  );
+};
+
+export default SendCreditsPage;
diff --git a/ui/js/page/showPage/index.js b/ui/js/page/show/index.js
similarity index 100%
rename from ui/js/page/showPage/index.js
rename to ui/js/page/show/index.js
diff --git a/ui/js/page/showPage/view.jsx b/ui/js/page/show/view.jsx
similarity index 97%
rename from ui/js/page/showPage/view.jsx
rename to ui/js/page/show/view.jsx
index 67bbf6178..aae0aabfe 100644
--- a/ui/js/page/showPage/view.jsx
+++ b/ui/js/page/show/view.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import lbryuri from "lbryuri";
 import { BusyMessage } from "component/common";
 import ChannelPage from "page/channel";
-import FilePage from "page/filePage";
+import FilePage from "page/file";
 
 class ShowPage extends React.PureComponent {
   componentWillMount() {
diff --git a/ui/js/page/wallet/index.js b/ui/js/page/wallet/index.js
index 810899d54..01fdf2a64 100644
--- a/ui/js/page/wallet/index.js
+++ b/ui/js/page/wallet/index.js
@@ -1,17 +1,5 @@
 import React from "react";
 import { connect } from "react-redux";
-import { doNavigate } from "actions/app";
-import { selectCurrentPage } from "selectors/app";
-import { selectBalance } from "selectors/wallet";
 import WalletPage from "./view";
 
-const select = state => ({
-  currentPage: selectCurrentPage(state),
-  balance: selectBalance(state),
-});
-
-const perform = dispatch => ({
-  navigate: path => dispatch(doNavigate(path)),
-});
-
-export default connect(select, perform)(WalletPage);
+export default connect(null, null)(WalletPage);
diff --git a/ui/js/page/wallet/view.jsx b/ui/js/page/wallet/view.jsx
index 423c15473..b434a327a 100644
--- a/ui/js/page/wallet/view.jsx
+++ b/ui/js/page/wallet/view.jsx
@@ -1,36 +1,14 @@
 import React from "react";
 import SubHeader from "component/subHeader";
+import WalletBalance from "component/walletBalance";
 import TransactionList from "component/transactionList";
-import WalletAddress from "component/walletAddress";
-import WalletSend from "component/walletSend";
-import Link from "component/link";
-import { CreditAmount } from "component/common";
 
 const WalletPage = props => {
-  const { balance, currentPage, navigate } = props;
-
   return (
     <main className="main--single-column">
       <SubHeader />
-      <section className="card">
-        <div className="card__title-primary">
-          <h3>{__("Balance")}</h3>
-        </div>
-        <div className="card__content">
-          <CreditAmount amount={balance} precision={8} />
-        </div>
-        <div className="card__content">
-          <div className="help">
-            <Link
-              onClick={() => navigate("/backup")}
-              label={__("Backup Your Wallet")}
-            />
-          </div>
-        </div>
-      </section>
-      {currentPage === "wallet" ? <TransactionList {...props} /> : ""}
-      {currentPage === "send" ? <WalletSend {...props} /> : ""}
-      {currentPage === "receive" ? <WalletAddress /> : ""}
+      <WalletBalance />
+      <TransactionList />
     </main>
   );
 };