From d92b2246cbf742132a98091cd8e8360cec3c52ef Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Mon, 16 Aug 2021 13:44:03 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=93=20Library=20table=20styling=20WIP?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/client/assets/scss/App.scss | 1 + src/client/components/Library.tsx | 217 +++++++++++++++++++++++++-- src/client/components/Search.tsx | 6 +- src/client/services/api/SearchApi.ts | 29 +--- 5 files changed, 211 insertions(+), 44 deletions(-) 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; };