diff --git a/package.json b/package.json
index 0068d5d..d751ed2 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
"@types/socket.io": "^3.0.2",
"@types/socket.io-client": "^3.0.0",
"@types/through2": "^2.0.36",
- "airdcpp-apisocket": "^2.4.1",
+ "airdcpp-apisocket": "^2.4.2",
"antd": "^4.16.5",
"array-sort-by": "^1.2.1",
"babel-polyfill": "^6.26.0",
diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index ae18d8b..096cfa3 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -140,6 +140,7 @@ $border-color: red;
td {
border: 0 none;
.card {
+ margin: 8px 0 7px 0;
.name {
margin: 0 0 4px 0;
}
diff --git a/src/client/components/Library.tsx b/src/client/components/Library.tsx
index cb4eb96..1ecff78 100644
--- a/src/client/components/Library.tsx
+++ b/src/client/components/Library.tsx
@@ -1,35 +1,41 @@
import React, { useState, useEffect, useMemo, ReactElement } from "react";
+import PropTypes from 'prop-types';
import {
removeLeadingPeriod,
escapePoundSymbol,
} from "../shared/utils/formatting.utils";
-import { useTable } from "react-table";
+import { useTable, usePagination } from "react-table";
import prettyBytes from "pretty-bytes";
import ellipsize from "ellipsize";
import { useDispatch, useSelector } from "react-redux";
import { getComicBooks } from "../actions/fileops.actions";
+import { isNil } from "lodash";
interface IComicBookLibraryProps {
matches?: unknown;
}
export const Library = ({}: IComicBookLibraryProps): ReactElement => {
- const [page, setPage] = useState(1);
+ const [comicPage, setComicPage] = useState(1);
+ const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] =
+ useState(false);
const dispatch = useDispatch();
useEffect(() => {
dispatch(
getComicBooks({
paginationOptions: {
- page: 0,
+ page: comicPage,
limit: 15,
},
}),
);
- }, [page, dispatch]);
+ }, [comicPage, dispatch]);
const data = useSelector(
(state: RootState) => state.fileOps.recentComics.docs,
);
+ const togglePageSizeDropdown = () =>
+ collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
const columns = useMemo(
() => [
@@ -40,7 +46,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
Header: "File Details",
accessor: "rawFileDetails",
// eslint-disable-next-line react/display-name
- Cell: (props) => {
+ Cell(props) {
const encodedFilePath = encodeURI(
"http://localhost:3000" +
removeLeadingPeriod(props.cell.value.path),
@@ -81,20 +87,106 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
{
Header: "Import Status",
accessor: "importStatus.isImported",
- Cell: (props) =>
- `${props.cell.value.toString()}` ? (
+ Cell(props) {
+ return `${props.cell.value.toString()}` ? (
Imported
) : (
"Not Imported"
- ),
+ );
+ },
+ },
+ ],
+ },
+ {
+ Header: "ComicVine Metadata",
+ columns: [
+ {
+ Header: "Issue #",
+ accessor: "sourcedMetadata",
+ Cell(props) {
+ return (
+ !isNil(props.cell.value.comicvine) && (
+
{props.cell.value.comicvine.issue_number}
+ )
+ );
+ },
+ },
+
+ {
+ Header: "Publisher",
+ accessor: "sourcedMetadata.comicvine.volumeInformation.publisher",
+ Cell(props) {
+ return (
+ !isNil(props.cell.value) && {props.cell.value.name}
+ );
+ },
+ },
+
+ {
+ Header: "Type",
+ accessor: "sourcedMetadata.comicvine",
+ Cell(props) {
+ return (
+ !isNil(props.cell.value) && (
+
+ {props.cell.value.resource_type}
+
+ )
+ );
+ },
+ },
+
+ {
+ Header: "Volume",
+ accessor: "sourcedMetadata.comicvine.volumeInformation",
+ Cell(props) {
+ return (
+ !isNil(props.cell.value) && {props.cell.value.name}
+ );
+ },
+ },
+
+ {
+ Header: "Match Score",
+ accessor: "sourcedMetadata.comicvine.score",
+ Cell(props) {
+ return (
+ !isNil(props.cell.value) && (
+
+ {parseInt(props.cell.value, 10)}
+
+ )
+ );
+ },
},
],
},
],
[],
);
- const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
- useTable({ columns, data });
+
+ columns[0].columns[0].Cell.propTypes = {
+ value: PropTypes.object.isRequired,
+ };
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ page,
+ prepareRow,
+ pageOptions,
+ pageCount,
+ state: { pageIndex, pageSize },
+ gotoPage,
+ previousPage,
+ nextPage,
+ setPageSize,
+ canPreviousPage,
+ canNextPage,
+ } = useTable(
+ { columns, data, initialState: { pageIndex: 0 } },
+ usePagination,
+ );
const comicBookLibraryItems = React.useMemo(() => {});
@@ -121,14 +213,17 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
- {rows.map((row, idx) => {
+ {page.map((row, idx) => {
prepareRow(row);
return (
{row.cells.map((cell, idx) => {
- console.log(cell);
return (
- |
+ |
{cell.render("Cell")}
|
);
@@ -138,6 +233,102 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
})}
+
+
diff --git a/src/client/components/Search.tsx b/src/client/components/Search.tsx
index 4639e8b..af3fa46 100644
--- a/src/client/components/Search.tsx
+++ b/src/client/components/Search.tsx
@@ -59,9 +59,9 @@ export const Search = ({}: ISearchProps): ReactElement => {
onSubmit={() =>
getDCPPSearchResults({
query: {
- pattern: "Old Man Logan",
- // file_type: "any",
- // extensions: ["iso"],
+ pattern: "secret wars",
+ // file_type: "compressed",
+ extensions: ["cbz", "cbr"],
},
hub_urls: [
"nmdcs://piter.feardc.net:411",
diff --git a/src/client/services/api/SearchApi.ts b/src/client/services/api/SearchApi.ts
index 2c5fd41..e80d36f 100644
--- a/src/client/services/api/SearchApi.ts
+++ b/src/client/services/api/SearchApi.ts
@@ -13,35 +13,10 @@ interface SearchData {
priority: PriorityEnum;
}
-function sleep(ms) {
+function sleep(ms: number): Promise {
return new Promise((resolve) => setTimeout(resolve, ms));
}
-// foo.then(async (data) => {
-// const instance: SearchInstance = await SocketService.post("search");
-// await sleep(10000);
-
-// const searchInfo = await SocketService.post(
-// `search/${instance.id}/hub_search`,
-// {
-// query: {
-// pattern: "H.P. Lovecraft",
-// file_type: "compressed",
-// extensions: ["cbz", "cbr"],
-// },
-// hub_urls: [
-// "nmdcs://piter.feardc.net:411",
-// "dchub://dc.rutrack.net",
-// "dchub://dc.elitedc.ru",
-// ],
-// priority: 1,
-// },
-// );
-// await sleep(10000);
-// const results = await SocketService.get(`search/${instance.id}/results/0/5`);
-// console.log(results);
-// });
-
export const search = async (data: SearchData) => {
await SocketService.connect("admin", "password");
await sleep(10000);
@@ -52,7 +27,7 @@ export const search = async (data: SearchData) => {
);
await sleep(10000);
const results = await SocketService.get(`search/${instance.id}/results/0/5`);
- console.log("ASDASDASDASDASDASDA", results);
+ console.log("results", results);
SocketService.disconnect();
return results;
};