frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🔎 Wiring up the Library page for elasticsearch-powered, search

Browse Source
This commit is contained in:
Rishi Ghan
2022-03-07 03:05:15 -08:00
parent a7a536c647
commit bb3e01ca24
10 changed files with 194 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/client/actions/fileops.actions.tsx
View File

@@ -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) => {

6
src/client/components/App.tsx
View File

@@ -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 => {
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/import" element={<Import path={"./comics"} />} />
<Route path="/library" element={<Library />} />
<Route path="/library" element={<LibraryContainer />} />
<Route path="/library-grid" element={<LibraryGrid />} />
<Route path="/search" element={<Search />} />
<Route

59
src/client/components/Import.tsx
View File

@@ -28,13 +28,10 @@ interface IProps {
export const Import = (props: IProps): 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 }) => (
<li className="is-size-7" style={style}>
<strong>{importResults[index].comicBookCoverMetadata.name} </strong>
<br />
{importResults[index].comicBookCoverMetadata.path}
<hr />
</li>
);
return (
<div className="container">
<section className="section is-small">
<h1 className="title">Import</h1>
{isSocketConnected}
<article className="message is-dark">
<div className="message-body">
<p className="mb-2">
@@ -76,7 +63,14 @@ export const Import = (props: IProps): ReactElement => {
</div>
</article>
<p className="buttons">
<button className="button is-medium" onClick={initiateImport}>
<button
className={
libraryQueueImportStatus
? "button is-loading is-medium"
: "button is-medium"
}
onClick={initiateImport}
>
<span className="icon">
<i className="fas fa-file-import"></i>
</span>
@@ -91,36 +85,7 @@ export const Import = (props: IProps): ReactElement => {
</button>
</p>
{!isEmpty(importResults) ? (
<>
<h3>Import Results</h3>
<hr />
<ul>
<DynamicList
data={importResults}
cache={cache}
height={800}
width={"100%"}
lazyMeasurement={false}
>
{renderRow}
</DynamicList>
</ul>
</>
) : (
<div className="progress-indicator-container">
<div className="indicator">
<Loader
type="MutatingDots"
color="#CCC"
secondaryColor="#999"
height={100}
width={100}
visible={IMSCallInProgress}
/>
</div>
</div>
)}
<pre>{JSON.stringify(libraryQueueResults, null, 2)}</pre>
</section>
</div>
);

116
src/client/components/Library.tsx → src/client/components/Library/Library.tsx
View File

@@ -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) && <h6>{props.cell.value.name}</h6>
@@ -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) && <h6>{props.cell.value.name}</h6>
@@ -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 (
<section className="container">
@@ -191,7 +227,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
<h1 className="title">Library</h1>
{/* Search bar */}
<SearchBar />
{!isUndefined(data) ? (
{!isUndefined(searchResults) && (
<div>
<div className="library">
<table {...getTableProps()} className="table is-hoverable">
@@ -250,7 +286,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
<p className="control">
<button
className="button"
onClick={() => previousPage()}
onClick={() => goToPreviousPage()}
disabled={!canPreviousPage}
>
Previous Page
@@ -259,7 +295,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
<p className="control">
<button
className="button"
onClick={() => nextPage()}
onClick={() => goToNextPage()}
disabled={!canNextPage}
>
<span>Next Page</span>
@@ -338,7 +374,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
</nav>
</div>
</div>
) : null}
)}
</div>
</section>
);

36
src/client/components/Library/LibraryContainer.tsx Normal file
View 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;

10
src/client/components/LibraryGrid.tsx → src/client/components/Library/LibraryGrid.tsx
View File

@@ -4,18 +4,18 @@ import { useNavigate } from "react-router";
import {
removeLeadingPeriod,
escapePoundSymbol,
} from "../shared/utils/formatting.utils";
} 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 { 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 Card from "../Carda";
import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
import { Link } from "react-router-dom";
import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
interface ILibraryGridProps {}
export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {

16
src/client/components/Library/SearchBar.tsx
View File

@@ -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 (

11
src/client/constants/action-types.ts
View File

@@ -10,10 +10,8 @@ export const IMS_COMICBOOK_METADATA_FETCHED = "IMS_SOCKET_DATA_FETCHED";
export const IMS_RAW_IMPORT_SUCCESSFUL = "IMS_RAW_IMPORT_SUCCESSFUL";
export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
// rabbitmq
export const RMQ_SOCKET_CONNECTED = "RMQ_SOCKET_CONNECTED";
export const RMQ_SOCKET_DISCONNECTED = "RMQ_SOCKET_DISCONNECTED";
export const RMQ_SOCKET_ERROR = "RMQ_SOCKET_ERROR";
// Library service generic action types
export const LS_IMPORT_CALL_IN_PROGRESS = "LS_IMPORT_CALL_IN_PROGRESS";
// ComicVine Metadata
export const IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS =
@@ -51,6 +49,11 @@ export const IMS_COMIC_BOOK_GROUPS_CALL_IN_PROGRESS =
export const IMS_COMIC_BOOK_GROUPS_CALL_FAILED =
"IMS_COMIC_BOOK_GROUPS_CALL_FAILED";
// search results from the Search service
export const SS_SEARCH_RESULTS_FETCHED = "SS_SEARCH_RESULTS_FETCHED";
export const SS_SEARCH_IN_PROGRESS = "SS_SEARCH_IN_PROGRESS";
export const SS_SEARCH_FAILED = "SS_SEARCH_FAILED";
// issues for a given volume
export const CV_ISSUES_METADATA_CALL_IN_PROGRESS =
"CV_ISSUES_METADATA_CALL_IN_PROGRESS";

2
src/client/reducers/comicinfo.reducer.ts
View File

@@ -84,7 +84,7 @@ function comicinfoReducer(state = initialState, action) {
const updatedState = [...state.issuesForVolume];
action.matches.map((match) => {
updatedState.map((issue, idx) => {
let matches = [];
const matches = [];
if (!isEmpty(match.hits.hits)) {
return match.hits.hits.map((hit) => {
if (

29
src/client/reducers/fileops.reducer.ts
View File

@@ -1,6 +1,5 @@
import { LOCATION_CHANGE } from "redux-first-history";
import {
RMQ_SOCKET_CONNECTED,
IMS_COMICBOOK_METADATA_FETCHED,
IMS_RAW_IMPORT_SUCCESSFUL,
IMS_RAW_IMPORT_FAILED,
@@ -19,11 +18,15 @@ import {
LS_COMIC_ADDED,
IMG_ANALYSIS_CALL_IN_PROGRESS,
IMG_ANALYSIS_DATA_FETCH_SUCCESS,
SS_SEARCH_RESULTS_FETCHED,
SS_SEARCH_IN_PROGRESS,
FILEOPS_STATE_RESET,
LS_IMPORT_CALL_IN_PROGRESS,
} from "../constants/action-types";
const initialState = {
IMSCallInProgress: false,
IMGCallInProgress: false,
SSCallInProgress: false,
imageAnalysisResults: {},
comicBookExtractionInProgress: false,
comicBookMetadata: [],
@@ -35,6 +38,8 @@ const initialState = {
extractedComicBookArchive: [],
recentComics: [],
wantedComics: [],
librarySearchResultCount: 0,
libraryQueueResults: [],
};
function fileOpsReducer(state = initialState, action) {
@@ -46,13 +51,12 @@ function fileOpsReducer(state = initialState, action) {
IMSCallInProgress: false,
};
case RMQ_SOCKET_CONNECTED:
case LS_IMPORT_CALL_IN_PROGRESS: {
return {
...state,
isSocketConnected: action.isSocketConnected,
socketId: action.socketId,
IMSCallInProgress: true,
};
}
case IMS_RAW_IMPORT_SUCCESSFUL:
return {
...state,
@@ -140,6 +144,7 @@ function fileOpsReducer(state = initialState, action) {
console.log("BASH", action);
return {
...state,
librarySearchResultCount: state.librarySearchResultCount + 1,
};
}
case LS_COMIC_ADDED: {
@@ -161,6 +166,22 @@ function fileOpsReducer(state = initialState, action) {
};
}
case SS_SEARCH_IN_PROGRESS: {
return {
...state,
SSCallInProgress: true,
};
}
case SS_SEARCH_RESULTS_FETCHED: {
console.log(action.data);
return {
...state,
librarySearchResults: action.data,
SSCallInProgress: false,
};
}
case FILEOPS_STATE_RESET: {
return {
...state,