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

2022-03-07 03:05:15 -08:00
parent a7a536c647
commit bb3e01ca24
10 changed files with 194 additions and 112 deletions
--- 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 => {
        <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
--- a/src/client/components/Import.tsx
+++ b/src/client/components/Import.tsx
@@ -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>
  );
--- a/src/client/components/Library/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) && <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>
  );
--- a/src/client/components/Library/LibraryContainer.tsx
+++ b/src/client/components/Library/LibraryContainer.tsx
@@ -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;
--- a/src/client/components/Library/LibraryGrid.tsx
+++ b/src/client/components/Library/LibraryGrid.tsx
@@ -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) => {
--- a/src/client/components/Library/SearchBar.tsx
+++ b/src/client/components/Library/SearchBar.tsx
@@ -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 (