import * as ServerAPI from '../serverAPI';

import { Loader, Menu } from 'semantic-ui-react';

import DeputiesList from './DeputiesList';
import React from 'react';

export default class DeputyApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      deputies: [],
      pageSize: 25,
      limitedDeputiesList: [],
      page: 1,
      isLoading: true,
    };

    this.handleItemClick = this.handleItemClick.bind(this);
  }

  loadDeputiesFromServer() {
    ServerAPI.getResource('deputies').then((deputies) => {
      let pageCount = Math.ceil(deputies.length / this.state.pageSize);

      this.setState({ deputies, pageCount, isLoading: false });
      this.limitDeputies();
    }).catch((error) => {
      console.error(error);
    });
  }

  componentDidMount() {
    this.loadDeputiesFromServer();
  }

  componentWillUpdate (nextProps, nextState) {
    window.scrollTo(0, 0);
  }

  limitDeputies() {
    let { deputies, pageSize, page } = this.state;

    let start = pageSize * (page - 1);
    let end = pageSize * page;
    let limitedDeputiesList = deputies.slice(start, end);
    this.setState({ limitedDeputiesList });
  }

  handleItemClick(e, { name }) {
    this.setState({ page: name }, () => {
      this.limitDeputies();
    });
  }

  render() {
    let {
      limitedDeputiesList,
      isLoading,
      page,
      pageCount,
    } = this.state;

    let renderMenuItems = () => {
      let items = [];

      for (let i = 1; i <= pageCount; i++) {
        items.push(<Menu.Item key={i} name={i.toString()} active={page === i} onClick={this.handleItemClick}/>);
      }

      return items;
    }

    let loadedPage = () => {
      if (isLoading) {
        return (
          <Loader active='true' size='big'>Carregando Informações...</Loader>
        );
      } else {
        return(
          <div className="deputies">
            <DeputiesList deputies={limitedDeputiesList} />

            <Menu pagination borderless>
              {renderMenuItems()}
            </Menu>
          </div>
        )
      }
    }

    return (loadedPage());
  }
}

@@ -1230,20 +1230,34 @@
 %7B page: 
-name
+parseInt(name, 10)
  %7D, () =
@@ -1516,24 +1516,52 @@
 unt; i++) %7B%0A
+        if (i === page) %7B%0A  
         item
@@ -1590,82 +1590,249 @@
 %7Bi%7D 
-name=%7Bi.toString()%7D active=%7Bpage === i%7D onClick=%7Bthis.handleItemClick%7D/%3E);
+active=%7Btrue%7D disabled%3E%7Bi%7D%3C/Menu.Item%3E);%0A        %7D else %7B%0A          items.push(%0A            %3CMenu.Item%0A              key=%7Bi%7D%0A              name=%7Bi.toString()%7D%0A              onClick=%7Bthis.handleItemClick%7D%0A            /%3E%0A          );%0A        %7D
 %0A   
@@ -1962,14 +1962,14 @@
 ive=
-'
+%7B
 true
-'
+%7D
  siz

Fix active-page in pagination