Merge pull request #5 from Permissionless-Software-Foundation/dh-visual-update

feat(updates): Added visual updates to menu header and footer

src/components/admin-lte/admin-lte.css

@@ -30,3 +30,12 @@
 #import-mnemonic{
     text-transform: lowercase;
 }
+.components-container{
+    min-height: calc(100vh - 100px);
+}
+
+.sidebar-toggle:hover{
+    background-color: white!important;
+    color: var(--main-color)!important; 
+
+}

src/components/admin-lte/index.js

@@ -10,9 +10,12 @@ import ScannerModal from "../qr-scanner/modal"
 import Layout from "../layout"
 import "./admin-lte.css"
 
-//import {BrowserRouter as Router} from 'react-router-dom';
+import { BrowserRouter as Router } from "react-router-dom"
 const { Item } = Sidebar
 
+// Screen width to hide the side menu on click
+const MENU_HIDE_WIDTH = 770 
+ 
 let _this
 class AdminLTEPage extends React.Component {
   constructor(props) {
@@ -20,15 +23,17 @@ class AdminLTEPage extends React.Component {
     _this = this
     this.state = {
       bchBalance: Math.random().toFixed(8),
-      showScannerModal: true,
+      showScannerModal: false,
+      section: "Settings",
+      menuIsHide: false,
     }
   }
 
   sidebar = [
-    <Item icon="fas-cogs" key="Portfolio" text="Settings" to="/Settings" />,
-    <Item icon="fas-icons" key="Icons" text="Icons" to="/Icons" />,
-    <Item icon="fas-cog" key="Configure" text="Configure" to="/Configure" />,
-    <Item icon="fa-tablet-alt" key="Audit" text="Audit" to="/Audit" />,
+    <Item icon="fas-cogs" key="Portfolio" text="Settings" activeOn="/" />,
+    <Item icon="fas-icons" key="Icons" text="Icons" />,
+    <Item icon="fas-cog" key="Configure" text="Configure" />,
+    <Item icon="fa-tablet-alt" key="Audit" text="Audit" />,
     <Item icon="fa-link" key="Link" text="Link">
       <Item key="Send" text="Send BCH by Email" />
       <Item key="Faucet" text="Faucet (Free BCH)" />
@@ -36,19 +41,15 @@ class AdminLTEPage extends React.Component {
       <Item key="Games" text="Games" />
       <Item key="trade" text="Trade Locally" />
     </Item>,
+    <Item icon="fa-qrcode" key="qrReader" text="Qr Scanner" />,
   ]
 
   render() {
     return (
-      <Layout>
-        <AdminLTE
-          title={["BCH", "JS"]}
-          titleShort={["BCH"]}
-          theme="blue"
-          /* sidebar={this.sidebar}  */
-        >
+      <>
+        <AdminLTE title={["FullStack.cash"]} titleShort={["PSF"]} theme="blue">
           <Sidebar.Core>
-            <Item key="Balance" text="Balance" icon="fab-bitcoin">
+            <Item key="Balance" text="Balance" icon="fab-bitcoin" >
               <div className="sidebar-balance">
                 <div>
                   <h3>BCH Balance </h3>
@@ -59,24 +60,128 @@ class AdminLTEPage extends React.Component {
             </Item>
 
             {_this.sidebar}
-            {/* <div onClick={_this.toggleScanner} className="scanner-left-menu"> */}
-            <Item
-              icon="fa-qrcode"
-              key="qrReader"
-              text="Qr Scanner"
-              to="/qrScanner"
-            />
-            {/* </div> */}
           </Sidebar.Core>
-          <Settings path="/Settings" />
-          <Icons path="/Icons" />
-          <Configure path="/Configure" />
-          <Audit path="/Audit" />
-          <ScannerModal path="/qrScanner" />
+          <Layout path="/">
+            <div className="components-container">
+            {_this.state.section === "Settings" && <Settings  />}
+            {_this.state.section === "Icons" && <Icons  />}
+            {_this.state.section === "Configure" && <Configure  />}
+            {_this.state.section === "Audit" && <Audit  />}
+            </div>
+          </Layout>
         </AdminLTE>
-      </Layout>
+        <Router>
+          <ScannerModal
+            show={_this.state.showScannerModal}
+            onHide={_this.toggleScannerModal}
+            path="/"
+          />
+        </Router>
+      </>
     )
   }
+  componentDidMount() {
+    _this.customMenuItems()
+    _this.dropDownBalance()
+    _this.addOnClickEventToScanner()
+
+    _this.activeItemById("Settings")
+  }
+
+  // Due to that it is not possible to add the "onClick" method
+  // directly to the <Item> component we do it using JS
+  customMenuItems() {
+    try {
+      // Ignore menu items without link to components
+      const ignoreItems = ["Balance", "Qr Scanner", "Link"]
+
+      const menu = document.getElementsByClassName("sidebar-menu")
+      const ulElement = menu[0]
+      const childrens = ulElement.children
+
+      if (childrens && childrens.length) {
+        for (let i = 0; i < childrens.length; i++) {
+          //const href = childrens[i].children[0].href
+          const textValue = childrens[i].children[0].children[1].textContent
+          childrens[i].id = textValue
+          const ignore = ignoreItems.find(val => textValue === val)
+          // Ignore menu items without link to components
+          if (!ignore)
+            childrens[i].onclick = () => this.changeSection(textValue)
+        }
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // Displays the BCH balance by default
+  dropDownBalance() {
+    try {
+      const balanceEle = document.getElementById("Balance")
+      balanceEle.children[0].click()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // Section change, renders the corresponding component
+  // to the selected section. each menu item corresponds
+  // to a section.
+  changeSection(section) {
+    _this.activeItemById(section)
+    _this.setState({
+      section: section,
+    })
+    _this.hideMenu()
+  }
+
+  // Adds a visual mark to the selected item on the menu
+  activeItemById(id) {
+    try {
+      const elementActived = document.getElementsByClassName("active")
+      elementActived[0].className = ""
+      const element = document.getElementById(id)
+      element.className = `${element.className} active`
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // Hides the side menu when clicking on mobile devices
+  hideMenu() {
+    try {
+      const windowWidth = window.innerWidth
+      //console.log("Window Width : ",windowWidth)
+      if(windowWidth > MENU_HIDE_WIDTH) return
+      const toggleEle = document.getElementsByClassName("sidebar-toggle")
+      toggleEle[0].click()
+    } catch (error) {
+      console.error(error)
+    }
+
+  }
+
+  // Adds the "onClick" event to the QR scanner item
+  addOnClickEventToScanner() {
+    try {
+      const qrScannerEle = document.getElementById("Qr Scanner")
+      qrScannerEle.onclick = () => _this.toggleScannerModal()
+    } catch (error) {
+      console.error(error)
+    }
+
+  }
+
+  // Controller to show the QR scanner
+  toggleScannerModal() {
+    if (!_this.state.showScannerModal) {
+      _this.hideMenu()
+    }
+    _this.setState({
+      showScannerModal: !_this.state.showScannerModal,
+    })
+  }
 }
 
 export default AdminLTEPage

src/components/footer/footer.css

@@ -0,0 +1,13 @@
+#footer{
+    width: 100%;
+    max-height: 50px;
+    min-height: 50px;
+    background-color: var(--main-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#footer a{
+    color: white;
+    font-weight: 400;
+}

src/components/footer/index.js

@@ -0,0 +1,15 @@
+import React from "react"
+import "./footer.css"
+class Footer extends React.Component {
+  render() {
+    return (
+      <section id="footer">
+        <a href="https://psfoundation.cash/" target="_blank" rel="noreferrer">
+          Produced by the Permissionless Software Foundation
+        </a>
+      </section>
+    )
+  }
+}
+
+export default Footer

src/components/layout.js

@@ -10,6 +10,7 @@ import PropTypes from "prop-types"
 //import { useStaticQuery, graphql } from "gatsby"
 
 //import Header from "./header"
+import Footer from './footer'
 import "./app-colors.css"
 import "./layout.css"
 
@@ -28,7 +29,7 @@ const Layout = ({ children }) => {
     <>
 
         <main>{children}</main>
-
+        <Footer></Footer>
     </>
   )
 }

src/components/qr-scanner/modal.js

@@ -8,13 +8,12 @@ class ScannerModal extends Component {
     super(props)
     _this = this
     this.state = {
-      show: true,
     }
   }
 
   modalFooter = (
     <React.Fragment>
-      <Button text="Close" pullLeft onClick={this.onHide} />
+      <Button text="Close" pullLeft onClick={this.props.onHide} />
     </React.Fragment>
   )
 
@@ -24,40 +23,17 @@ class ScannerModal extends Component {
         title="Qr Scanner"
         modal
         modalFooter={this.modalFooter}
-        show={_this.state.show}
+        show={_this.props.show}
         modalCloseButton={true}
-        onHide={_this.onHide}
+        onHide={_this.props.onHide}
       >
         <QScanner></QScanner>
       </Content>
     )
   }
-
-  UNSAFE_componentWillUpdate() {
-    if (_this.props.show && _this.props.show !== _this.state.show) {
-      _this.setState({
-        show: _this.props.show,
-      })
-    }
-  }
-  onHide() {
-    if (_this.props.onHide) {
-      _this.props.onHide()
-    } else {
-      _this.setState({
-        show: false,
-      })
-      // redirect
-      // deleting focus from qr scanner menu
-      const pageElement = document.querySelectorAll("a[href^='/']")
-      if (pageElement.length) {
-        pageElement[0].click()
-      }
-    }
-  }
 }
 ScannerModal.propTypes = {
-  show: PropTypes.bool,
-  onHide: PropTypes.func,
+  show: PropTypes.bool.isRequired,
+  onHide: PropTypes.func.isRequired,
 }
 export default ScannerModal