import React, { Component } from "react";

import Tabs from 'antd/lib/tabs';

import TabelaPessoas from "../TabelaPessoas/index.jsx";
import GraficoPublicacoes from "../../components/GraficoPublicacoes/index.jsx";

import "./index.less";

const { TabPane } = Tabs;

export default class DashboardContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        };
        this.button = React.createRef();
        this.click = this.click.bind(this);
    }

    componentWillMount() {
        
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        $(this.button.current).fadeOut(250).fadeIn(250);
    }

    click() {
        this.setState({ counter: this.state.counter + 1 });
    }

    render() {
        const { counter } = this.state;
        return (
            <div className="my-dashboard">
                <Tabs defaultActiveKey="1">
                    <TabPane tab="Tabela" key="1">
                        <TabelaPessoas />
                    </TabPane>
                    <TabPane tab="Gráficos" key="2">
                        <GraficoPublicacoes />
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}
