Merge pull request #15 from alcipir/feature/packaged-theme

WIP: feat - packaged theme with dynamic menu items

gatsby-node.js

@@ -1,5 +1,3 @@
-
-
 exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
   actions.setWebpackConfig({
     node: {
@@ -18,3 +16,26 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
     actions.replaceWebpackConfig(config)
   }
 }
+
+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({})
+        }
+    })
+}
+

package-lock.json

@@ -2637,12 +2637,13 @@
       }
     },
     "@loadable/component": {
-      "version": "5.12.0",
-      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.12.0.tgz",
-      "integrity": "sha512-eDG7FPZ8tCFA/mqu2IrYV6eS+UxGBo21PwtEV9QpkpYrx25xKRXzJUm36yfQPK3o7jXu43xpPkwiU4mLWcjJlw==",
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.13.0.tgz",
+      "integrity": "sha512-+qS6xoA4DN5Pjm5sR6vWuuYEhMWZ9Y7ALgI8JuDOMCiqOG+PTau0phOyqFgrFqDXijVpeInoIoZQdW1FKjGBYA==",
       "requires": {
         "@babel/runtime": "^7.7.7",
-        "hoist-non-react-statics": "^3.3.1"
+        "hoist-non-react-statics": "^3.3.1",
+        "react-is": "^16.12.0"
       }
     },
     "@mdx-js/mdx": {

package.json

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "author": "Chris Troutner <chris.troutner@gmail.com>",
   "dependencies": {
-    "@loadable/component": "^5.12.0",
+    "@loadable/component": "^5.13.0",
     "adminlte-2-react": "^0.1.27",
     "gatsby": "^2.22.15",
     "gatsby-image": "^2.4.5",
@@ -29,7 +29,9 @@
     "prettier": "2.0.5"
   },
   "keywords": [
-    "gatsby"
+    "gatsby",
+    "gatsby-plugin",
+    "gatsby-theme"
   ],
   "license": "MIT",
   "scripts": {

src/components/admin-lte/index.js

@@ -1,6 +1,5 @@
 import React from "react"
 import PropTypes from "prop-types"
-import Audit from "./audit"
 import Configure from "./configure"
 import Tokens from "./tokens"
 import Wallet from "./wallet"
@@ -13,13 +12,22 @@ 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 SendReceive from "./send-receive"
+
 const { Item } = Sidebar
 
 // Screen width to hide the side menu on click
 const MENU_HIDE_WIDTH = 770
 
 let _this
+const MenuItemComponent = ({ component }) => {
+    const RenderedComponent = loadable(() => import("./audit"))
+    return (<RenderedComponent />)
+}
 
 class AdminLTEPage extends React.Component {
   constructor(props) {
@@ -46,67 +54,75 @@ class AdminLTEPage extends React.Component {
 
   render() {
     return (
-      <>
-        <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>
+      <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>
 
-                  <p>{_this.state.bchBalance}</p>
-                </div>
-              </div>
-            </Item>
+                          <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 === "Wallet" && (
+                        <Wallet
+                          setWalletInfo={_this.props.setWalletInfo}
+                          walletInfo={_this.props.walletInfo}
+                          updateBalance={_this.props.updateBalance}
+                          setBchWallet={_this.props.setBchWallet}
+                        />
+                      )}
+                      {_this.state.section === "Tokens" &&
+                       <Tokens
+                       walletInfo={_this.props.walletInfo}
+                      bchWallet={_this.props.bchWallet} />
+                      }
+                      {_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} />
+                    )}
+                    </div>
+                  </Layout>
+                </AdminLTE>
+                <Router>
+                  <ScannerModal
+                    show={_this.state.showScannerModal}
+                    onHide={_this.toggleScannerModal}
+                    path="/"
+                  />
+                </Router>
+            </>
+        }/>
 
-            {_this.sidebar}
-          </Sidebar.Core>
-          <Navbar.Core>
-            <VersionStatus></VersionStatus>
-          </Navbar.Core>
-          <Layout path="/">
-            <div className="components-container">
-              {_this.state.section === "Wallet" && (
-                <Wallet
-                  setWalletInfo={_this.props.setWalletInfo}
-                  walletInfo={_this.props.walletInfo}
-                  updateBalance={_this.props.updateBalance}
-                  setBchWallet={_this.props.setBchWallet}
-                />
-              )}
-              {_this.state.section === "Tokens" &&
-               <Tokens 
-               walletInfo={_this.props.walletInfo}
-              bchWallet={_this.props.bchWallet} />
-              }
-              {_this.state.section === "Configure" && (
-                <Configure 
-                walletInfo={_this.props.walletInfo}
-                setWalletInfo={_this.props.setWalletInfo} 
-                setBchWallet={_this.props.setBchWallet}
-                />
-              )}
-              {_this.state.section === "Audit" && <Audit />}
-              {_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}
-                />
-              )}
-            </div>
-          </Layout>
-        </AdminLTE>
-        <Router>
-          <ScannerModal
-            show={_this.state.showScannerModal}
-            onHide={_this.toggleScannerModal}
-            path="/"
-          />
-        </Router>
-      </>
     )
   }
   // Get wallet balance