🥡 Started making react-table re-usable

src/client/components/Library/Library.tsx

@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom";
-import { useTable, usePagination, useFlexLayout } from "react-table";
-import { flatten, isEmpty, isNil, isUndefined, map } from "lodash";
+import T2Table from "../shared/T2Table";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import RawFileDetails from "./RawFileDetails";
 import ComicVineDetails from "./ComicVineDetails";
 import SearchBar from "./SearchBar";
@@ -24,16 +24,11 @@ interface IComicBookLibraryProps {
 
 export const Library = (data: IComicBookLibraryProps): ReactElement => {
   const { searchResults } = data.data;
-  const pageTotal = searchResults.hits.total.value;
-  const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] =
-    useState(false);
-  const togglePageSizeDropdown = () =>
-    collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
 
   // programatically navigate to comic detail
   const navigate = useNavigate();
-  const navigateToComicDetail = (id) => {
-    navigate(`/comic/details/${id}`);
+  const navigateToComicDetail = (row) => {
+    navigate(`/comic/details/${row.original._id}`);
   };
 
   const ImportStatus = ({ value }) => {
@@ -42,7 +37,9 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
         <dl>
           <span className="tags has-addons is-size-7">
             <span className="tag">Series</span>
-            <span className="tag is-warning is-light">{ellipsize(value.series[0], 25)}</span>
+            <span className="tag is-warning is-light">
+              {ellipsize(value.series[0], 25)}
+            </span>
           </span>
         </dl>
         <dl>
@@ -50,7 +47,9 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             <div className="control">
               <span className="tags has-addons is-size-7  mt-2">
                 <span className="tag">Pages</span>
-                <span className="tag is-info is-light has-text-weight-bold">{value.pagecount[0]}</span>
+                <span className="tag is-info is-light has-text-weight-bold">
+                  {value.pagecount[0]}
+                </span>
               </span>
             </div>
 
@@ -58,7 +57,9 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
               <span className="tags has-addons is-size-7 mt-2">
                 <span className="tag">Issue</span>
                 {!isNil(value.number) && (
-                  <span className="tag has-text-weight-bold is-success is-light">{parseInt(value.number[0], 10)}</span>
+                  <span className="tag has-text-weight-bold is-success is-light">
+                    {parseInt(value.number[0], 10)}
+                  </span>
                 )}
               </span>
             </div>
@@ -71,7 +72,8 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
   };
 
   const WantedStatus = ({ value }) => {
-    return value ? <span className="tag is-info is-light">Wanted</span> : null;
+    console.log(value);
+    return !value ? <span className="tag is-info is-light">Wanted</span> : null;
   };
 
   console.log(searchResults);
@@ -130,7 +132,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             Header: "Something",
             accessor: "_source.acquisition.wanted",
             Cell: (props) => {
-              return <div>asda</div>
+              return <WantedStatus value={props.cell.value.toString()} />;
             },
           },
         ],
@@ -142,39 +144,11 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
   ImportStatus.propTypes = {
     value: PropTypes.bool.isRequired,
   };
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    page,
-    canPreviousPage,
-    canNextPage,
-    pageOptions,
-    pageCount,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    state: { pageIndex, pageSize },
-  } = useTable(
-    {
-      columns,
-      data: searchResults.hits.hits,
-      manualPagination: true,
-      initialState: {
-        pageIndex: 1,
-        pageSize: 25,
-      },
-      pageCount: searchResults.hits.total.value,
-    },
-    usePagination,
-    useFlexLayout,
-  );
+
   const dispatch = useDispatch();
-  const goToNextPage = useCallback(() => {
+  const goToNextPage = useCallback((pageIndex, pageSize) => {
     // incremement pageIndex
-    nextPage();
+    // nextPage();
     console.log(pageIndex);
     console.log("from", pageSize * pageIndex + 1);
     dispatch(
@@ -190,10 +164,10 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
         },
       ),
     );
-  }, [pageIndex]);
+  }, []);
 
