🥡 Started making react-table re-usable

docker-compose.yml

@@ -95,7 +95,7 @@ services:
       - elasticsearch
     environment:
       name: core-services
-      SERVICES: import,libraryqueue,settings,imagetransformation
+      SERVICES: library,queue,settings,search,imagetransformation
     env_file: docker-compose.env
     volumes: 
       - *comics-volume

src/client/actions/comicinfo.actions.tsx

@@ -43,7 +43,7 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
       url: `${COMICVINE_SERVICE_URI}/getWeeklyPullList`,
       method: "get",
       params: {
-        startDate: "2022-3-21",
+        startDate: "2022-4-8",
         pageSize: "15",
         currentPage: "1",
       },

src/client/assets/img/comicinfoxml.svg

@@ -1,6 +1,6 @@
 <svg width="384" height="512" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path id="Path" fill="#ff634d" fill-rule="evenodd" stroke="#454545" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 215.786591 23.351563 C 215.786591 23.351563 98.801674 21.473022 81.803864 21.200073 C 21.811596 20.236725 23.297552 52.264709 22.462652 104.258026 C 21.073503 190.766876 22.587183 312.129272 22.115429 437.295349 C 21.974922 474.574432 57.495609 491.702881 94.239006 492.460449 C 172.222427 494.068359 287.278351 491.559753 287.278351 491.559753 C 287.278351 491.559753 361.530945 494.731964 361.601563 409.742523 C 361.689667 303.742554 361.407318 172.708862 361.407318 172.708862 L 215.786591 23.351563 L 215.786591 23.351563 Z"/>
+    <path id="Path" fill="#e1933c" fill-rule="evenodd" stroke="#393838" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 215.786591 23.351563 C 215.786591 23.351563 98.801674 21.473022 81.803864 21.200073 C 21.811596 20.236725 23.297552 52.264709 22.462652 104.258026 C 21.073503 190.766876 22.587183 312.129272 22.115429 437.295349 C 21.974922 474.574432 57.495609 491.702881 94.239006 492.460449 C 172.222427 494.068359 287.278351 491.559753 287.278351 491.559753 C 287.278351 491.559753 361.530945 494.731964 361.601563 409.742523 C 361.689667 303.742554 361.407318 172.708862 361.407318 172.708862 L 215.786591 23.351563 L 215.786591 23.351563 Z"/>
     <path id="Shape" fill="none" stroke="#ffffff" stroke-width="32" stroke-linecap="round" stroke-linejoin="round" d="M 110 270 L 264 270 M 162 330 L 220 330"/>
     <path id="Line" fill="none" stroke="#ffffff" stroke-width="33" stroke-linecap="round" stroke-linejoin="round" d="M 110 395 L 264 394.999084"/>
-    <path id="path1" fill="none" stroke="#454545" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 207 23 L 208 175 L 349 175"/>
+    <path id="path1" fill="none" stroke="#393838" stroke-width="21" stroke-linecap="round" stroke-linejoin="round" d="M 207 23 L 208 175 L 349 175"/>
 </svg>

src/client/assets/scss/App.scss

@@ -273,8 +273,8 @@ pre {
   }
 }
 
