version 10: css changes and fixed console errors

er-satish · Apr 19, 2020 · 7e3017f · 7e3017f
1 parent 6934ec4
commit 7e3017f
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 44 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -30,12 +30,11 @@ class App extends Component {
     this.setState({
       valuationPeriod: value
     },
-    () => this.fetchServiceData());
+      () => this.fetchServiceData());
 
   }
 
-  fetchServiceData(){
-    debugger
+  fetchServiceData() {
     fetch('http://192.168.0.112:8080/assets?valuationPeriod=' + this.state.valuationPeriod)
       .then(res => res.json())
       .then((data) => {
@@ -51,12 +50,14 @@ class App extends Component {
   render() {
     const { portfolioName, data } = this.state;
     return (
-      <div className="App">
-        <MyHeader data={data} />
-        <div className="container-fluid">
+      <div className="App container-fluid">
+        <div>
+          <div className="row">
+            <MyHeader data={data} />
+          </div>
           <div className="row">
-            <MySidebar data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
-            <MainContent portfolioName={portfolioName} data={data} handlePeriodChange={this.handlePeriodChange.bind(this)}/>
+            <MySidebar portfolioName={portfolioName} data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
+            <MainContent portfolioName={portfolioName} data={data} handlePeriodChange={this.handlePeriodChange.bind(this)} />
           </div>
         </div>
         <Footer />

diff --git a/src/component/AssetsSummary.jsx b/src/component/AssetsSummary.jsx
@@ -73,19 +73,9 @@ class AssetsSummary extends Component {
       <div>
         <h2 className="text-left">Assets Summary</h2>
         <BootstrapTable wrapperClasses="table-responsive" keyField='assetType' data={details} columns={columns} />
-
       </div>
     );
   }
 }
 
-// isGainOrLoss = (amount) => {
-//   let icon;
-//   if(changePercentage < 0){
-//       icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red"/>
-//   }else if(this.props.changePercentage > 0){
-//       icon = <FontAwesomeIcon icon="arrow-alt-circle-up" color="green"/>
-//   }
-// }  
-
 export default AssetsSummary;
diff --git a/src/component/MainContent.jsx b/src/component/MainContent.jsx
@@ -1,13 +1,8 @@
 import React, { Component } from 'react';
 import InfoCard from './InfoCard';
 import AssetsSummary from './AssetsSummary';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 class MainContent extends Component {
-    constructor(props) {
-        super(props);
-    }
-
     handlePeriodChange(valuationPeriod) {
         debugger
         this.props.handlePeriodChange(valuationPeriod);
@@ -34,16 +29,16 @@ class MainContent extends Component {
         }
 
         return (
-            <main role="main" className="col-md-9 ml-sm-auto col-lg-10 pt-auto px-auto">
+            <main role="main" className="col-md-10 ml-sm-auto col-lg-10 pt-auto px-auto">
                 <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                     <h1 className="h2">{this.props.portfolioName}</h1>
                     <div className="btn-toolbar mb-2 mb-md-0">
                         <div className="btn-group mr-2">
                             <button className="btn btn-sm btn-outline-secondary">Share</button>
                             <button className="btn btn-sm btn-outline-secondary">Export</button>
                         </div>
-                        <select onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-primary dropdown-toggle">
-                            <option selected value="TODAY">Today</option>
+                        <select defaultValue="TODAY" onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-primary dropdown-toggle">
+                            <option value="TODAY">Today</option>
                             <option value="_7Days" >Last 7 Days</option>
                             <option value="_15Days">Last 15 Days</option>
                             <option value="_30Days">Last 30 Days</option>

diff --git a/src/component/MyHeader.jsx b/src/component/MyHeader.jsx
@@ -36,24 +36,24 @@ class MyHeader extends Component {
     const formattedTotalNetworthChange = utils.formatMoney(totalNetworthChange)
 
     return (
-      <nav className="navbar navbar-dark sticky-top bg-dark">
+      <nav className="navbar navbar-dark sticky-top bg-dark col-md-12">
         <div className="row">
           <div className="col">
             <FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x" />
-            <a className="navbar-brand " href="#">My Assetz</a>
+            <span className="navbar-brand ">My Assetz</span >
           </div>
           <div className="col">
-            <a className="navbar-brand  text-white" href="#">
+            <span className="navbar-brand  text-white">
               My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
               <span className="label label-default ml-1">{formattedTotalNetworth}</span>
-            </a>
+            </span>
           </div>
           <div className="col">
-            <a className="navbar-brand  text-white" href="#">
+            <span className="navbar-brand  text-white">
               Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
               <span className="label label-default ml-1">{formattedTotalNetworthChange}</span>
               {icon}
-            </a>
+            </span>
           </div>
         </div>
 

diff --git a/src/component/MySidebar.jsx b/src/component/MySidebar.jsx
@@ -6,25 +6,31 @@ class MySidebar extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            links : []
+            links: []
         }
     }
 
     static getDerivedStateFromProps(props, state) {
+        debugger
         const links = [];
         if (props && props.data && props.data.data && props.data.data.length > 0) {
             for (let i = 0; i < props.data.data.length; i++) {
-                links.push({ key: i, text: props.data.data[i].portfolioName, isActive: false });
+                var active = false;
+                if (props.portfolioName && props.portfolioName === props.data.data[i].portfolioName) {
+                    active = true;
+                }
+                links.push({ index: i, text: props.data.data[i].portfolioName, isActive: active });
             }
         }
         return { links: links };
     }
 
     handleClick(i) {
+        debugger
         const links = this.state.links.slice();
         let portfolioName = "";
-        for (const j in links) {
-            if (i == j) {
+        for (var j = 0; j < links.length; j++) {
+            if (i === j) {
                 links[j].isActive = true;
                 portfolioName = links[j].text;
             } else {
@@ -38,16 +44,17 @@ class MySidebar extends Component {
     }
 
     render() {
-
+        const { links } = this.state;
+        debugger
         return (
-            <nav className="col-md-2 d-none d-md-block bg-light sidebar">
+            <nav className="col-md-2 bg-light sidebar">
                 <div className="sidebar-sticky">
                     <ul className="nav flex-column">
-                        {this.state.links.map((link, i) =>
+                        {links.map((link, i) =>
                             <NavLink
                                 text={link.text}
                                 isActive={link.isActive}
-                                key={link.key}
+                                key={link.index}
                                 onClick={() => this.handleClick(i)}
                             />
                         )}

diff --git a/src/component/NavLink.jsx b/src/component/NavLink.jsx
@@ -4,10 +4,14 @@ class NavLink extends Component {
     render() {
         let { onClick } = this.props;
         return (
-            <li key={this.props.key} onClick={onClick} className={"nav-item " + (this.props.isActive ? "active" : "")}>
-                <a className="nav-link text-left" href={this.props.key}>{this.props.text}</a>
+            <li key={this.props.index} onClick={onClick}>
+                <span className={"nav-link text-left cursor-pointer " + (this.props.isActive ? "active" : "")}>
+                    {this.props.text}
+                </span>
             </li>
         );
     }
 }
-export default NavLink;
+export default NavLink;
+
+
diff --git a/src/component/Utils.jsx b/src/component/Utils.jsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+//add imports here if needed
 
 export function formatMoney(money) {
     return new Intl.NumberFormat('en-IN').format(money);

diff --git a/src/css/App.css b/src/css/App.css
@@ -66,3 +66,7 @@
   text-transform: uppercase;
 }
 
+.cursor-pointer{
+  cursor: pointer;
+}
+