-  const goToPreviousPage = useCallback(() => {
-    previousPage();
+  const goToPreviousPage = useCallback((pageIndex, pageSize) => {
+    // previousPage();
     let from = 0;
     if (pageIndex === 2) {
       from = (pageIndex - 1) * pageSize + 2 - 27;
@@ -213,7 +187,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
         },
       ),
     );
-  }, [pageIndex]);
+  }, []);
 
   return (
     <section className="container">
@@ -224,148 +198,17 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
         {!isUndefined(searchResults) && (
           <div>
             <div className="library">
-              <table {...getTableProps()} className="table is-hoverable">
-                <thead>
-                  {headerGroups.map((headerGroup, idx) => (
-                    <tr key={idx} {...headerGroup.getHeaderGroupProps()}>
-                      {headerGroup.headers.map((column, idx) => (
-                        <th key={idx} {...column.getHeaderProps()}>
-                          {column.render("Header")}
-                        </th>
-                      ))}
-                    </tr>
-                  ))}
-                </thead>
-
-                <tbody {...getTableBodyProps()}>
-                  {page.map((row, idx) => {
-                    prepareRow(row);
-                    return (
-                      <tr
-                        key={idx}
-                        {...row.getRowProps()}
-                        onClick={() => navigateToComicDetail(row.original._id)}
-                      >
-                        {row.cells.map((cell, idx) => {
-                          return (
-                            <td
-                              key={idx}
-                              {...cell.getCellProps()}
-                              className="is-vcentered"
-                            >
-                              {cell.render("Cell")}
-                            </td>
-                          );
-                        })}
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-
+              <T2Table
+                rowData={searchResults.hits.hits}
+                totalPages={searchResults.hits.total.value}
+                columns={columns}
+                paginationHandlers={{
+                  nextPage: goToNextPage,
+                  previousPage: goToPreviousPage,
+                }}
+                rowClickHandler={navigateToComicDetail}
+              />
               {/* pagination controls */}
-              <nav
-                className="pagination"
-                role="navigation"
-                aria-label="pagination"
-              >
-                {/* x of total indicator */}
-                <div>
-                  Page {pageIndex} of {Math.ceil(pageTotal / pageSize)}
-                  (Total resources: {pageTotal})
-                </div>
-
-                {/* previous page and next page controls */}
-                <div className="field has-addons">
-                  <p className="control">
-                    <button
-                      className="button"
-                      onClick={() => goToPreviousPage()}
-                      disabled={!canPreviousPage}
-                    >
-                      Previous Page
-                    </button>
-                  </p>
-                  <p className="control">
-                    <button
-                      className="button"
-                      onClick={() => goToNextPage()}
-                      disabled={!canNextPage}
-                    >
-                      <span>Next Page</span>
-                    </button>
-                  </p>
-                </div>
-
-                {/* first and last page controls */}
-                <div className="field has-addons">
-                  <p className="control">
-                    <button
-                      className="button"
-                      onClick={() => gotoPage(1)}
-                      disabled={!canPreviousPage}
-                    >
-                      <i className="fas fa-angle-double-left"></i>
-                    </button>
-                  </p>
-                  <p className="control">
-                    <button
-                      className="button"
-                      onClick={() => gotoPage(Math.ceil(pageTotal / pageSize))}
-                      disabled={!canNextPage}
-                    >
-                      <i className="fas fa-angle-double-right"></i>
-                    </button>
-                  </p>
-                </div>
-
-                {/* page selector */}
-                <span>
-                  Go to page:
-                  <input
-                    type="number"
-                    className="input"
-                    defaultValue={pageIndex}
-                    onChange={(e) => {
-                      const page = e.target.value ? Number(e.target.value) : 0;
-                      gotoPage(page);
-                    }}
-                    style={{ width: "100px" }}
-                  />
-                </span>
-
-                {/* page size selector */}
-                <div
-                  className={
-                    "dropdown " +
-                    (isPageSizeDropdownCollapsed ? "is-active" : "")
-                  }
-                  onBlur={() => togglePageSizeDropdown()}
-                >
-                  <div className="dropdown-trigger">
-                    <button
-                      className="button"
-                      aria-haspopup="true"
-                      aria-controls="dropdown-menu"
-                      onClick={() => togglePageSizeDropdown()}
-                    >
-                      <span>Select Page Size</span>
-                      <span className="icon is-small">
-                        <i className="fas fa-angle-down" aria-hidden="true"></i>
-                      </span>
-                    </button>
-                  </div>
-                  <div className="dropdown-menu" id="dropdown-menu" role="menu">
-                    <div className="dropdown-content">
-                      {[10, 20, 30, 40, 50].map((pageSize) => (
-                        <a href="#" className="dropdown-item" key={pageSize}>
-                          Show {pageSize}
-                        </a>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </nav>
             </div>
           </div>
         )}