🔧 Fixes for Wanted comics table

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(
-    () => [
-      {
-        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,

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({
-      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 */}
-      
+
     </>
   );
 };