Feature/code factoring

src/components/Pagination.js

@@ -1,52 +1,84 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext } from "react";
+import { ConfigContext } from "..";
 
-export default function InitialPagination(props) {
-    return (
-      <Fragment>
-        {(props.config.show_first) ? (
-          <li className={(props.isFirst ? "disabled " : "") + "page-item"}>
-            <a href='#' className="page-link" tabIndex="-1"
-              onClick={props.firstPage}>
-              {props.config.language.pagination.first}
-            </a>
-          </li>
-        ) : null}
-        <li className={(props.isFirst ? "disabled " : "") + "page-item"}>
-          <a href='#' className="page-link" tabIndex="-1"
-            onClick={props.previousPage}>
-            {props.config.language.pagination.previous}
+const InitialPagination = ({
+  isFirst,
+  firstPage,
+  previousPage,
+  is_temp_page,
+  temp_page_number,
+  page_number,
+  onPageBlur,
+  onPageChange,
+  nextPage,
+  isLast,
+}) => {
+
+  const config = useContext(ConfigContext);
+
+  return (
+    <Fragment>
+      {config.show_first ? (
+        <li className={(isFirst ? "disabled " : "") + "page-item"}>
+          <a
+            href="#"
+            className="page-link"
+            tabIndex="-1"
+            onClick={firstPage}
+          >
+            {config.language.pagination.first}
           </a>
         </li>
-        <li className="page-item">
-          <a className="page-link">
-            <input style={{
-                  border: 'none',
-                  padding: '0',
-                  maxWidth: '30px',
-                  textAlign: 'center',
-                  display: 'inline-block'
+      ) : null}
+      <li className={(isFirst ? "disabled " : "") + "page-item"}>
+        <a
+          href="#"
+          className="page-link"
+          tabIndex="-1"
+          onClick={previousPage}
+        >
+          {config.language.pagination.previous}
+        </a>
+      </li>
+      <li className="page-item">
+        <a className="page-link">
+          <input
+            style={{
+              border: "none",
+              padding: "0",
+              maxWidth: "30px",
+              textAlign: "center",
+              display: "inline-block",
             }}
-              type="text"
-              value={(props.is_temp_page) ? props.temp_page_number : props.page_number}
-              onChange={(e) => props.onPageChange(e, true)}
-              onBlur={props.onPageBlur}
-              onKeyDown={props.onPageChange}/>
+            type="text"
+            value={
+              is_temp_page ? temp_page_number : page_number
+            }
+            onChange={(e) => onPageChange(e, true)}
+            onBlur={onPageBlur}
+            onKeyDown={onPageChange}
+          />
+        </a>
+      </li>
+      <li className={(isLast ? "disabled " : "") + "page-item"}>
+        <a href="#" className="page-link" onClick={nextPage}>
+          {config.language.pagination.next}
+        </a>
+      </li>
+      {config.show_last ? (
+        <li className={(isLast ? "disabled " : "") + "page-item"}>
+          <a
+            href="#"
+            className="page-link"
+            tabIndex="-1"
+            onClick={lastPage}
+          >
+            {config.language.pagination.last}
           </a>
         </li>
-        <li className={(props.isLast ? "disabled " : "") + "page-item"}>
-          <a href='#' className="page-link"
-            onClick={props.nextPage}>
-            {props.config.language.pagination.next}
-          </a>
-        </li>
-        {(props.config.show_last) ? (
-          <li className={(props.isLast ? "disabled " : "") + "page-item"}>
-            <a href='#' className="page-link" tabIndex="-1"
-              onClick={props.lastPage}>
-              {props.config.language.pagination.last}
-            </a>
-          </li>
-        ) : null}
-      </Fragment>
-    )
-}
+      ) : null}
+    </Fragment>
+  );
+};
+
+export default InitialPagination

src/components/TableFooter.js

@@ -1,53 +1,74 @@
-import React from 'react';
-import Pagination from './Pagination';
-import ADPagination from './ADPagination';
+import React, { useContext } from "react";
+import Pagination from "./Pagination";
+import ADPagination from "./ADPagination";
 
-export default function TableFooter(props){
-    if(props.config.show_info==true || props.config.show_pagination==true){
-      return (
-        <div className="row table-foot asrt-table-foot" id={(props.id) ? props.id + "-table-foot" : ""}>
-          <div className="col-md-6">
-            {(props.config.show_info) ? props.paginationInfo : null}
-          </div>
-          <div className="col-md-6 pull-right text-right">
-            {(props.config.show_pagination) ? (
-              <nav aria-label="Page navigation" className="pull-right">
-                <ul className="pagination justify-content-end asrt-pagination">
-                  {props.config.pagination == "basic" ? (
-                    <Pagination
-                      config={props.config}
-                      isFirst={props.isFirst}
-                      isLast={props.isLast}
-                      pages={props.pages}
-                      page_number={props.page_number}
-                      is_temp_page={props.is_temp_page}
-                      temp_page_number={props.temp_page_number}
-                      previousPage={props.previousPage}
-                      firstPage={props.firstPage}
-                      nextPage={props.nextPage}
-                      lastPage={props.lastPage}
-                      goToPage={props.goToPage}
-                      onPageChange={props.onPageChange}
-                      onPageBlur={props.onPageBlur} />
-                  ) : (
-                  <ADPagination
-                    language={props.config.language}
-                    isFirst={props.isFirst}
-                    isLast={props.isLast}
-                    pages={props.pages}
-                    page_number={props.page_number}
-                    previousPage={props.previousPage}
-                    nextPage={props.nextPage}
-                    goToPage={props.goToPage}/>
-                  )
-                  }
-                </ul>
-              </nav>
-            ) : null}
-          </div>
-        </div>
-      );
-    } else {
-      return null;
-    }
-  }
+const TableFooter = ({
+  id,
+  isFirst,
+  isLast,
+  paginationInfo,
+  pages,
+  page_number,
+  is_temp_page,
+  temp_page_number,
+  previousPage,
+  firstPage,
+  nextPage,
+  lastPage,
+  goToPage,
+  onPageChange,
+  onPageBlur,
+}) => {
+
+  const config = useContext(ConfigContext);
+
+  config.show_info && config.show_pagination ? (
+    <div
+      className="row table-foot asrt-table-foot"
+      id={id ? id + "-table-foot" : ""}
+    >
+      <div className="col-md-6">
+        {config.show_info ? paginationInfo : null}
+      </div>
+      <div className="col-md-6 pull-right text-right">
+        {config.show_pagination ? (
+          <nav aria-label="Page navigation" className="pull-right">
+            <ul className="pagination justify-content-end asrt-pagination">
+              {config.pagination == "basic" ? (
+                <Pagination
+                  config={config}
+                  isFirst={isFirst}
+                  isLast={isLast}
+                  pages={pages}
+                  page_number={page_number}
+                  is_temp_page={is_temp_page}
+                  temp_page_number={temp_page_number}
+                  previousPage={previousPage}
+                  firstPage={firstPage}
+                  nextPage={nextPage}
+                  lastPage={lastPage}
+                  goToPage={goToPage}
+                  onPageChange={onPageChange}
+                  onPageBlur={onPageBlur}
+                />
+              ) : (
+                <ADPagination
+                  language={config.language}
+                  isFirst={isFirst}
+                  isLast={isLast}
+                  pages={pages}
+                  page_number={page_number}
+                  previousPage={previousPage}
+                  nextPage={nextPage}
+                  goToPage={goToPage}
+                />
+              )}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+    </div>
+  ) : null;
+};
+
+export default TableFooter;