Pagination modified, TODO: next, prev buttons (#18)

src/components/domain/domains.jsx

@@ -7,11 +7,15 @@ import {browserHistory} from 'react-router';
 
 import MessageBar from '../message_bar.jsx';
 import PageInfo from '../page_info.jsx';
+import Pagination from '../pagination.jsx';
 import Panel from '../panel.jsx';
 import StatusLabel from '../status_label.jsx';
 
 import * as Client from '../../utils/client.jsx';
 import * as GlobalActions from '../../action_creators/global_actions.jsx';
+import Constants from '../../utils/constants.jsx';
+
+const QueryOptions = Constants.QueryOptions;
 
 export default class Domains extends React.Component {
     constructor(props) {
@@ -20,8 +24,11 @@ export default class Domains extends React.Component {
         this.handleLink = this.handleLink.bind(this);
         this.getDomains = this.getDomains.bind(this);
 
+        const page = parseInt(this.props.location.query.page, 10) || 1;
+
         this.state = {
-            data: null
+            page,
+            offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT)
         };
     }
     handleLink(e, path) {
@@ -33,6 +40,10 @@ export default class Domains extends React.Component {
     }
     getDomains() {
         Client.getAllDomains(
+            {
+                limit: QueryOptions.DEFAULT_LIMIT,
+                offset: this.state.offset
+            },
             (data) => {
                 this.setState({
                     data
@@ -47,6 +58,20 @@ export default class Domains extends React.Component {
             }
         );
     }
+    componentWillReceiveProps(newProps) {
+        if (this.props.location.query.page !== newProps.location.query.page) {
+            const page = parseInt(newProps.location.query.page, 10) || 1;
+
+            GlobalActions.emitStartLoading();
+
+            this.state = {
+                page,
+                offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT)
+            };
+
+            this.getDomains();
+        }
+    }
     componentDidMount() {
         $('#sidebar-domains').addClass('active');
         this.getDomains();
@@ -149,7 +174,7 @@ export default class Domains extends React.Component {
         }
 
         const panelBody = (
-            <div>
+            <div key='panelBody'>
                 <div
                     id='index-domains-table'
                     className='table-responsive'
@@ -177,32 +202,33 @@ export default class Domains extends React.Component {
             </div>
         );
 
-        const pageInfo = (
-            <PageInfo
-                titlePage='Dominios'
-                descriptionPage='Dominios de correos creados'
-            />
-        );
-
-        const hasPageInfo = (this.props.children) ? '' : {pageInfo};
-
-        const viewIndex = (
-            <Panel
-                btnsHeader={addDomainButton}
-                children={panelBody}
-            />
-        );
-
-        const view = (this.props.children || viewIndex);
+        let pagination;
+        if (this.state.offset > 0 || (this.state.data && this.state.data.more)) {
+            const totalPages = this.state.data ? Math.ceil(this.state.data.total / QueryOptions.DEFAULT_LIMIT) : 0;
+            pagination = (
+                <Pagination
+                    key='panelPagination'
+                    url='domains'
+                    currentPage={this.state.page}
+                    totalPages={totalPages}
+                />
+            );
+        }
 
         return (
             <div>
-                {hasPageInfo}
+                <PageInfo
+                    titlePage='Dominios'
+                    descriptionPage='Dominios de correos creados'
+                />
                 {message}
                 <div className='content animate-panel'>
                     <div className='row'>
                         <div className='col-md-12 central-content'>
-                            {view}
+                            <Panel
+                                btnsHeader={addDomainButton}
+                                children={[panelBody, pagination]}
+                            />
                         </div>
                     </div>
                 </div>
@@ -212,6 +238,5 @@ export default class Domains extends React.Component {
 }
 
 Domains.propTypes = {
-    location: React.PropTypes.object.isRequired,
-    children: React.PropTypes.any
+    location: React.PropTypes.object.isRequired
 };

src/components/pagination.jsx

 import React from 'react';
-import Anchor from './anchor.jsx';
+import {browserHistory} from 'react-router';
 
 export default class Pagination extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleChange = this.handleChange.bind(this);
+    }
+    handleChange(e) {
+        e.preventDefault();
+
+        const page = parseInt(e.currentTarget.innerText, 10);
+        let pageUrl = '';
+        if (page > 1) {
+            pageUrl = `?page=${page}`;
+        }
+
+        browserHistory.push(`/${this.props.url}${pageUrl}`);
+    }
     render() {
+        const total = this.props.totalPages;
+        const current = this.props.currentPage;
+        const pages = [];
+
+        // let first;
+        // let prev;
+        // let next;
+        // let last;
+        let i = 1;
+
+        // if (current > 1 && current < total) {
+        //
+        // }
+
+        for (; i <= total; i++) {
+            if (current === i) {
+                pages.push(
+                    <li
+                        key={`page-${i}`}
+                        className='active'
+                    >
+                        <a remote='false'>{i.toString()}</a>
+                    </li>
+                );
+            } else {
+                pages.push(
+                    <li key={`page-${i}`}>
+                        <a
+                            onClick={this.handleChange}
+                        >{i.toString()}</a>
+                    </li>
+                );
+            }
+        }
+
         return (
-            <div
-                className={this.props.classes}
-                id={this.props.id}
-            >
-                <ul className={this.props.ulClasses}>
-                    {this.props.linksArray.map((link, i) => {
-                        return (
-                          <Anchor
-                              key={i}
-                              url={link.url}
-                              label={link.label}
-                              attrs={link.props}
-                          />
-                        );
-                    })}
+            <div className='pagination'>
+                <ul className='pagination'>
+                    {pages}
                 </ul>
             </div>
         );
@@ -26,15 +64,7 @@ export default class Pagination extends React.Component {
 }
 
 Pagination.propTypes = {
-    classes: React.PropTypes.string,
-    id: React.PropTypes.string,
-    ulClasses: React.PropTypes.string,
-    linksArray: React.PropTypes.array
-};
-
-Pagination.defaultProps = {
-    classes: '',
-    id: 'pagination',
-    ulClasses: 'pagination',
-    linksArray: []
+    url: React.PropTypes.string.isRequired,
+    currentPage: React.PropTypes.number.isRequired,
+    totalPages: React.PropTypes.number.isRequired
 };

src/utils/client.jsx

@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 
 import $ from 'jquery';
-import {browserHistory} from 'react-router';
 
 import ZimbraAdminApi from 'zimbra-admin-api-js';
 import ZimbraStore from '../stores/zimbra_store.jsx';
@@ -15,29 +14,20 @@ import Constants from './constants.jsx';
 
 // función que maneja el error como corresponde
 function handleError(methodName, err) {
-    if (err.type && err.type === Constants.ActionTypes.NOT_LOGGED_IN) {
-        browserHistory.push('/login');
+    if (err.extra && err.extra.code === Constants.ZimbraCodes.NOT_LOGGED_IN) {
+        Utils.setCookie('token', '', -1);
         return err;
     }
 
-    let e = null;
-    try {
-        e = JSON.parse(err.responseText);
-    } catch (parseError) {
-        e = null;
-    }
-
-    console.error(methodName, e); //eslint-disable-line no-console
+    console.error(methodName, err); //eslint-disable-line no-console
 
     const error = {};
-    if (e) {
-        error.message = e.Body.Fault.Reason.Text;
+    if (err) {
+        error.message = err.extra.reason;
     } else {
         error.message = 'Ocurrio un error general';
     }
 
-    // Aqui deberiamos revisar si falta hacer login nuevamente
-
     return error;
 }
 
@@ -146,7 +136,7 @@ export function isLoggedIn(callback) {
     return callback(data);
 }
 
-export function getAllDomains(success, error) {
+export function getAllDomains(opts, success, error) {
     initZimbra().then(
         (zimbra) => {
             zimbra.getAllDomains((err, data) => {
@@ -156,7 +146,7 @@ export function getAllDomains(success, error) {
                 }
 
                 return success(data);
-            });
+            }, opts);
         },
         (err) => {
             let e = handleError('getAllDomains', err);

src/utils/constants.jsx

@@ -8,8 +8,7 @@ export default {
         START_LOADING: null,
         END_LOADING: null,
         USER_CHANGED: null,
-        RECEIVED_ERROR: null,
-        NOT_LOGGED_IN: null
+        RECEIVED_ERROR: null
     }),
 
     PayloadSources: keyMirror({
@@ -17,39 +16,16 @@ export default {
         VIEW_ACTION: null
     }),
 
-    RESERVED_TEAM_NAMES: [
-        'www',
-        'web',
-        'admin',
-        'support',
-        'notify',
-        'test',
-        'demo',
-        'mail',
-        'team',
-        'channel',
-        'internal',
-        'localhost',
-        'dockerhost',
-        'stag',
-        'post',
-        'cluster',
-        'api'
-    ],
+    ZimbraCodes: {
+        NOT_LOGGED_IN: 'service.AUTH_EXPIRED'
+    },
+
     RESERVED_USERNAMES: [
         'admin',
         'root'
     ],
     MONTHS: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Juio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
-    KeyCodes: {
-        UP: 38,
-        DOWN: 40,
-        LEFT: 37,
-        RIGHT: 39,
-        BACKSPACE: 8,
-        ENTER: 13,
-        ESCAPE: 27,
-        SPACE: 32,
-        TAB: 9
+    QueryOptions: {
+        DEFAULT_LIMIT: 10
     }
 };