import React, { Component } from ‘react’;
import PriceList from '…/component/PriceList’
import ViewTab from '…/component/ViewTab’
import CreateBtn from '…/component/CreateBtn’
import TotalPrice from '…/component/TotalPrice’
import {LIST_VIEW,GRAPHIC_VIEW,padLeft,OUTCOME,parseToYearAndMonth} from '…/utility’
import MonthPicker from '…/component/MonthPicker’
import MaterialIcon, {colorPalette} from ‘material-icons-react’;

const categories = {
“1”: {
“id”:“1”,
“iconName”:“card_travel”,
“name”:“travel”,
“type”:“outcome”
},
“2”:{
“id”:“2”,
“iconName”:“fastfood”,
“name”:“Grocery”,
“type”:“outcome”
}
}
const items = [
{
“id”: 1,
“title”:“travel”,
“price”: 800,
“date”:“2019-02-10”,
“cid”:1
},
{
“id”: 2,
“title”:“Grocery”,
“price”: 1600,
“date”:“2019-02-10”,
“cid”:2
}
]

const newItem = {
“id”: 3,
“title”:“Grocery”,
“price”: 1500,
“date”:“2019-02-20”,
“cid”:2
}

class Home extends Component {
constructor(props){
super(props)
this.state = {
items,
currentDate: parseToYearAndMonth(),
tabView: LIST_VIEW,
}
}
changeView = (view) =>{
this.setState({
tabView:view
})
}
changeDate = ({year,month}) =>{
this.setState({
currentDate: {year,month}
})
}
modifyItem = (modifiedItem)=>{
const modifiedItems = this.state.items.map(item=>{
if (item.id === modifiedItem.id){
return {…item,title:“modified title”}
} else {
return item
}
})
this.setState({
items:modifiedItems
})
}
deleteItem = (deletedItem)=>{
const filterItems = this.state.items.filter(item=>item.id !deletedItem.id)
this.setState({
items:filterItems
})
}
createItem = ()=>{
this.setState({
items:[newItem,…this.state.items]
})
}
render() {
const {items, currentDate,tabView} = this.state
const itemsWithCategory = items.map(item=>{
item.category = categories[item.cid]
return item
}).filter(item=>{
return item.date.includes(${currentDate.year}-${padLeft(currentDate.month)})
})
let totalIncome = 0, totalOutCome = 0
itemsWithCategory.forEach(item => {
if (item.category.type === OUTCOME) {
totalOutCome += item.price
} else {
totalIncome += item.price
}
})
console.log(currentDate)
return (
<React.Fragment>

export default Home;

import React, { Component } from ‘react’;
import {padLeft} from '…/utility.js’
import {range} from ‘…/utility.js’

class MonthPicker extends Component {
constructor(props){
super(props)
this.state= {
isOpen: false,
selectedYear: this.props.year,
selectedMonth:this.props.month
}
}
toggleDropDown=()=>{
this.setState({
isOpen: !this.state.isOpen
})
}
onChangeYear=(yearNum)=>{
this.setState({
selectedYear:yearNum
})
}
onChangeMonth=(monthNum)=>{
this.setState({
selectedMonth:monthNum,
isOpen:false,
})
this.props.onChange(this.state.selectedYear,this.state.selectedMonth)
}
render() {
const { isOpen } = this.state
const monthRange = range(12,1)
const yearRange = range(8,-2).map(num=>(num + 2019))

        return(
            <div className="dropdown month-picker-component">
            <h4>choose month</h4>
            <button 
                className="btn btn-secondary dropdown-toggle" 
                type="button"
                onClick={()=>this.toggleDropDown()}>
                {`${this.state.selectedYear} / ${padLeft(this.state.selectedMonth)}`}
            </button>
            {isOpen?  
                <div className="dropdown-menu" style={{display:'block'}}> 
                    <div class="row">
                        <div className="col border-right">
                        <center>Year</center>
                            {yearRange.map((yearNum,index)=>(
                                <a  key={index}
                                    onClick={()=>{this.onChangeYear(yearNum)}} 
                                    className={(yearNum == this.state.selectedYear)?'dropdown-item active':'dropdown-item'}>
                                    {yearNum}
                                </a>
                            ))}
                        </div>
                        <div className="col">
                            <center>Month</center>
                            {monthRange.map((monthNum,index)=>(
                                <a key={index} 
                                   onClick={()=>{this.onChangeMonth(monthNum)}} 
                                   className={(monthNum == this.state.selectedMonth)?'dropdown-item active':'dropdown-item'}>
                                   {padLeft(monthNum)}
                                </a>
                            ))} 
                        </div>
                    </div>
                </div>
            : null}
        </div>
        )
     };
}

export default MonthPicker;