🔧 Fixes for Wanted comics table

2022-08-17 20:48:10 -07:00
parent 014ea27752
commit ea366d1888
9 changed files with 87 additions and 83 deletions
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@parcel/config-default": "^2.6.0",
    "@redux-devtools/extension": "^3.2.2",
-    "@tanstack/react-table": "^8.1.1",
+    "@tanstack/react-table": "^8.5.11",
    "@types/mime-types": "^2.1.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
--- a/src/client/actions/fileops.actions.tsx
+++ b/src/client/actions/fileops.actions.tsx
@@ -288,7 +288,7 @@ export const searchIssue = (query, options) => async (dispatch) => {
    method: "POST",
    data: { ...query, ...options },
  });
-
+ console.log("options", options);
  if (response.data.code === 404) {
    dispatch({
      type: SS_SEARCH_FAILED,
--- a/src/client/components/Library/Library.tsx
+++ b/src/client/components/Library/Library.tsx
@@ -65,7 +65,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
  const WantedStatus = ({ value }) => {
    return !value ? <span className="tag is-info is-light">Wanted</span> : null;
  };
-
  const columns =  [
      {
        header: "Comic Metadata",
--- a/src/client/components/WantedComics/WantedComics.tsx
+++ b/src/client/components/WantedComics/WantedComics.tsx
@@ -8,7 +8,7 @@ import MetadataPanel from "../shared/MetadataPanel";

 export const WantedComics = (props): ReactElement => {
  const wantedComics = useSelector(
-    (state: RootState) => state.fileOps.librarySearchResults,
+    (state: RootState) => state.fileOps.librarySearchResultsFormatted,
  );
  const dispatch = useDispatch();
  useEffect(() => {
@@ -27,70 +27,70 @@ export const WantedComics = (props): ReactElement => {
      ),
    );
  }, []);
-  const columnData = useMemo(
-    () => [
-      {
-        Header: "Comic Information",
-        columns: [
-          {
-            Header: "Details",
-            id: "comicDetails",
-            minWidth: 350,
-            accessor: "_source",
-            Cell: ({ value }) => <MetadataPanel data={value} />,
+
+  const columnData = [
+    {
+      header: "Comic Information",
+      columns: [
+        {
+          header: "Details",
+          id: "comicDetails",
+          minWidth: 350,
+          accessorFn: data => data,
+          cell: (value) => <MetadataPanel data={value.getValue()} />,
+        },
+      ],
+    },
+    {
+      header: "Download Status",
+      columns: [
+        {
+          header: "Files",
+          accessorKey: "acquisition",
+          align: "right",
+          cell: props => {
+            const { directconnect: { downloads } } = props.getValue();
+            return (
+              <div
+                style={{
+                  display: "flex",
+                  // flexDirection: "column",
+                  justifyContent: "center",
+                }}
+              >
+                {downloads.length > 0 ? (
+                  <span className="tag is-warning">
+                    {downloads.length}
+                  </span>
+                ) : null}
+              </div>
+            );
          },
-        ],
-      },
-      {
-        Header: "Download Status",
-        columns: [
-          {
-            Header: "Files",
-            accessor: "_source.acquisition.directconnect",
-            align: "right",
-            Cell: (props) => {
-              return (
-                <div
-                  style={{
-                    display: "flex",
-                    // flexDirection: "column",
-                    justifyContent: "center",
-                  }}
-                >
-                  {props.cell.value.length > 0 ? (
-                    <span className="tag is-warning">
-                      {props.cell.value.length}
-                    </span>
-                  ) : null}
-                </div>
-              );
-            },
-          },
-          {
-            Header: "Type",
-            id: "Air",
-          },
-          {
-            Header: "Type",
-            id: "dcc",
-          },
-        ],
-      },
-    ],
-    [],
-  );
+        },
+        {
+          header: "Type",
+          id: "Air",
+        },
+        {
+          header: "Type",
+          id: "dcc",
+        },
+      ],
+    },
+  ];
+
  return (
    <section className="container">
      <div className="section">
        <h1 className="title">Wanted Comics</h1>
        {/* Search bar */}
        <SearchBar />
-        {!isUndefined(wantedComics.hits) && (
+        {!isEmpty(wantedComics) && (
          <div>
            <div className="library">
              <T2Table
-                rowData={wantedComics.hits.hits}
-                totalPages={wantedComics.hits.total.value}
+                rowData={wantedComics}
+                totalPages={wantedComics.length}
                columns={columnData}
              // paginationHandlers={{
              //   nextPage: goToNextPage,
--- a/src/client/components/shared/MetadataPanel.tsx
+++ b/src/client/components/shared/MetadataPanel.tsx
@@ -16,6 +16,7 @@ interface IMetadatPanelProps {
  containerStyle: any;
 }
 export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
+  console.log(props)
  const {
    rawFileDetails,
    inferredMetadata,
--- a/src/client/components/shared/T2Table.tsx
+++ b/src/client/components/shared/T2Table.tsx
@@ -14,13 +14,12 @@ export const T2Table = (tableOptions): ReactElement => {
    useState(false);
  const togglePageSizeDropdown = () =>
    collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
-  console.log(rowData);
-    const table = useReactTable({
-      data: rowData,
-      columns,
-      getCoreRowModel: getCoreRowModel(),
-    })
-  
+  const table = useReactTable({
+    data: rowData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
  return (
    <>
      <table className="table is-hoverable">
@@ -35,9 +34,9 @@ export const T2Table = (tableOptions): ReactElement => {
                  {header.isPlaceholder
                    ? null
                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
                </th>
              ))}
            </tr>
@@ -51,11 +50,11 @@ export const T2Table = (tableOptions): ReactElement => {
                key={row.id}
                onClick={() => rowClickHandler(row)}
              >
-                 {row.getVisibleCells().map(cell => (
-                <td key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
-              ))}
+                {row.getVisibleCells().map(cell => (
+                  <td key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
              </tr>
            );
          })}
@@ -63,7 +62,7 @@ export const T2Table = (tableOptions): ReactElement => {
      </table>

      {/* pagination control */}
-      
+
    </>
  );
 };
--- a/src/client/constants/action-types.ts
+++ b/src/client/constants/action-types.ts
@@ -116,6 +116,9 @@ export const AIRDCPP_DOWNLOAD_PROGRESS_TICK = "AIRDCPP_DOWNLOAD_PROGRESS_TICK";
 // Transfers
 export const AIRDCPP_TRANSFERS_FETCHED = "AIRDCPP_TRANSFERS_FETCHED";

+// Comics marked as "wanted"
+export const WANTED_COMICS_FETCHED = "WANTED_COMICS_FETCHED";
+
 // LIBRARY SOCKET ENDPOINT
 export const LS_IMPORT = "LS_IMPORT";
 export const LS_COVER_EXTRACTED = "LS_COVER_EXTRACTED";
--- a/src/client/reducers/fileops.reducer.ts
+++ b/src/client/reducers/fileops.reducer.ts
@@ -7,6 +7,7 @@ import {
  IMS_RAW_IMPORT_FAILED,
  IMS_RECENT_COMICS_FETCHED,
  IMS_WANTED_COMICS_FETCHED,
+  WANTED_COMICS_FETCHED,
  IMS_CV_METADATA_IMPORT_SUCCESSFUL,
  IMS_CV_METADATA_IMPORT_FAILED,
  IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS,
@@ -206,6 +207,7 @@ function fileOpsReducer(state = initialState, action) {
        SSCallInProgress: false,
      };
    }
+    
    case SS_SEARCH_FAILED: {
      return {
        ...state,
--- a/yarn.lock
+++ b/yarn.lock
@@ -3668,17 +3668,17 @@
  dependencies:
    tslib "^2.4.0"

-"@tanstack/react-table@^8.1.1":
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.1.3.tgz#79d5c8a6f58350796a70fa66c30cfd25bf650d3a"
-  integrity sha512-rgGb4Sou8kuJI2NuJbDSS/wRc+TVmXZPg5+vslHZqA+tLvHvYgLHndBc6kW2fzCdInBshJEgHAnDXillYGYi+w==
+"@tanstack/react-table@^8.5.11":
+  version "8.5.11"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.5.11.tgz#544f551f15412087edfc2df01bed9697aab4651f"
+  integrity sha512-bIegBJ3VPUX3Z7rMnFEnTRCRgPccTsciilQA1ib/pA6M7Qq1boTNPjNjSbEHmBKytaxPrPfcUfzkZLogYtvu3g==
  dependencies:
-    "@tanstack/table-core" "8.1.2"
+    "@tanstack/table-core" "8.5.11"

-"@tanstack/table-core@8.1.2":
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.1.2.tgz#1e0e075a67082eb0f462771f049f6e418b71b089"
-  integrity sha512-h0e9xBC0BRVoQE8w5BVypjPc2x5+H1VcwQDLKdijoVgUpO2S0ixjY9ejZ3YAtPYkBZTukLm9+3wfF4CFUXwD/Q==
+"@tanstack/table-core@8.5.11":
+  version "8.5.11"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.5.11.tgz#a23178a097df4b0b64bdfa6f79e6d8933e97c7f7"
+  integrity sha512-ZN61ockLaIAiiPbZfMKT2S03nbWx28OHg/nAiDnNfmN4QmAMcdwVajPn2QQwnNVGAr4jS4nbhbYzCcjq8livXQ==

 "@teamsupercell/typings-for-css-modules-loader@^2.5.1":
  version "2.5.1"