🔧 Renamed IMPORT_* to LIBRARY_*

src/client/actions/airdcpp.actions.tsx

@@ -5,7 +5,7 @@ import {
   PriorityEnum,
   SearchResponse,
 } from "threetwo-ui-typings";
-import { IMPORT_SERVICE_BASE_URI } from "../constants/endpoints";
+import { LIBRARY_SERVICE_BASE_URI } from "../constants/endpoints";
 import {
   AIRDCPP_SEARCH_RESULTS_ADDED,
   AIRDCPP_SEARCH_RESULTS_UPDATED,
@@ -147,7 +147,7 @@ export const downloadAirDCPPItem =
       if (!isNil(downloadResult)) {
         bundleDBImportResult = await axios({
           method: "POST",
-          url: `${IMPORT_SERVICE_BASE_URI}/applyAirDCPPDownloadMetadata`,
+          url: `${LIBRARY_SERVICE_BASE_URI}/applyAirDCPPDownloadMetadata`,
           headers: {
             "Content-Type": "application/json; charset=utf-8",
           },
@@ -214,7 +214,7 @@ export const getBundlesForComic =
       }
       const comicObject = await axios({
         method: "POST",
-        url: `${IMPORT_SERVICE_BASE_URI}/getComicBookById`,
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
         headers: {
           "Content-Type": "application/json; charset=utf-8",
         },

src/client/actions/comicinfo.actions.tsx

@@ -17,7 +17,7 @@ import {
 } from "../constants/action-types";
 import {
   COMICBOOKINFO_SERVICE_URI,
-  IMPORT_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
 const http = rateLimiter(axios.create(), {
@@ -75,7 +75,7 @@ export const findIssuesForSeriesInLibrary =
     });
 
     await axios({
-      url: `${IMPORT_SERVICE_BASE_URI}/findIssuesForSeriesInLibrary`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/findIssuesForSeriesInLibrary`,
       method: "POST",
       params: {
         comicObjectID,
@@ -90,7 +90,7 @@ export const getComicBookDetailById =
       IMS_inProgress: true,
     });
     const result = await axios.request({
-      url: `${IMPORT_SERVICE_BASE_URI}/getComicBookById`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
       method: "POST",
       data: {
         id: comicBookObjectId,
@@ -110,7 +110,7 @@ export const getComicBooksDetailsByIds =
       IMS_inProgress: true,
     });
     const result = await axios.request({
-      url: `${IMPORT_SERVICE_BASE_URI}/getComicBooksByIds`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooksByIds`,
       method: "POST",
       data: {
         ids: comicBookObjectIds,
@@ -129,7 +129,7 @@ export const applyComicVineMatch =
       IMS_inProgress: true,
     });
     const result = await axios.request({
-      url: `${IMPORT_SERVICE_BASE_URI}/applyComicVineMetadata`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/applyComicVineMetadata`,
       method: "POST",
       data: {
         match,
@@ -151,7 +151,7 @@ export const extractComicArchive =
     });
     const extractedComicBookArchive = await axios({
       method: "POST",
-      url: `${IMPORT_SERVICE_BASE_URI}/unrarArchive`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/unrarArchive`,
       headers: {
         "Content-Type": "application/json; charset=utf-8",
       },
@@ -164,7 +164,7 @@ export const extractComicArchive =
       const foo = page.path.split("/");
       const folderName = foo[foo.length - 1];
       const imagePath = encodeURI(
-        `${IMPORT_SERVICE_BASE_URI}/userdata/expanded/` +
+        `${LIBRARY_SERVICE_BASE_URI}/userdata/expanded/` +
           folderName +
           `/` +
           page.name +

src/client/actions/fileops.actions.tsx

@@ -2,7 +2,7 @@ import axios from "axios";
 import { IFolderData } from "threetwo-ui-typings";
 import {
   COMICBOOKINFO_SERVICE_URI,
-  IMPORT_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 import {
   IMS_COMIC_BOOK_GROUPS_FETCHED,
@@ -23,7 +23,7 @@ import { isNil } from "lodash";
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
     .request<Array<IFolderData>>({
-      url: `${IMPORT_SERVICE_BASE_URI}/walkFolders`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/walkFolders`,
       method: "POST",
       data: {
         basePathToWalk: path,
@@ -78,7 +78,7 @@ export const getComicBooks = (options) => async (dispatch) => {
   const { paginationOptions } = options;
   return axios
     .request({
-      url: `${IMPORT_SERVICE_BASE_URI}/getComicBooks`,
+      url: `${LIBRARY_SERVICE_BASE_URI}/getComicBooks`,
       method: "POST",
       data: {
         paginationOptions,
@@ -109,7 +109,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
     });
     return axios
       .request({
-        url: `${IMPORT_SERVICE_BASE_URI}/rawImportToDb`,
+        url: `${LIBRARY_SERVICE_BASE_URI}/rawImportToDb`,
         method: "POST",
         data: comicBookMetadata,
         transformResponse: (r: string) => JSON.parse(r),
@@ -135,7 +135,7 @@ export const fetchVolumeGroups = () => (dispatch) => {
     });
     axios
       .request({
-        url: `${IMPORT_SERVICE_BASE_URI}/getComicBookGroups`,
+        url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookGroups`,
         method: "GET",
       })
       .then((data) => {

src/client/actions/settings.actions.tsx

@@ -6,7 +6,7 @@ import {
   SETTINGS_DB_FLUSH_SUCCESS,
 } from "../constants/action-types";
 import {
-  IMPORT_SERVICE_BASE_URI,
+  LIBRARY_SERVICE_BASE_URI,
   SETTINGS_SERVICE_BASE_URI,
 } from "../constants/endpoints";
 
@@ -58,7 +58,7 @@ export const flushDb = () => async (dispatch) => {
   });
 
   const flushDbResult = await axios({
-    url: `${IMPORT_SERVICE_BASE_URI}/flushDb`,
+    url: `${LIBRARY_SERVICE_BASE_URI}/flushDb`,
     method: "POST",
   });
 

src/client/assets/scss/App.scss

@@ -6,7 +6,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 $bg-color: yellow;
 $border-color: red;
 
-$volume-color: #f2f1f9;
+$volume-color: #fdecd1;
+$issue-color: #f2f1f9;
 $size-8: 0.9rem;
 
 .is-size-8 {
@@ -131,7 +132,7 @@ $size-8: 0.9rem;
   box-shadow: 1px 8px 23px 7px rgba(0, 0, 0, 0.12);
 
   .green-border {
-    border:2px dotted #168B64;
+    border: 1px dotted #168b64;
     border-radius: 0.3rem;
   }
 
@@ -358,7 +359,7 @@ $size-8: 0.9rem;
     // margin-left: -30px; /* gutter size offset */
     width: auto;
     .issues-column {
-      max-width:102px;
+      max-width: 102px;
       margin: 10px;
       background-clip: padding-box;
       & > div {
@@ -366,13 +367,27 @@ $size-8: 0.9rem;
         margin-bottom: 20px;
       }
     }
-    
   }
 }
 // Potential issue matches in library slideout panel
 .potential-matches-container {
-  .generic-card {
+  .potential-issue-match {
+    border-radius: 0.3rem;
+    background-color: $issue-color;
+    padding: 10px;
+    pre {
+      padding: 5px;
+      background-color: transparent;
+      border-radius: 0.3rem;
+      white-space: pre-wrap; /* Since CSS 2.1 */
+      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+      white-space: -pre-wrap; /* Opera 4-6 */
+      white-space: -o-pre-wrap; /* Opera 7 */
+      word-wrap: break-word;
+    }
+    .generic-card {
       max-width: 90px;
+    }
   }
 }
 

src/client/components/Card.tsx

@@ -6,7 +6,7 @@ import {
 } from "../shared/utils/formatting.utils";
 import { isUndefined, isEmpty, isNil } from "lodash";
 import { Link } from "react-router-dom";
-import { IMPORT_SERVICE_HOST } from "../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
 import ellipsize from "ellipsize";
 
 interface IProps {
@@ -27,7 +27,7 @@ class Card extends React.Component<IProps, IState> {
     metadata: IExtractedComicBookCoverFile,
   ): JSX.Element => {
     const encodedFilePath = encodeURI(
-      `${IMPORT_SERVICE_HOST}` + removeLeadingPeriod(metadata.path),
+      `${LIBRARY_SERVICE_HOST}` + removeLeadingPeriod(metadata.path),
     );
     const filePath = escapePoundSymbol(encodedFilePath);
     return (

src/client/components/ComicDetail.tsx

@@ -24,7 +24,7 @@ import SlidingPane from "react-sliding-pane";
 
 import { escapePoundSymbol } from "../shared/utils/formatting.utils";
 
-import { IMPORT_SERVICE_HOST } from "../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
 import { getSettings } from "../actions/settings.actions";
 import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
 import AirDCPPSocket from "../services/DcppSearchService";
@@ -210,7 +210,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   let comicBookTitle = "";
   if (!isNil(comicBookDetailData.rawFileDetails)) {
     const encodedFilePath = encodeURI(
-      `${IMPORT_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`,
+      `${LIBRARY_SERVICE_HOST}/${comicBookDetailData.rawFileDetails.cover.filePath}`,
     );
     imagePath = escapePoundSymbol(encodedFilePath);
     comicBookTitle = comicBookDetailData.rawFileDetails.name;

src/client/components/Dashboard.tsx

@@ -32,7 +32,15 @@ export const Dashboard = (): ReactElement => {
 
         {!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
           <>
+            <div className="columns">
+              <div className="column is-half card">
+                <div className="card-content">
+                  <h1 className="is-size-5">13,476 Books</h1>
+                </div>
+              </div>
+            </div>
             <RecentlyImported comicBookCovers={recentComics} />
+
             {!isNil(volumeGroups) ? <VolumeGroups /> : null}
           </>
         ) : (

src/client/components/Library/RawFileDetails.tsx

@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
 import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 import prettyBytes from "pretty-bytes";
 import ellipsize from "ellipsize";
-import { IMPORT_SERVICE_HOST } from "../../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 
 // raw file details
 export const RawFileDetails = (rawFileData): ReactElement => {
   const { data } = rawFileData;
   const encodedFilePath = encodeURI(
-    `${IMPORT_SERVICE_HOST}/${data.cover.filePath}`,
+    `${LIBRARY_SERVICE_HOST}/${data.cover.filePath}`,
   );
   const filePath = escapePoundSymbol(encodedFilePath);
   return (

src/client/components/LibraryGrid.tsx

@@ -15,7 +15,7 @@ import Masonry from "react-masonry-css";
 import Card from "./Carda";
 import { detectIssueTypes } from "../shared/utils/tradepaperback.utils";
 import { Link } from "react-router-dom";
-import { IMPORT_SERVICE_HOST } from "../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
 
 interface ILibraryGridProps {}
 export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
@@ -47,7 +47,7 @@ export const LibraryGrid = (libraryGridProps: ILibraryGridProps) => {
             let comicName = "";
             if (!isNil(rawFileDetails)) {
               const encodedFilePath = encodeURI(
-                `${IMPORT_SERVICE_HOST}` +
+                `${LIBRARY_SERVICE_HOST}` +
                   removeLeadingPeriod(rawFileDetails.cover.filePath),
               );
               imagePath = escapePoundSymbol(encodedFilePath);

src/client/components/RecentlyImported.tsx

@@ -6,7 +6,7 @@ import { escapePoundSymbol } from "../shared/utils/formatting.utils";
 import { isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
-import { IMPORT_SERVICE_HOST } from "../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
 
 type RecentlyImportedProps = {
   comicBookCovers: any;
@@ -19,7 +19,7 @@ export const RecentlyImported = ({
     default: 5,
     1100: 4,
     700: 2,
-    600: 1,
+    600: 2,
   };
   return (
     <>
@@ -38,7 +38,7 @@ export const RecentlyImported = ({
             let comicName = "";
             if (!isNil(rawFileDetails)) {
               const encodedFilePath = encodeURI(
-                `${IMPORT_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
+                `${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
               );
               imagePath = escapePoundSymbol(encodedFilePath);
               comicName = rawFileDetails.name;

src/client/components/VolumeDetail/PotentialLibraryMatches.tsx

@@ -4,8 +4,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { getComicBooksDetailsByIds } from "../../actions/comicinfo.actions";
 import { Card } from "../Carda";
 import ellipsize from "ellipsize";
-import { IMPORT_SERVICE_HOST } from "../../constants/endpoints";
+import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
+import prettyBytes from "pretty-bytes";
 
 const PotentialLibraryMatches = (props): ReactElement => {
   const dispatch = useDispatch();
@@ -20,13 +21,11 @@ const PotentialLibraryMatches = (props): ReactElement => {
       {isArray(comicBooks) ? (
         map(comicBooks, (match) => {
           const encodedFilePath = encodeURI(
-            `${IMPORT_SERVICE_HOST}/${match.rawFileDetails.cover.filePath}`,
+            `${LIBRARY_SERVICE_HOST}/${match.rawFileDetails.cover.filePath}`,
           );
           const filePath = escapePoundSymbol(encodedFilePath);
           return (
-            <>
+            <div className="potential-issue-match mb-3">
-              {/* <pre>{JSON.stringify(match, undefined, 2)}</pre> */}
-
               <div className="columns">
                 <div className="column is-one-fifth">
                   <Card
@@ -38,9 +37,9 @@ const PotentialLibraryMatches = (props): ReactElement => {
 
                 <div className="search-result-details column">
                   <div className="is-size-5">{match.rawFileDetails.name}</div>
-                  <span className="subtitle is-size-7">
+                  <pre className="code is-size-7">
-                    {match.rawFileDetails.cover.filePath}
+                    {match.rawFileDetails.containedIn}
-                  </span>
+                  </pre>
                   <div className="field is-grouped is-grouped-multiline mt-4">
                     <div className="control">
                       <div className="tags has-addons">
@@ -54,17 +53,14 @@ const PotentialLibraryMatches = (props): ReactElement => {
                       <div className="tags has-addons">
                         <span className="tag">File Size</span>
                         <span className="tag is-warning">
-                          {match.rawFileDetails.fileSize}
+                          {prettyBytes(match.rawFileDetails.fileSize)}
                         </span>
                       </div>
                     </div>
                   </div>
-                  {/* <div className="is-size-7">
-                  {ellipsize(issueDescription, 300)}
-                </div> */}
                 </div>
               </div>
-            </>
+            </div>
           );
         })
       ) : (

src/client/components/VolumeDetail/VolumeDetail.tsx

@@ -82,8 +82,8 @@ const VolumeDetails = (props): ReactElement => {
                     <span className="icon has-text-success">
                       <i className="fa-regular fa-clone"></i>
                     </span>
-                    <span className="is-primary is-size-7">
+                    <span className="tag is-light is-warning is-size-7">
-                      {issue.issue.issue_number}
+                      {"#" + issue.issue.issue_number}
                     </span>
                   </>
                 ) : null}

src/client/constants/endpoints.ts

@@ -37,17 +37,17 @@ export const API_BASE_URI = hostURIBuilder({
   apiPath: "/api",
 });
 
-export const IMPORT_SERVICE_HOST = hostURIBuilder({
+export const LIBRARY_SERVICE_HOST = hostURIBuilder({
   protocol: "http",
   host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
   apiPath: ``,
 });
-export const IMPORT_SERVICE_BASE_URI = hostURIBuilder({
+export const LIBRARY_SERVICE_BASE_URI = hostURIBuilder({
   protocol: "http",
   host: process.env.UNDERLYING_HOSTNAME || "localhost",
   port: "3000",
-  apiPath: "/api/import",
+  apiPath: "/api/library",
 });
 
 export const SETTINGS_SERVICE_BASE_URI = hostURIBuilder({