Skip to content

Commit

Permalink
version 4: sidenav bar items has been made dynamic and moved networth…
Browse files Browse the repository at this point in the history 
… items to header
  • Loading branch information
Kumar authored and Kumar committed Apr 12, 2020
1 parent 434433e commit 058f01d
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 83 deletions.
31 changes: 19 additions & 12 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { Component } from 'react';
import MyHeader from './component/MyHeader';
import Footer from './component/Footer';
import MySidebar from './component/MySidebar';
Expand All @@ -10,29 +10,36 @@ class App extends Component {
constructor(props) {
super(props);
this.state = {
portfolioName : "Retirement"
portfolioName: "Retirement"
}
this.portfolioChange = this.handlePortfolioChange.bind(this);
}

handlePortfolioChange(name) {
debugger;
this.setState({
portfolioName: name
portfolioName: name
});
}
}

componentDidMount() {
fetch('http://www.mocky.io/v2/5e92ba183000008f0015669f')
.then(res => res.json())
.then((data) => {
this.setState({ data: data })
})
.catch(console.log)
}

render() {
debugger
const { portfolioName } = this.state;
const { portfolioName, data } = this.state;
return (
<div className="App">
<MyHeader />
<MyHeader data={data} />
<div className="container-fluid">
<div className="row">
<MySidebar handlePortfolioChange={this.portfolioChange.bind(this)} />
<MainContent portfolioName={portfolioName} />
</div>
<div className="row">
<MySidebar data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
<MainContent portfolioName={portfolioName} data={data} />
</div>
</div>
<Footer />

Expand Down
60 changes: 10 additions & 50 deletions src/component/MainContent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,71 +7,31 @@ class MainContent extends Component {
constructor(props) {
super(props);
this.state = {
}
}

componentDidMount() {
//fetch('http://www.mocky.io/v2/5e90c9533300008a00e9cc7d')
fetch('http://www.mocky.io/v2/5e9178263300008a00e9cec5')
.then(res => res.json())
.then((data) => {
this.setState({ data: data })
})
.catch(console.log)
}
}
}

render() {
debugger;
const { data } = this.state;
const { data } = this.props;
let assets = {};
let totalNetworth="50 Lakh";
let totalNetworthChange="-100";
if(data && data.data && data.data.length>0){
for(let i=0; i<data.data.length; i++){
if(this.props.portfolioName && this.props.portfolioName===data.data[i].portfolioName){
if (data && data.data && data.data.length > 0) {
for (let i = 0; i < data.data.length; i++) {
if (this.props.portfolioName && this.props.portfolioName === data.data[i].portfolioName) {
assets = data.data[i].assets;
}
}
}
}


let cardsData = [];
const cards = []
if(assets && assets.highlights){
if (assets && assets.highlights) {
cardsData = assets.highlights;
}

for (const [index, value] of cardsData.entries()) {
cards.push(<InfoCard key={index} name={value.name} amount={value.amount} changePercentage={value.changePercentage} change={value.change}/>)
}

let icon;
if(totalNetworthChange < 0){
icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red" className="ml-1"/>
}else if(totalNetworthChange > 0){
icon = <FontAwesomeIcon icon="arrow-alt-circle-up" color="green" className="ml-1"/>
cards.push(<InfoCard key={index} name={value.name} amount={value.amount} changePercentage={value.changePercentage} change={value.change} />)
}

return (
<main role="main" className="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div className="container sticky-top bg-dark flex-md-nowrap p-0 text-left">
<div className="row">
<div className="col">
<a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
<span className="label label-default ml-1">{totalNetworth}</span>
</a>
</div>
<div className="col">
<a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
<span className="label label-default ml-1">{totalNetworthChange}</span>
{icon}
</a>
</div>
</div>
</div>

<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">
Expand All @@ -93,7 +53,7 @@ class MainContent extends Component {
<InfoCard name="Mutual Funds" amount="15,000,00" changePercentage="8.0" change="10,000"/> */}
</div>

<AssetsSummary assets={assets}/>
<AssetsSummary assets={assets} />
</main>
);
}
Expand Down
51 changes: 44 additions & 7 deletions src/component/MyHeader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,56 @@ import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

class MyHeader extends Component {



static getDerivedStateFromProps(props, state) {
const { data } = props;
let totalNetworth = null;
let totalNetworthChange = null;
if (data && data.total) {
totalNetworth = data.total.totalNetworth;
totalNetworthChange = data.total.totalNetworthChange;
}
return { totalNetworth: totalNetworth, totalNetworthChange: totalNetworthChange };
}


render() {
const { totalNetworth, totalNetworthChange } = this.state;
let icon;
if (totalNetworthChange < 0) {
icon = <FontAwesomeIcon icon="arrow-alt-circle-down" color="red" className="ml-1" />
} else if (totalNetworthChange > 0) {
icon = <FontAwesomeIcon icon="arrow-alt-circle-up" color="green" className="ml-1" />
}
return (
<nav className="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<div>
<FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x"/>
<a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">My Assetz</a>
<FontAwesomeIcon icon="hand-holding-usd" color="yellow" size="3x" />
<a className="navbar-brand col-sm-3 col-md-2 mr-0" href="#">My Assetz</a>
</div>
<div className="row">
<div className="col">
<a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
My Networth: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
<span className="label label-default ml-1">{totalNetworth}</span>
</a>
</div>
<div className="col">
<a className="navbar-brand col-sm-3 col-md-2 mr-0 text-white" href="#">
Today's Change: <FontAwesomeIcon icon="rupee-sign" color="white" size="1x" />
<span className="label label-default ml-1">{totalNetworthChange}</span>
{icon}
</a>
</div>
</div>
{/* <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"/> */}
<ul className="navbar-nav px-3">
<li className="nav-item text-nowrap">
<a className="nav-link" href="#">Sign out</a>
</li>
</ul>
<ul className="navbar-nav px-3">
<li className="nav-item text-nowrap">
<a className="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
);
}
Expand Down
31 changes: 17 additions & 14 deletions src/component/MySidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,37 @@ class MySidebar extends Component {

constructor(props) {
super(props);
this.state = {
links: [
{key: "0", text: "Retirement", isActive: true},
{key: "1", text: "Near Future", isActive: false},
{key: "2", text: "Emergency Fund", isActive: false},
]
}

static getDerivedStateFromProps(props, state) {
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 });
}
}
}
return { links: links };
}

handleClick(i) {
debugger;
const links = this.state.links.slice();
let portfolioName = "";
for (const j in links) {
if(i == j){
links[j].isActive = true;
if (i == j) {
links[j].isActive = true;
portfolioName = links[j].text;
}else{
links[j].isActive = false;
} else {
links[j].isActive = false;
}
}
this.setState({
links: links,
});
this.props.handlePortfolioChange(portfolioName);
}
this.props.handlePortfolioChange(portfolioName);
}

render() {

return (
<nav className="col-md-2 d-none d-md-block bg-light sidebar">
<div className="sidebar-sticky">
Expand Down

0 comments on commit 058f01d

Please sign in to comment.