diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index fac33ec..596f3a5 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -24,7 +24,10 @@ import { IMG_ANALYSIS_DATA_FETCH_SUCCESS, IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS, IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_CALL_IN_PROGRESS, + SS_SEARCH_RESULTS_FETCHED, + SS_SEARCH_IN_PROGRESS, FILEOPS_STATE_RESET, + LS_IMPORT_CALL_IN_PROGRESS, } from "../constants/action-types"; import { success } from "react-notification-system-redux"; import { isNil, map } from "lodash"; @@ -65,6 +68,9 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => { page: 1, }, }; + dispatch({ + type: LS_IMPORT_CALL_IN_PROGRESS, + }); // dispatch( // success({ @@ -265,13 +271,20 @@ export const extractComicArchive = }); }; -export const searchIssue = (query) => async (dispatch) => { - const foo = await axios({ +export const searchIssue = (query, options) => async (dispatch) => { + dispatch({ + type: SS_SEARCH_IN_PROGRESS, + }); + + const response = await axios({ url: `${SEARCH_SERVICE_BASE_URI}/searchIssue`, method: "POST", - data: query, + data: { ...query, ...options }, + }); + dispatch({ + type: SS_SEARCH_RESULTS_FETCHED, + data: response.data.body, }); - console.log(foo); }; export const analyzeImage = (imageFilePath: string | Buffer) => async (dispatch) => { diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx index 8ae47ab..db6a33a 100644 --- a/src/client/components/App.tsx +++ b/src/client/components/App.tsx @@ -4,8 +4,8 @@ import Dashboard from "./Dashboard/Dashboard"; import Import from "./Import"; import { ComicDetail } from "./ComicDetail"; -import Library from "./Library"; -import LibraryGrid from "./LibraryGrid"; +import LibraryContainer from "./Library/LibraryContainer"; +import LibraryGrid from "./Library/LibraryGrid"; import Search from "./Search"; import Settings from "./Settings"; import VolumeDetail from "./VolumeDetail/VolumeDetail"; @@ -77,7 +77,7 @@ export const App = (): ReactElement => { } /> } /> - } /> + } /> } /> } /> { const dispatch = useDispatch(); - const isSocketConnected = useSelector((state: RootState) => { - return state.fileOps.isSocketConnected; - }); - const importResults = useSelector( - (state: RootState) => state.fileOps.comicBookMetadata, + const libraryQueueResults = useSelector( + (state: RootState) => state.fileOps.librarySearchResultCount, ); - const IMSCallInProgress = useSelector( + const libraryQueueImportStatus = useSelector( (state: RootState) => state.fileOps.IMSCallInProgress, ); const initiateImport = useCallback(() => { @@ -42,21 +39,11 @@ export const Import = (props: IProps): ReactElement => { dispatch(fetchComicBookMetadata(props.path)); } }, [dispatch]); - const cache = createCache(); - const renderRow = ({ index, style }) => ( -
  • - {importResults[index].comicBookCoverMetadata.name} -
    - {importResults[index].comicBookCoverMetadata.path} -
    -
  • - ); return (

    Import

    - {isSocketConnected}

    @@ -76,7 +63,14 @@ export const Import = (props: IProps): ReactElement => {

    -

    - {!isEmpty(importResults) ? ( - <> -

    Import Results

    -
    -
      - - {renderRow} - -
    - - ) : ( -
    -
    - -
    -
    - )} +
    {JSON.stringify(libraryQueueResults, null, 2)}
    ); diff --git a/src/client/components/Library.tsx b/src/client/components/Library/Library.tsx similarity index 80% rename from src/client/components/Library.tsx rename to src/client/components/Library/Library.tsx index 360b974..b40101d 100644 --- a/src/client/components/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -1,28 +1,31 @@ -import React, { useState, useEffect, useMemo, ReactElement } from "react"; +import React, { + useState, + useEffect, + useMemo, + ReactElement, + useCallback, +} from "react"; import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; import { useTable, usePagination } from "react-table"; -import { useDispatch, useSelector } from "react-redux"; -import { getComicBooks } from "../actions/fileops.actions"; import { isEmpty, isNil, isUndefined } from "lodash"; -import RawFileDetails from "./Library/RawFileDetails"; -import ComicVineDetails from "./Library/ComicVineDetails"; -import SearchBar from "./Library/SearchBar"; +import RawFileDetails from "./RawFileDetails"; +import ComicVineDetails from "./ComicVineDetails"; +import SearchBar from "./SearchBar"; +import { useDispatch } from "react-redux"; +import { searchIssue } from "../../actions/fileops.actions"; interface IComicBookLibraryProps { - matches?: unknown; + data: { + searchResults: any; + }; } -export const Library = ({}: IComicBookLibraryProps): ReactElement => { +export const Library = (data: IComicBookLibraryProps): ReactElement => { + const { searchResults } = data.data; + const pageTotal = searchResults.hits.total.value; const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] = useState(false); - - const data = useSelector( - (state: RootState) => state.fileOps.recentComics.docs, - ); - const pageTotal = useSelector( - (state: RootState) => state.fileOps.recentComics.totalDocs, - ); const togglePageSizeDropdown = () => collapsePageSizeDropdown(!isPageSizeDropdownCollapsed); @@ -40,6 +43,8 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { ); }; + console.log(searchResults); + // return null; const columns = useMemo( () => [ { @@ -49,9 +54,9 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { Header: "File Details", id: "fileDetails", accessor: (row) => - !isEmpty(row.rawFileDetails.cover) - ? row.rawFileDetails - : row.sourcedMetadata, + !isEmpty(row._source.rawFileDetails.cover) + ? row._source.rawFileDetails + : row._source.sourcedMetadata, Cell: ({ value }) => { // If no CV info available, use raw file metadata if (!isNil(value.cover)) { @@ -66,7 +71,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { }, { Header: "Import Status", - accessor: "importStatus.isImported", + accessor: "_source.importStatus.isImported", Cell: ImportStatus, }, ], @@ -76,7 +81,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { columns: [ { Header: "Issue #", - accessor: "sourcedMetadata", + accessor: "_source.sourcedMetadata", Cell(props) { return ( !isUndefined(props.cell.value) && @@ -89,7 +94,8 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { { Header: "Publisher", - accessor: "sourcedMetadata.comicvine.volumeInformation.publisher", + accessor: + "_source.sourcedMetadata.comicvine.volumeInformation.publisher", Cell(props) { return ( !isNil(props.cell.value) &&
    {props.cell.value.name}
    @@ -99,7 +105,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { { Header: "Type", - accessor: "sourcedMetadata.comicvine", + accessor: "_source.sourcedMetadata.comicvine", Cell(props) { return ( !isEmpty(props.cell.value) && ( @@ -113,7 +119,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { { Header: "Volume", - accessor: "sourcedMetadata.comicvine.volumeInformation", + accessor: "_source.sourcedMetadata.comicvine.volumeInformation", Cell(props) { return ( !isNil(props.cell.value) &&
    {props.cell.value.name}
    @@ -123,7 +129,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { { Header: "Match Score", - accessor: "sourcedMetadata.comicvine.score", + accessor: "_source.sourcedMetadata.comicvine.score", Cell(props) { return ( !isNil(props.cell.value) && ( @@ -143,7 +149,6 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { ImportStatus.propTypes = { value: PropTypes.bool.isRequired, }; - const { getTableProps, getTableBodyProps, @@ -162,28 +167,59 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => { } = useTable( { columns, - data, + data: searchResults.hits.hits, manualPagination: true, initialState: { pageIndex: 1, - pageSize: 15, + pageSize: 25, }, - pageCount: pageTotal, + pageCount: searchResults.hits.total.value, }, usePagination, ); - const dispatch = useDispatch(); - useEffect(() => { + const goToNextPage = useCallback(() => { + // incremement pageIndex + nextPage(); + console.log(pageIndex); + console.log("from", pageSize * pageIndex + 1); dispatch( - getComicBooks({ - paginationOptions: { - page: pageIndex, - limit: pageSize, + searchIssue( + { + query: {}, }, - }), + { + pagination: { + size: pageSize, + from: pageSize * pageIndex + 1, + }, + }, + ), ); - }, [pageIndex, pageSize]); + }, [pageIndex]); + + const goToPreviousPage = useCallback(() => { + previousPage(); + let from = 0; + if (pageIndex === 2) { + from = (pageIndex - 1) * pageSize + 2 - 27; + } else { + from = (pageIndex - 1) * pageSize + 2 - 26; + } + dispatch( + searchIssue( + { + query: {}, + }, + { + pagination: { + size: pageSize, + from, + }, + }, + ), + ); + }, [pageIndex]); return (
    @@ -191,7 +227,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {

    Library

    {/* Search bar */} - {!isUndefined(data) ? ( + {!isUndefined(searchResults) && (
    @@ -250,7 +286,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {