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

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) => {
+export const searchIssue = (query, options) => async (dispatch) => {
-  const foo = await axios({
+  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) => {

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 LibraryContainer from "./Library/LibraryContainer";
-import LibraryGrid from "./LibraryGrid";
+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

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) => {
+  const libraryQueueResults = useSelector(
-    return state.fileOps.isSocketConnected;
+    (state: RootState) => state.fileOps.librarySearchResultCount,
-  });
-  const importResults = useSelector(
-    (state: RootState) => state.fileOps.comicBookMetadata,
   );
-  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) ? (
+        <pre>{JSON.stringify(libraryQueueResults, null, 2)}</pre>
-          <>
-            <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>
-        )}
       </section>
     </div>
   );

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 RawFileDetails from "./RawFileDetails";
-import ComicVineDetails from "./Library/ComicVineDetails";
+import ComicVineDetails from "./ComicVineDetails";
-import SearchBar from "./Library/SearchBar";
+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)
+              !isEmpty(row._source.rawFileDetails.cover)
-                ? row.rawFileDetails
+                ? row._source.rawFileDetails
-                : row.sourcedMetadata,
+                : 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({
+      searchIssue(
-        paginationOptions: {
+        {
-          page: pageIndex,
+          query: {},
-          limit: pageSize,
         },
-      }),
+        {
+          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>
   );

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;

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 Card from "../Carda";
-import { detectIssueTypes } from "../shared/utils/tradepaperback.utils";
+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) => {

src/client/components/Library/SearchBar.tsx

@@ -10,11 +10,19 @@ export const SearchBar = (): ReactElement => {
   const handleSubmit = useCallback((e) => {
     console.log(e);
     dispatch(
-      searchIssue({
+      searchIssue(
-        queryObject: {
+        {
-          volumeName: e.search,
+          query: {
+            volumeName: e.search,
+          },
         },
-      }),
+        {
+          pagination: {
+            size: 25,
+            from: 0,
+          },
+        },
+      ),
     );
   }, []);
   return (

src/client/constants/action-types.ts

@@ -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
+// Library service generic action types
-export const RMQ_SOCKET_CONNECTED = "RMQ_SOCKET_CONNECTED";
+export const LS_IMPORT_CALL_IN_PROGRESS = "LS_IMPORT_CALL_IN_PROGRESS";
-export const RMQ_SOCKET_DISCONNECTED = "RMQ_SOCKET_DISCONNECTED";
-export const RMQ_SOCKET_ERROR = "RMQ_SOCKET_ERROR";
 
 // 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";

src/client/reducers/comicinfo.reducer.ts

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

src/client/reducers/fileops.reducer.ts

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