From 87b6fdfadbf426500ca6a07bcbf4accb28f4f670 Mon Sep 17 00:00:00 2001
From: Chris Troutner <chris.troutner@gmail.com>
Date: Mon, 6 Jul 2020 09:29:43 -0700
Subject: [PATCH 1/2] build successful. Manually porting Andre's code

---
 gatsby-node.js                    |  28 ++---
 package.json                      |   1 -
 src/components/admin-lte/index.js | 167 +++++++++++++-----------------
 src/components/menu-components.js |   5 +
 4 files changed, 83 insertions(+), 118 deletions(-)
 create mode 100644 src/components/menu-components.js

diff --git a/gatsby-node.js b/gatsby-node.js
index f72d342..3a87b65 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -4,6 +4,7 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
       fs: "empty",
     },
   })
+
   //Ignore css order
   if (stage === "build-javascript") {
     const config = getConfig()
@@ -17,25 +18,10 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
   }
 }
 
-exports.sourceNodes = ({ actions, createNodeId, createContentDigest  }) => {
-    const { createNode  } = actions
-    const defaultMenuItems = [
-        {
-            title: "Audit",
-            icon: "fas-cog",
-            component: "./audit"
-        }
-    ]
-
-    createNode({
-        menuItems: defaultMenuItems,
-        id: `bch-wallet-plugins`,
-        parent: null,
-        children: [],
-        internal: {
-            type: `BchWalletPlugins`,
-            contentDigest: createContentDigest({})
-        }
-    })
+exports.createPages = async ({ actions }, themeOptions) => {
+  const basePath = "/"
+  actions.createPage({
+    path: basePath,
+    component: require.resolve("./src/pages/index.js"),
+  })
 }
-
diff --git a/package.json b/package.json
index 668c63a..423c454 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,6 @@
   "version": "1.0.0",
   "author": "Chris Troutner <chris.troutner@gmail.com>",
   "dependencies": {
-    "@loadable/component": "^5.13.0",
     "adminlte-2-react": "^0.1.27",
     "gatsby": "^2.22.15",
     "gatsby-image": "^2.4.5",
diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js
index e8938c4..064ff38 100644
--- a/src/components/admin-lte/index.js
+++ b/src/components/admin-lte/index.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types"
 import Configure from "./configure"
 import Tokens from "./tokens"
 import Wallet from "./wallet"
+// import Audit from "./audit"
 
 import AdminLTE, { Sidebar, Navbar } from "adminlte-2-react"
 import ScannerModal from "../qr-scanner/modal"
@@ -12,9 +13,7 @@ import "./admin-lte.css"
 import BchWallet from "minimal-slp-wallet"
 import VersionStatus from "../version-status"
 import { BrowserRouter as Router } from "react-router-dom"
-
-import { StaticQuery, graphql } from "gatsby"
-import loadable from "@loadable/component"
+// import menuComponents from "../menu-components.js"
 
 import SendReceive from "./send-receive"
 
@@ -24,10 +23,6 @@ const { Item } = Sidebar
 const MENU_HIDE_WIDTH = 770
 
 let _this
-const MenuItemComponent = ({ component }) => {
-  const RenderedComponent = loadable(() => import("./audit"))
-  return <RenderedComponent />
-}
 
 class AdminLTEPage extends React.Component {
   constructor(props) {
@@ -48,101 +43,81 @@ class AdminLTEPage extends React.Component {
     <Item icon="fas-coins" key="Tokens" text="Tokens" />,
     <Item icon="fa-wallet" key="Wallet" text="Wallet" activeOn="/" />,
     <Item icon="fa-qrcode" key="qrReader" text="Qr Scanner" />,
-    <Item icon="fas-cog" key="Configure" text="Configure" />
+    <Item icon="fas-cog" key="Configure" text="Configure" />,
   ]
 
   render() {
     return (
-      <StaticQuery
-        query={graphql`
-          query {
-            bchWalletPlugins {
-              menuItems {
-                title
-                component
-                icon
-              }
-            }
-          }
-        `}
-        render={data => (
-          <>
-            <AdminLTE
-              title={["FullStack.cash"]}
-              titleShort={["PSF"]}
-              theme="blue"
-            >
-              <Sidebar.Core>
-                <Item key="Balance" text="Balance" icon="fab-bitcoin">
-                  <div className="sidebar-balance">
-                    <div>
-                      <h3>BCH Balance </h3>
+      <>
+        <AdminLTE title={["FullStack.cash"]} titleShort={["PSF"]} theme="blue">
+          <Sidebar.Core>
+            <Item key="Balance" text="Balance" icon="fab-bitcoin">
+              <div className="sidebar-balance">
+                <div>
+                  <h3>BCH Balance </h3>
 
-                      <p>{_this.state.bchBalance}</p>
-                    </div>
-                  </div>
-                </Item>
-
-                {_this.sidebar}
-                {data.bchWalletPlugins.menuItems.map(item => (
-                  <Item icon={item.icon} key={item.title} text={item.title} />
-                ))}
-              </Sidebar.Core>
-              <Navbar.Core>
-                <VersionStatus></VersionStatus>
-              </Navbar.Core>
-              <Layout path="/">
-                <div className="components-container">
-                  {_this.state.section === "Send/Receive" && (
-                    <SendReceive
-                      setWalletInfo={_this.props.setWalletInfo}
-                      walletInfo={_this.props.walletInfo}
-                      updateBalance={_this.props.updateBalance}
-                      setBchWallet={_this.props.setBchWallet}
-                      bchWallet={_this.props.bchWallet}
-                    />
-                  )}
-                  {_this.state.section === "Tokens" && (
-                    <Tokens
-                      walletInfo={_this.props.walletInfo}
-                      bchWallet={_this.props.bchWallet}
-                    />
-                  )}
-                  {_this.state.section === "Wallet" && (
-                    <Wallet
-                      setWalletInfo={_this.props.setWalletInfo}
-                      walletInfo={_this.props.walletInfo}
-                      updateBalance={_this.props.updateBalance}
-                      setBchWallet={_this.props.setBchWallet}
-                    />
-                  )}
-
-                  {_this.state.section === "Configure" && (
-                    <Configure
-                      walletInfo={_this.props.walletInfo}
-                      setWalletInfo={_this.props.setWalletInfo}
-                      setBchWallet={_this.props.setBchWallet}
-                    />
-                  )}
-                  {data.bchWalletPlugins.menuItems.map(
-                    item =>
-                      _this.state.section === item.title && (
-                        <MenuItemComponent component={item.component} />
-                      )
-                  )}
+                  <p>{_this.state.bchBalance}</p>
                 </div>
-              </Layout>
-            </AdminLTE>
-            <Router>
-              <ScannerModal
-                show={_this.state.showScannerModal}
-                onHide={_this.toggleScannerModal}
-                path="/"
-              />
-            </Router>
-          </>
-        )}
-      />
+              </div>
+            </Item>
+
+            {_this.sidebar}
+
+            
+          </Sidebar.Core>
+
+          <Navbar.Core>
+            <VersionStatus></VersionStatus>
+          </Navbar.Core>
+          <Layout path="/">
+            <div className="components-container">
+              {_this.state.section === "Send/Receive" && (
+                <SendReceive
+                  setWalletInfo={_this.props.setWalletInfo}
+                  walletInfo={_this.props.walletInfo}
+                  updateBalance={_this.props.updateBalance}
+                  setBchWallet={_this.props.setBchWallet}
+                  bchWallet={_this.props.bchWallet}
+                />
+              )}
+
+              {_this.state.section === "Tokens" && (
+                <Tokens
+                  walletInfo={_this.props.walletInfo}
+                  bchWallet={_this.props.bchWallet}
+                />
+              )}
+
+              {_this.state.section === "Wallet" && (
+                <Wallet
+                  setWalletInfo={_this.props.setWalletInfo}
+                  walletInfo={_this.props.walletInfo}
+                  updateBalance={_this.props.updateBalance}
+                  setBchWallet={_this.props.setBchWallet}
+                />
+              )}
+
+              {_this.state.section === "Configure" && (
+                <Configure
+                  walletInfo={_this.props.walletInfo}
+                  setWalletInfo={_this.props.setWalletInfo}
+                  setBchWallet={_this.props.setBchWallet}
+                />
+              )}
+
+
+
+            </div>
+          </Layout>
+        </AdminLTE>
+        <Router>
+          <ScannerModal
+            show={_this.state.showScannerModal}
+            onHide={_this.toggleScannerModal}
+            path="/"
+          />
+        </Router>
+      </>
     )
   }
   // Get wallet balance
diff --git a/src/components/menu-components.js b/src/components/menu-components.js
new file mode 100644
index 0000000..a97529e
--- /dev/null
+++ b/src/components/menu-components.js
@@ -0,0 +1,5 @@
+const MenuComponents = () => {
+
+}
+
+export default MenuComponents;

From 9b0df4c1922d6558bd11415c00a515065190ef5c Mon Sep 17 00:00:00 2001
From: Chris Troutner <chris.troutner@gmail.com>
Date: Mon, 6 Jul 2020 10:12:29 -0700
Subject: [PATCH 2/2] Added dynamic menu

---
 src/components/admin-lte/index.js | 33 +++++++++++++++++++++++++++----
 src/components/menu-components.js |  6 ++----
 src/pages/index.js                | 10 +++++++++-
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/components/admin-lte/index.js b/src/components/admin-lte/index.js
index 064ff38..4d8b73d 100644
--- a/src/components/admin-lte/index.js
+++ b/src/components/admin-lte/index.js
@@ -13,7 +13,7 @@ import "./admin-lte.css"
 import BchWallet from "minimal-slp-wallet"
 import VersionStatus from "../version-status"
 import { BrowserRouter as Router } from "react-router-dom"
-// import menuComponents from "../menu-components.js"
+import menuComponents from "../menu-components.js"
 
 import SendReceive from "./send-receive"
 
@@ -63,7 +63,7 @@ class AdminLTEPage extends React.Component {
 
             {_this.sidebar}
 
-            
+            {_this.renderNewMenuItems()}
           </Sidebar.Core>
 
           <Navbar.Core>
@@ -105,8 +105,7 @@ class AdminLTEPage extends React.Component {
                 />
               )}
 
-
-
+              {_this.renderNewViewItems()}
             </div>
           </Layout>
         </AdminLTE>
@@ -259,6 +258,32 @@ class AdminLTEPage extends React.Component {
       showScannerModal: !_this.state.showScannerModal,
     })
   }
+
+  // Render non-default menu items. The catch ensures that the render function
+  // won't be interrupted if there is an issue porting new menu items.
+  renderNewMenuItems() {
+    try {
+      return menuComponents && menuComponents.map(m => m.menuItem)
+    } catch (err) {
+      // TODO: Figure out how to return an invisible Item.
+      return <Item style={{display: 'none'}} />
+    }
+
+  }
+
+  // Displays the View corresponding to the dynamically loaded menu item.
+  renderNewViewItems() {
+    try {
+      return(menuComponents && menuComponents.map(m => {
+        if (_this.state.section === m.key) {
+          return m.component
+        }
+        return ""
+      }))
+    } catch(err) {
+
+    }
+  }
 }
 // Props prvided by redux
 AdminLTEPage.propTypes = {
diff --git a/src/components/menu-components.js b/src/components/menu-components.js
index a97529e..443bc69 100644
--- a/src/components/menu-components.js
+++ b/src/components/menu-components.js
@@ -1,5 +1,3 @@
-const MenuComponents = () => {
+const MenuComponents = () => {}
 
-}
-
-export default MenuComponents;
+export default MenuComponents
diff --git a/src/pages/index.js b/src/pages/index.js
index f73097b..7400b40 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,7 +5,8 @@ let AdminLTE =
   typeof window !== `undefined`
     ? require("../components/admin-lte").default
     : null
-// Maps the props that are going to be sended 
+
+// Maps the props that are going to be sended
 // to the component connected with Redux
 const mapStateToProps = ({ walletInfo, bchBalance, bchWallet }) => {
   return { walletInfo, bchBalance, bchWallet }
@@ -34,4 +35,11 @@ class AdminLTEPage extends React.Component {
   }
 }
 
+// const AdminLTEPage = props => {
+//   <>
+//     {ConnectedDashboard &&
+//       (<ConnectedDashboard menuComponents={props.pageContext.menuComponents} />)}
+//   </>
+// }
+
 export default AdminLTEPage