Notes

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Spinner, Button } from 'foundation-components-core';
import { WithWidgetFrame } from 'foundation-components-workspaces';

import KeyAccountBalanceView from './KeyAccountBalanceView';
import KeyAccountBalanceDetailView from './KeyAccountBalanceDetailView';

import { SpinnerContainer } from './KeyAccountBalanceContainer.styles';

import KeyAccBalApi from '../../api/KeyAccBalApi';

const SpinnerNode = (
<SpinnerContainer>
<Spinner color="black" />
</SpinnerContainer>
);

export class KeyAccountBalanceContainer extends Component {
constructor(props) {
super(props);
this.state = {
iskeyAccView: true,
isSpinner: true,
viewBy: 'ace',
accountsList: [],
accountDetails: {},
filters: {
items: [
{
id: 'ace',
label: 'viewByAce'
},
{
id: 'bce',
label: 'viewByBce'
}
],
selectedItemId: 'ace',
title: 'View By',
titleIconName: Button.ICON_NAMES.go
}
};
}

componentWillMount() {
this.props.onUpdating();
this.timeout = setTimeout(() => {
this.props.onUpdated({
filters: this.state.filters
});
}, 1000);
}

componentDidMount() {
const payload = {
filterData: {
viewby: true
}
};
this.KeyAccBalance(payload);
this.props.onUpdated({
headerTitle: 'Key Account Balance',
shouldShowLastUpdatedTitle: true
});
}

componentWillReceiveProps(nextProps) {
// handle back button clicked
if (
nextProps.timeOfWidgetButtonsClick.back !==
this.props.timeOfWidgetButtonsClick.back
) {
this.setState({
iskeyAccView: true
});
this.props.onUpdated({
shouldShowBackButton: false,
headerTitle: 'Key Account Balance',
shouldShowLastUpdatedTitle: true
});
this.timeout = setTimeout(() => {
this.props.onUpdated({
filters: this.state.filters
});
}, 500);
}
}

onItemClick = async (account) => {
const { apiConfig, isMockMode } = this.props;
console.log(account, 'account account');
this.setState({ isSpinner: true });
this.props.onUpdated({
headerTitle: account.acctName,
shouldShowLastUpdatedTitle: true,
shouldShowBackButton: true,
filters: {}
});
console.log('before ewruweruweyr');
const selectedAccount = {
accountNo: account.acctNum,
bankCode: account.bankCode,
countryCode: account.ctryCode,
currencyCode: account.ccyCode
};

const selectedAcctTransaction = await KeyAccBalApi.getSelectedAcctTransaction(
{
apiConfig,
param: selectedAccount,
isMockMode
}
);
console.log(selectedAcctTransaction, 'after ewruweruweyr');
const {
payloadResponse: { transactions }
} = selectedAcctTransaction;
this.setState({
accountDetails: transactions,
iskeyAccView: false,
isSpinner: false
});
};

KeyAccBalance = async (payload) => {
const { apiConfig, isMockMode } = this.props;
const keyAccountBalance = await KeyAccBalApi.getKeyAccountsBalance({
apiConfig,
param: payload,
isMockMode
});
const {
payloadResponse: {
keyAccountBalance: { accountsList = undefined }
}
} = keyAccountBalance;
this.setState({
accountsList,
isSpinner: false
});
};

renderView() {
const { iskeyAccView, isSpinner } = this.state;
if (isSpinner) {
return SpinnerNode;
} else if (iskeyAccView) {
console.log('coming here 1111');
return (
<KeyAccountBalanceView
viewBy={this.state.viewBy === this.props.selectedFilterItemId}
data={this.state.accountsList}
onItemClick={(account) => this.onItemClick(account)}
/>
);
} else {
return (
<KeyAccountBalanceDetailView
accountDetails={this.state.accountDetails}
/>
);
}
}

render() {
return <div>{this.renderView()}</div>;
}
}

KeyAccountBalanceContainer.propTypes = {
onUpdated: PropTypes.func.isRequired,
onUpdating: PropTypes.func.isRequired,
timeOfWidgetButtonsClick: PropTypes.shape({
refresh: PropTypes.string,
back: PropTypes.number
}),
selectedFilterItemId: PropTypes.string
};

export default WithWidgetFrame(KeyAccountBalanceContainer);