Merge branch '5-pagination' into 'master'

Resolve "Pagination"

Closes #5

See merge request !4

src/ui/Pagination.tsx

@@ -25,6 +25,7 @@ class Pagination extends React.Component<IPagination> {
   }
 
   private toPage = (e: React.MouseEvent) => {
+    e.preventDefault();
     const { loadData, paged } = this.props;
     const page = +(e.currentTarget as HTMLElement).dataset.page;
 
@@ -80,35 +81,40 @@ class Pagination extends React.Component<IPagination> {
 
   private renderPagination = () => {
     const { paged, t } = this.props;
-    const currentPageStyle = { fontWeight: 500, border: 0 };
 
     return (
-        <div style={ { display: 'flex' } }>
-          <button style={ { border: 0 } } onClick={ this.toPage } data-page={ 0 } disabled={ paged.number === 0 }>
-            { `<< ${t('pag.first')}`}
-          </button>
-          <button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number - 1 } disabled={ paged.number === 0 }>
-            { `< ${t('pag.prev')}`}
-          </button>
-          { this.getPageNumbers().map((page, i) => (
-              <button
-                  key={ `page-${page}-${i}` }
-                  style={ paged.number === page - 1 ? currentPageStyle : { border: 0 } }
-                  disabled={ paged.number === page - 1 }
-                  onClick={ this.toPage }
-                  data-page={ page - 1 }
-              >
-                { page }
-              </button>
-          )) }
-          <button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.number + 1 } disabled={ paged.last }>
-            { `${t('pag.next')} >`}
-          </button>
-          <button style={ { border: 0 } } onClick={ this.toPage } data-page={ paged.totalPages - 1 } disabled={ paged.last }>
-            { `${t('pag.last')} >>`}
-          </button>
-        </div>
-    );
+    <nav aria-label="Page navigation">
+      <ul className="pagination">
+        <li className={`page-item ${paged.number === 0 ? "disabled" : ""}`}>
+          <a className="page-link" onClick={ this.toPage } data-page={ 0 } href="#" aria-label={t('pag.first')}>
+            <span aria-hidden="true">&laquo; {t('pag.first')}</span>
+          </a>
+        </li>
+        <li className={`page-item ${paged.number === 0 ? "disabled" : ""}`}>
+          <a onClick={ this.toPage } data-page={ paged.number - 1 } href="#" className="page-link">&lsaquo; {t('pag.prev')}</a>
+        </li>
+        { this.getPageNumbers().map((page, i) => (
+          <li key={ `page-${page}-${i}` } data-page={ page - 1 } onClick={ this.toPage } aria-current="page" className={`page-item ${paged.number === page - 1 ? "active" : ""}`}>
+            {paged.number === page - 1
+                ? <span tabIndex={-1} className="page-link">{page} <span className="sr-only">(current)</span></span>
+                : <a className="page-link" href="#">
+                  {page}
+                </a>
+            }
+          </li>
+        )) }
+
+        <li className={`page-item ${paged.last ? "disabled" : ""}`}>
+          <a onClick={ this.toPage } data-page={ paged.number + 1 } href="#" className="page-link">{t('pag.next')} &rsaquo;</a>
+        </li>
+        <li className={`page-item ${paged.last ? "disabled" : ""}`}>
+          <a className="page-link" onClick={ this.toPage } data-page={ paged.totalPages - 1 } href="#" aria-label="{t('pag.last')}">
+            <span aria-hidden="true">{t('pag.last')} &raquo;</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  );
   }
 
   public render() {