🔧 Fixes for Wanted comics table

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",

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,

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",

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(
+
-    () => [
+  const columnData = [
-      {
+    {
-        Header: "Comic Information",
+      header: "Comic Information",
-        columns: [
+      columns: [
-          {
+        {
-            Header: "Details",
+          header: "Details",
-            id: "comicDetails",
+          id: "comicDetails",
-            minWidth: 350,
+          minWidth: 350,
-            accessor: "_source",
+          accessorFn: data => data,
-            Cell: ({ value }) => <MetadataPanel data={value} />,
+          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: "Type",
-        Header: "Download Status",
+          id: "Air",
-        columns: [
+        },
-          {
+        {
-            Header: "Files",
+          header: "Type",
-            accessor: "_source.acquisition.directconnect",
+          id: "dcc",
-            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",
-          },
-        ],
-      },
-    ],
-    [],
-  );
   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}
+                rowData={wantedComics}
-                totalPages={wantedComics.hits.total.value}
+                totalPages={wantedComics.length}
                 columns={columnData}
               // paginationHandlers={{
               //   nextPage: goToNextPage,

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,

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({
-    const table = useReactTable({
+    data: rowData,
-      data: rowData,
+    columns,
-      columns,
+    getCoreRowModel: getCoreRowModel(),
-      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.column.columnDef.header,
-                        header.getContext()
+                      header.getContext()
-                      )}
+                    )}
                 </th>
               ))}
             </tr>
@@ -51,11 +50,11 @@ export const T2Table = (tableOptions): ReactElement => {
                 key={row.id}
                 onClick={() => rowClickHandler(row)}
               >
-                 {row.getVisibleCells().map(cell => (
+                {row.getVisibleCells().map(cell => (
-                <td key={cell.id}>
+                  <td key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </td>
+                  </td>
-              ))}
+                ))}
               </tr>
             );
           })}
@@ -63,7 +62,7 @@ export const T2Table = (tableOptions): ReactElement => {
       </table>
 
       {/* pagination control */}
-      
+
     </>
   );
 };

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";

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,

yarn.lock

@@ -3668,17 +3668,17 @@
   dependencies:
     tslib "^2.4.0"
 
-"@tanstack/react-table@^8.1.1":
+"@tanstack/react-table@^8.5.11":
-  version "8.1.3"
+  version "8.5.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.1.3.tgz#79d5c8a6f58350796a70fa66c30cfd25bf650d3a"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.5.11.tgz#544f551f15412087edfc2df01bed9697aab4651f"
-  integrity sha512-rgGb4Sou8kuJI2NuJbDSS/wRc+TVmXZPg5+vslHZqA+tLvHvYgLHndBc6kW2fzCdInBshJEgHAnDXillYGYi+w==
+  integrity sha512-bIegBJ3VPUX3Z7rMnFEnTRCRgPccTsciilQA1ib/pA6M7Qq1boTNPjNjSbEHmBKytaxPrPfcUfzkZLogYtvu3g==
   dependencies:
-    "@tanstack/table-core" "8.1.2"
+    "@tanstack/table-core" "8.5.11"
 
-"@tanstack/table-core@8.1.2":
+"@tanstack/table-core@8.5.11":
-  version "8.1.2"
+  version "8.5.11"
-  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.1.2.tgz#1e0e075a67082eb0f462771f049f6e418b71b089"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.5.11.tgz#a23178a097df4b0b64bdfa6f79e6d8933e97c7f7"
-  integrity sha512-h0e9xBC0BRVoQE8w5BVypjPc2x5+H1VcwQDLKdijoVgUpO2S0ixjY9ejZ3YAtPYkBZTukLm9+3wfF4CFUXwD/Q==
+  integrity sha512-ZN61ockLaIAiiPbZfMKT2S03nbWx28OHg/nAiDnNfmN4QmAMcdwVajPn2QQwnNVGAr4jS4nbhbYzCcjq8livXQ==
 
 "@teamsupercell/typings-for-css-modules-loader@^2.5.1":
   version "2.5.1"