-.comicvine-metadata {
+.comicInfo-metadata {
-  background-color: #EBFCFF;
+  background-color: #F7EBDD;
   padding: 0.8rem;
   border-radius: 0.5rem;
 }

src/client/components/ComicDetail.tsx

@@ -6,6 +6,7 @@ import { ComicVineMatchPanel } from "./ComicDetail/ComicVineMatchPanel";
 import { VolumeInformation } from "./ComicDetail/Tabs/VolumeInformation";
 import { RawFileDetails } from "./ComicDetail/RawFileDetails";
 import { ArchiveOperations } from "./ComicDetail/Tabs/ArchiveOperations";
+import { ComicInfoXML } from "./ComicDetail/Tabs/ComicInfoXML";
 import AcquisitionPanel from "./ComicDetail/AcquisitionPanel";
 import DownloadsPanel from "./ComicDetail/DownloadsPanel";
 import { EditMetadataPanel } from "./ComicDetail/EditMetadataPanel";
@@ -168,13 +169,9 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
           <div className="column is-three-quarters">
             {!isNil(comicBookDetailData.sourcedMetadata) &&
               !isNil(comicBookDetailData.sourcedMetadata.comicInfo) && (
-                <pre className="has-text-size-7">
+                <ComicInfoXML
-                  {JSON.stringify(
+                  json={comicBookDetailData.sourcedMetadata.comicInfo}
-                    comicBookDetailData.sourcedMetadata.comicInfo,
+                />
-                    null,
-                    2,
-                  )}
-                </pre>
               )}
           </div>
         </div>

src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx

@@ -0,0 +1,53 @@
+import React, { ReactElement } from "react";
+
+export const ComicInfoXML = (data): ReactElement => {
+  const { json } = data;
+  console.log(data);
+  return (
+    <div className="comicInfo-metadata">
+      <dl className="has-text-size-7">
+        <dd className="has-text-weight-medium">{json.series[0]}</dd>
+        <dd className="mt-2 mb-2">
+          <div className="field is-grouped is-grouped-multiline">
+            <div className="control">
+              <span className="tags has-addons">
+                <span className="tag">Pages</span>
+                <span className="tag is-warning is-light">
+                  {json.publisher[0]}
+                </span>
+              </span>
+            </div>
+            <div className="control">
+              <span className="tags has-addons">
+                <span className="tag">Issue #</span>
+                <span className="tag is-warning is-light">
+                  {parseInt(json.number[0], 10)}
+                </span>
+              </span>
+            </div>
+            <div className="control">
+              <span className="tags has-addons">
+                <span className="tag">Pages</span>
+                <span className="tag is-warning is-light">
+                  {json.pagecount[0]}
+                </span>
+              </span>
+            </div>
+            <div className="control">
+              <span className="tags has-addons">
+                <span className="tag">Genre</span>
+                <span className="tag is-success is-light">{json.genre[0]}</span>
+              </span>
+            </div>
+          </div>
+        </dd>
+        <dd>
+          <span className="is-size-7">{json.notes[0]}</span>
+        </dd>
+        <dd className="mt-1 mb-1">{json.summary[0]}</dd>
+      </dl>
+    </div>
+  );
+};
+
+export default ComicInfoXML;

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 T2Table from "../shared/T2Table";
-import { flatten, isEmpty, isNil, isUndefined, map } from "lodash";
+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) => {
+  const navigateToComicDetail = (row) => {
-    navigate(`/comic/details/${id}`);
+    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(() => {
+  const goToPreviousPage = useCallback((pageIndex, pageSize) => {
-    previousPage();
+    // 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">
+              <T2Table
-                <thead>
+                rowData={searchResults.hits.hits}
-                  {headerGroups.map((headerGroup, idx) => (
+                totalPages={searchResults.hits.total.value}
-                    <tr key={idx} {...headerGroup.getHeaderGroupProps()}>
+                columns={columns}
-                      {headerGroup.headers.map((column, idx) => (
+                paginationHandlers={{
-                        <th key={idx} {...column.getHeaderProps()}>
+                  nextPage: goToNextPage,
-                          {column.render("Header")}
+                  previousPage: goToPreviousPage,
-                        </th>
+                }}
-                      ))}
+                rowClickHandler={navigateToComicDetail}
-                    </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>
-
               {/* 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>
         )}

src/client/components/shared/T2Table.tsx

@@ -0,0 +1,200 @@
+import React, { ReactElement, useState } from "react";
+import PropTypes from "prop-types";
+import { useTable, usePagination, useFlexLayout } from "react-table";
+
+export const T2Table = (tableOptions): ReactElement => {
+  const { rowData, columns, paginationHandlers, totalPages, rowClickHandler } =
+    tableOptions;
+  const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] =
+    useState(false);
+  const togglePageSizeDropdown = () =>
+    collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    page,
+    canPreviousPage,
+    canNextPage,
+    pageOptions,
+    pageCount,
+    gotoPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data: rowData,
+      manualPagination: true,
+      initialState: {
+        pageIndex: 1,
+        pageSize: 25,
+      },
+      pageCount: totalPages,
+    },
+    usePagination,
+    useFlexLayout,
+  );
+  return (
+    <>
+      <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={() => rowClickHandler(row)}
+              >
+                {row.cells.map((cell, idx) => {
+                  return (
+                    <td
+                      key={idx}
+                      {...cell.getCellProps()}
+                      className="is-vcentered"
+                    >
+                      {cell.render("Cell")}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+
+      {/* pagination control */}
+      <nav className="pagination" role="navigation" aria-label="pagination">
+        {/* x of total indicator */}
+        <div>
+          Page {pageIndex} of {Math.ceil(pageCount / pageSize)}
+          (Total resources: {pageCount})
+        </div>
+
+        {/* previous page and next page controls */}
+        <div className="field has-addons">
+          <p className="control">
+            <button
+              className="button"
+              onClick={() => {
+                previousPage();
+                return paginationHandlers.previousPage(pageIndex, pageSize);
+              }}
+              disabled={!canPreviousPage}
+            >
+              Previous Page
+            </button>
+          </p>
+          <p className="control">
+            <button
+              className="button"
+              onClick={() => {
+                nextPage();
+                return paginationHandlers.nextPage(pageIndex, pageSize);
+              }}
+              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(pageCount / 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>
+    </>
+  );
+};
+
+T2Table.propTypes = {
+  rowData: PropTypes.array,
+  totalPages: PropTypes.number,
+  columns: PropTypes.array,
+  paginationHandlers: PropTypes.shape({
+    nextPage: PropTypes.func,
+    previousPage: PropTypes.func,
+  }),
+  rowClickHandler: PropTypes.func,
+};
+export default T2Table;