From 94a84e7d2f82a4d327905d591893b016c4311977 Mon Sep 17 00:00:00 2001
From: Kumar <skuma596@LAMU02XHM07JG5J.uhc.com>
Date: Tue, 21 Apr 2020 23:46:42 +0530
Subject: [PATCH] version 11: minor css changes and draft app dashboard

---
 src/component/AppDashboard.jsx | 54 ++++++++++++++++++++++++++++++++++
 src/component/MyHeader.jsx     | 26 ++++++++++++++--
 src/component/MySidebar.jsx    |  2 +-
 3 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 src/component/AppDashboard.jsx

diff --git a/src/component/AppDashboard.jsx b/src/component/AppDashboard.jsx
new file mode 100644
index 0000000..ecadaff
--- /dev/null
+++ b/src/component/AppDashboard.jsx
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+
+class AppDashboard extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const { show } = this.props;
+        return (
+            <div>
+                {/* <Alert show={show} variant="success">
+                    <Alert.Heading>Application Status</Alert.Heading>
+                    <p>
+                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
+                        lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
+                        fermentum.
+                    </p>
+                    <hr />
+                    <div className="d-flex justify-content-end">
+                        <Button onClick={() => this.props.closeAppStatus()} variant="outline-success">
+                            Close me!
+                        </Button>
+                    </div>
+                </Alert> */}
+
+                <Modal show={show} onHide={() => this.props.closeAppStatus()} animation={false}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Application Status</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                    <label>Stocks Latest Nav Date: </label>
+                    <span>
+                        100.5
+                    </span>
+                    <label>Mutual Fund Latest Nav Date: </label>
+                    <span>
+                        100.5
+                    </span>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <Button variant="secondary" onClick={() => this.props.closeAppStatus()}>
+                            Close
+                        </Button>
+                    </Modal.Footer>
+                </Modal>
+            </div>
+        );
+    }
+
+}
+
+export default AppDashboard;
\ No newline at end of file
diff --git a/src/component/MyHeader.jsx b/src/component/MyHeader.jsx
index 610e9e2..98da438 100644
--- a/src/component/MyHeader.jsx
+++ b/src/component/MyHeader.jsx
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as utils from './Utils'
+import Button from 'react-bootstrap/Button'
+import AppDashboard from './AppDashboard';
 
 class MyHeader extends Component {
 
@@ -8,8 +10,10 @@ class MyHeader extends Component {
     super(props);
     this.state = {
       totalNetworth: null,
-      totalNetworthChange: null
+      totalNetworthChange: null,
+      show: false
     }
+    this.closeAppStatus = this.closeAppStatus.bind(this);
   }
 
   static getDerivedStateFromProps(props, state) {
@@ -23,9 +27,21 @@ class MyHeader extends Component {
     return { totalNetworth: totalNetworth, totalNetworthChange: totalNetworthChange };
   }
 
+  closeAppStatus() {
+    this.setState({
+      show: false
+    });
+  }
+
+  showAppStatus() {
+    this.setState({
+      show: true
+    });
+  }
+
 
   render() {
-    const { totalNetworth, totalNetworthChange } = this.state;
+    const { totalNetworth, totalNetworthChange, show } = this.state;
     let icon;
     if (totalNetworthChange < 0) {
       icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red" className="ml-1" />
@@ -55,6 +71,10 @@ class MyHeader extends Component {
               {icon}
             </span>
           </div>
+          <div className="col">
+            <Button onClick={() => this.showAppStatus()} variant="outline-success">App Status!</Button>
+            <AppDashboard show={show} closeAppStatus={this.closeAppStatus.bind(this)}/>
+          </div>
         </div>
 
       </nav>
diff --git a/src/component/MySidebar.jsx b/src/component/MySidebar.jsx
index a69ccb5..bdb267e 100644
--- a/src/component/MySidebar.jsx
+++ b/src/component/MySidebar.jsx
@@ -45,7 +45,7 @@ class MySidebar extends Component {
         const { links } = this.state;
         return (
             <nav className="col-md-2 bg-light sidebar">
-                <div className="sidebar-sticky">
+                <div>
                     <ul className="nav flex-column">
                         {links.map((link, i) =>
                             <NavLink