🔎 Wiring up the Library page for elasticsearch-powered, search
This commit is contained in:
383
src/client/components/Library/Library.tsx
Normal file
383
src/client/components/Library/Library.tsx
Normal file
@@ -0,0 +1,383 @@
|
||||
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 { isEmpty, isNil, isUndefined } from "lodash";
|
||||
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 {
|
||||
data: {
|
||||
searchResults: any;
|
||||
};
|
||||
}
|
||||
|
||||
export const Library = (data: IComicBookLibraryProps): ReactElement => {
|
||||
const { searchResults } = data.data;
|
||||
const pageTotal = searchResults.hits.total.value;
|
||||
const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] =
|
||||
useState(false);
|
||||
const togglePageSizeDropdown = () =>
|
||||
collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
|
||||
|
||||
// programatically navigate to comic detail
|
||||
const navigate = useNavigate();
|
||||
const navigateToComicDetail = (id) => {
|
||||
navigate(`/comic/details/${id}`);
|
||||
};
|
||||
|
||||
const ImportStatus = ({ value }) => {
|
||||
return value ? (
|
||||
<span className="tag is-info is-light">Imported</span>
|
||||
) : (
|
||||
"Not Imported"
|
||||
);
|
||||
};
|
||||
|
||||
console.log(searchResults);
|
||||
// return null;
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
Header: "Comic Metadata",
|
||||
columns: [
|
||||
{
|
||||
Header: "File Details",
|
||||
id: "fileDetails",
|
||||
accessor: (row) =>
|
||||
!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)) {
|
||||
return <RawFileDetails data={value} />;
|
||||
}
|
||||
// If CV metadata available, show it
|
||||
if (!isNil(value.comicvine)) {
|
||||
return <ComicVineDetails data={value} />;
|
||||
}
|
||||
return <div>null</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
Header: "Import Status",
|
||||
accessor: "_source.importStatus.isImported",
|
||||
Cell: ImportStatus,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
Header: "ComicVine Metadata",
|
||||
columns: [
|
||||
{
|
||||
Header: "Issue #",
|
||||
accessor: "_source.sourcedMetadata",
|
||||
Cell(props) {
|
||||
return (
|
||||
!isUndefined(props.cell.value) &&
|
||||
!isUndefined(props.cell.value.comicvine) && (
|
||||
<div>{props.cell.value.comicvine.issue_number}</div>
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
Header: "Publisher",
|
||||
accessor:
|
||||
"_source.sourcedMetadata.comicvine.volumeInformation.publisher",
|
||||
Cell(props) {
|
||||
return (
|
||||
!isNil(props.cell.value) && <h6>{props.cell.value.name}</h6>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
Header: "Type",
|
||||
accessor: "_source.sourcedMetadata.comicvine",
|
||||
Cell(props) {
|
||||
return (
|
||||
!isEmpty(props.cell.value) && (
|
||||
<span className="tag is-info is-light">
|
||||
{props.cell.value.resource_type}
|
||||
</span>
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
Header: "Volume",
|
||||
accessor: "_source.sourcedMetadata.comicvine.volumeInformation",
|
||||
Cell(props) {
|
||||
return (
|
||||
!isNil(props.cell.value) && <h6>{props.cell.value.name}</h6>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
Header: "Match Score",
|
||||
accessor: "_source.sourcedMetadata.comicvine.score",
|
||||
Cell(props) {
|
||||
return (
|
||||
!isNil(props.cell.value) && (
|
||||
<span className="tag is-success is-light">
|
||||
{parseInt(props.cell.value, 10)}
|
||||
</span>
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
ImportStatus.propTypes = {
|
||||
value: PropTypes.bool.isRequired,
|
||||
};
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
prepareRow,
|
||||
page,
|
||||
canPreviousPage,
|
||||
canNextPage,
|
||||
pageOptions,
|
||||
pageCount,
|
||||
gotoPage,
|
||||
nextPage,
|
||||
previousPage,
|
||||
setPageSize,
|
||||
state: { pageIndex, pageSize },
|
||||
} = useTable(
|
||||
{
|
||||
columns,
|
||||
data: searchResults.hits.hits,
|
||||
manualPagination: true,
|
||||
initialState: {
|
||||
pageIndex: 1,
|
||||
pageSize: 25,
|
||||
},
|
||||
pageCount: searchResults.hits.total.value,
|
||||
},
|
||||
usePagination,
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const goToNextPage = useCallback(() => {
|
||||
// incremement pageIndex
|
||||
nextPage();
|
||||
console.log(pageIndex);
|
||||
console.log("from", pageSize * pageIndex + 1);
|
||||
dispatch(
|
||||
searchIssue(
|
||||
{
|
||||
query: {},
|
||||
},
|
||||
{
|
||||
pagination: {
|
||||
size: pageSize,
|
||||
from: pageSize * pageIndex + 1,
|
||||
},
|
||||
},
|
||||
),
|
||||
);
|
||||
}, [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 (
|
||||
<section className="container">
|
||||
<div className="section">
|
||||
<h1 className="title">Library</h1>
|
||||
{/* Search bar */}
|
||||
<SearchBar />
|
||||
{!isUndefined(searchResults) && (
|
||||
<div>
|
||||
<div className="library">
|
||||
<table {...getTableProps()} className="table is-hoverable">
|
||||
<thead>
|
||||
{headerGroups.map((headerGroup, idx) => (
|
||||
<tr key={idx} {...headerGroup.getHeaderGroupProps()}>
|
||||
{headerGroup.headers.map((column, idx) => (
|
||||
<th key={idx} {...column.getHeaderProps()}>
|
||||
{column.render("Header")}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
|
||||
<tbody {...getTableBodyProps()}>
|
||||
{page.map((row, idx) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<tr
|
||||
key={idx}
|
||||
{...row.getRowProps()}
|
||||
onClick={() => navigateToComicDetail(row.original._id)}
|
||||
>
|
||||
{row.cells.map((cell, idx) => {
|
||||
return (
|
||||
<td
|
||||
key={idx}
|
||||
{...cell.getCellProps()}
|
||||
className="is-vcentered"
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* pagination controls */}
|
||||
<nav
|
||||
className="pagination"
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
>
|
||||
{/* x of total indicator */}
|
||||
<div>
|
||||
Page {pageIndex} of {Math.ceil(pageTotal / pageSize)}
|
||||
(Total resources: {pageTotal})
|
||||
</div>
|
||||
|
||||
{/* previous page and next page controls */}
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => goToPreviousPage()}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
Previous Page
|
||||
</button>
|
||||
</p>
|
||||
<p className="control">
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => goToNextPage()}
|
||||
disabled={!canNextPage}
|
||||
>
|
||||
<span>Next Page</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* first and last page controls */}
|
||||
<div className="field has-addons">
|
||||
<p className="control">
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => gotoPage(1)}
|
||||
disabled={!canPreviousPage}
|
||||
>
|
||||
<i className="fas fa-angle-double-left"></i>
|
||||
</button>
|
||||
</p>
|
||||
<p className="control">
|
||||
<button
|
||||
className="button"
|
||||
onClick={() => gotoPage(Math.ceil(pageTotal / pageSize))}
|
||||
disabled={!canNextPage}
|
||||
>
|
||||
<i className="fas fa-angle-double-right"></i>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* page selector */}
|
||||
<span>
|
||||
Go to page:
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
defaultValue={pageIndex}
|
||||
onChange={(e) => {
|
||||
const page = e.target.value ? Number(e.target.value) : 0;
|
||||
gotoPage(page);
|
||||
}}
|
||||
style={{ width: "100px" }}
|
||||
/>
|
||||
</span>
|
||||
|
||||
{/* page size selector */}
|
||||
<div
|
||||
className={
|
||||
"dropdown " +
|
||||
(isPageSizeDropdownCollapsed ? "is-active" : "")
|
||||
}
|
||||
onBlur={() => togglePageSizeDropdown()}
|
||||
>
|
||||
<div className="dropdown-trigger">
|
||||
<button
|
||||
className="button"
|
||||
aria-haspopup="true"
|
||||
aria-controls="dropdown-menu"
|
||||
onClick={() => togglePageSizeDropdown()}
|
||||
>
|
||||
<span>Select Page Size</span>
|
||||
<span className="icon is-small">
|
||||
<i className="fas fa-angle-down" aria-hidden="true"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="dropdown-menu" id="dropdown-menu" role="menu">
|
||||
<div className="dropdown-content">
|
||||
{[10, 20, 30, 40, 50].map((pageSize) => (
|
||||
<a href="#" className="dropdown-item" key={pageSize}>
|
||||
Show {pageSize}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Library;
|
||||
36
src/client/components/Library/LibraryContainer.tsx
Normal file
36
src/client/components/Library/LibraryContainer.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { isEmpty } from "lodash";
|
||||
import React, { ReactElement, useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { searchIssue } from "../../actions/fileops.actions";
|
||||
import { Library } from "./Library";
|
||||
|
||||
const LibraryContainer = () => {
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(
|
||||
searchIssue(
|
||||
{
|
||||
query: {},
|
||||
},
|
||||
{
|
||||
pagination: {
|
||||
size: 25,
|
||||
from: 0,
|
||||
},
|
||||
},
|
||||
),
|
||||
);
|
||||
}, []);
|
||||
|
||||
const searchResults = useSelector(
|
||||
(state: RootState) => state.fileOps.librarySearchResults,
|
||||
);
|
||||
|
||||
return !isEmpty(searchResults) ? (
|
||||
<Library data={{ searchResults }} />
|
||||
) : (
|
||||
"asdasd"
|
||||
);
|
||||
};
|
||||
|
||||
export default LibraryContainer;
|
||||
109
src/client/components/Library/LibraryGrid.tsx
Normal file
109
src/client/components/Library/LibraryGrid.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import React, { useState, useEffect, useMemo, ReactElement } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useNavigate } from "react-router";
|
||||
import {
|
||||
removeLeadingPeriod,
|
||||
escapePoundSymbol,
|
||||
} from "../../shared/utils/formatting.utils";
|
||||
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, isEmpty, isUndefined } from "lodash";
|
||||
import Masonry from "react-masonry-css";
|
||||
import Card from "../Carda";
|
||||
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
|
||||
import { Link } from "react-router-dom";
|
||||
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
|
||||
|
||||
interface ILibraryGridProps {}
|
||||
export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
|
||||
const data = useSelector(
|
||||
(state: RootState) => state.fileOps.recentComics.docs,
|
||||
);
|
||||
const pageTotal = useSelector(
|
||||
(state: RootState) => state.fileOps.recentComics.totalDocs,
|
||||
);
|
||||
const breakpointColumnsObj = {
|
||||
default: 5,
|
||||
1100: 4,
|
||||
700: 3,
|
||||
500: 1,
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="section">
|
||||
<h1 className="title">Library</h1>
|
||||
|
||||
<Masonry
|
||||
breakpointCols={breakpointColumnsObj}
|
||||
className="my-masonry-grid"
|
||||
columnClassName="my-masonry-grid_column"
|
||||
>
|
||||
{data.map(({ _id, rawFileDetails, sourcedMetadata }) => {
|
||||
let imagePath = "";
|
||||
let comicName = "";
|
||||
if (!isEmpty(rawFileDetails.cover)) {
|
||||
const encodedFilePath = encodeURI(
|
||||
`${LIBRARY_SERVICE_HOST}/${removeLeadingPeriod(
|
||||
rawFileDetails.cover.filePath,
|
||||
)}`,
|
||||
);
|
||||
imagePath = escapePoundSymbol(encodedFilePath);
|
||||
comicName = rawFileDetails.name;
|
||||
} else if (!isNil(sourcedMetadata)) {
|
||||
imagePath = sourcedMetadata.comicvine.image.small_url;
|
||||
comicName = sourcedMetadata.comicvine.name;
|
||||
}
|
||||
const titleElement = (
|
||||
<Link to={"/comic/details/" + _id}>
|
||||
{ellipsize(comicName, 18)}
|
||||
</Link>
|
||||
);
|
||||
return (
|
||||
<Card
|
||||
key={_id}
|
||||
orientation={"vertical"}
|
||||
imageUrl={imagePath}
|
||||
hasDetails
|
||||
title={comicName ? titleElement : null}
|
||||
>
|
||||
<div className="content is-flex is-flex-direction-row">
|
||||
{!isEmpty(sourcedMetadata.comicvine) && (
|
||||
<span className="icon cv-icon is-small">
|
||||
<img src="/dist/img/cvlogo.svg" />
|
||||
</span>
|
||||
)}
|
||||
{isNil(rawFileDetails) && (
|
||||
<span className="icon has-text-info">
|
||||
<i className="fas fa-adjust" />
|
||||
</span>
|
||||
)}
|
||||
{!isUndefined(sourcedMetadata.comicvine.volumeInformation) &&
|
||||
!isEmpty(
|
||||
detectIssueTypes(
|
||||
sourcedMetadata.comicvine.volumeInformation.description,
|
||||
),
|
||||
) ? (
|
||||
<span className="tag is-warning ml-1">
|
||||
{
|
||||
detectIssueTypes(
|
||||
sourcedMetadata.comicvine.volumeInformation
|
||||
.description,
|
||||
).displayName
|
||||
}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</Masonry>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LibraryGrid;
|
||||
@@ -10,11 +10,19 @@ export const SearchBar = (): ReactElement => {
|
||||
const handleSubmit = useCallback((e) => {
|
||||
console.log(e);
|
||||
dispatch(
|
||||
searchIssue({
|
||||
queryObject: {
|
||||
volumeName: e.search,
|
||||
searchIssue(
|
||||
{
|
||||
query: {
|
||||
volumeName: e.search,
|
||||
},
|
||||
},
|
||||
}),
|
||||
{
|
||||
pagination: {
|
||||
size: 25,
|
||||
from: 0,
|
||||
},
|
||||
},
|
||||
),
|
||||
);
|
||||
}, []);
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user