💅🏽 Refactoring UX on Library page

package.json

@@ -82,7 +82,7 @@
     "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.3.2",
     "styled-components": "^5.3.3",
-    "threetwo-ui-typings": "^1.0.13",
+    "threetwo-ui-typings": "^1.0.14",
     "voca": "^1.4.0",
     "websocket": "^1.0.34",
     "ws": "^7.5.3",

src/client/assets/scss/App.scss

@@ -187,23 +187,24 @@ pre {
   }
 }
 .card-container {
-  display: grid;
+  // display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  column-gap: 0.5em;
+  // column-gap: 0.5em;
-  row-gap: 1.2em;
+  // row-gap: 1.2em;
 
   .card {
     margin: 0 0 15px 0;
+   
     .partial-rounded-card-image {
       img {
-        border-top-left-radius: 0.3rem;
+        border-top-left-radius: 0.4rem;
-        border-top-right-radius: 0.3rem;
+        border-top-right-radius: 0.4rem;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
       }
     }
     .rounded-card-image {
-      border-radius: 0.3rem;
+      border-radius: 0.4rem;
     }
 
     .is-horizontal {
@@ -225,24 +226,20 @@ pre {
         }
       }
       .card-content {
-        align-self: center;
+        align-self: top;
         flex: 1;
         padding-left: 1em;
-        padding-top: 0;
+        padding-top: 0.5em;
-        padding-bottom: 0;
+        padding-bottom: 0em;
-        font-size: 0.8em;
+        .name {
+          font-size: 0.85em;
+        }
         ul {
           li.status {
             margin-top: 10px;
           }
         }
 
-        .truncate {
-          width: 400px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
       }
       .is-divider {
         margin-top: 1.5rem;

src/client/components/Import.tsx

@@ -119,7 +119,7 @@ export const Import = (props: IProps): ReactElement => {
                     className="button is-warning is-light"
                     onClick={toggleImport}
                   >
-                    {isImportQueuePaused ? pauseIconText : playIconText}
+                    {!isImportQueuePaused ? pauseIconText : playIconText}
                   </button>
                 </div>
               </div>

src/client/components/Library/Library.tsx

@@ -8,12 +8,13 @@ import 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 { flatten, isEmpty, isNil, isUndefined, map } 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";
+import ellipsize from "ellipsize";
 
 interface IComicBookLibraryProps {
   data: {
@@ -37,9 +38,35 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
 
   const ImportStatus = ({ value }) => {
     return value ? (
-      <span className="tag is-info is-light">Imported</span>
+      <div className="box">
+        <dl>
+          <span className="tags has-addons is-size-7">
+            <span className="tag is-info">Series</span>
+            <span className="tag">{ellipsize(value.series[0], 25)}</span>
+          </span>
+        </dl>
+        <dl>
+          <div className="field is-grouped is-grouped-multiline">
+            <div className="control">
+              <span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
+                <span className="tag is-info">Pages</span>
+                <span className="tag">{value.pagecount[0]}</span>
+              </span>
+            </div>
+
+            <div className="control">
+              <span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
+                <span className="tag is-info">Issue</span>
+                {!isNil(value.number) && (
+                  <span className="tag">{parseInt(value.number[0], 10)}</span>
+                )}
+              </span>
+            </div>
+          </div>
+        </dl>
+      </div>
     ) : (
-      "Not Imported"
+      <span className="is-size-7">No ComicInfo.xml</span>
     );
   };
 
@@ -59,11 +86,14 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
             id: "fileDetails",
             accessor: (row) =>
               !isEmpty(row._source.rawFileDetails)
-                ? row._source.rawFileDetails
+                ? {
+                    rawFileDetails: row._source.rawFileDetails,
+                    inferredMetadata: row._source.inferredMetadata,
+                  }
                 : row._source.sourcedMetadata,
             Cell: ({ value }) => {
               // If no CV info available, use raw file metadata
-              if (!isNil(value.cover)) {
+              if (!isNil(value.rawFileDetails.cover)) {
                 return <RawFileDetails data={value} />;
               }
               // If CV metadata available, show it
@@ -75,7 +105,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
           },
           {
             Header: "Import Status",
-            accessor: "_source.importStatus.isImported",
+            accessor: "_source.sourcedMetadata.comicInfo",
             Cell: ImportStatus,
           },
         ],
@@ -83,23 +113,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
       {
         Header: "Additional Metadata",
         columns: [
-          {
-            Header: "Issue #",
-            accessor: "_source.inferredMetadata.issue",
-            Cell(props) {
-              return (
-                !isUndefined(props.cell.value) && (
-                  <div className="control">
-                    <div className="tags has-addons">
-                      <span className="tag is-light is-warning">Inferred</span>
-                      <span className="tag">{props.cell.value.number}</span>
-                    </div>
-                  </div>
-                )
-              );
-            },
-          },
-
           {
             Header: "Publisher",
             accessor:
@@ -110,44 +123,6 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
               );
             },
           },
-
-          {
-            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>
-                )
-              );
-            },
-          },
         ],
       },
     ],

src/client/components/Library/LibraryContainer.tsx

@@ -29,7 +29,7 @@ const LibraryContainer = () => {
   return !isEmpty(searchResults) ? (
     <Library data={{ searchResults }} />
   ) : (
-    "asdasd"
+    "No data found."
   );
 };
 

src/client/components/Library/RawFileDetails.tsx

@@ -7,9 +7,9 @@ import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
 
 // raw file details
 export const RawFileDetails = (rawFileData): ReactElement => {
-  const { data } = rawFileData;
+  const { rawFileDetails, inferredMetadata } = rawFileData.data;
   const encodedFilePath = encodeURI(
-    `${LIBRARY_SERVICE_HOST}/${data.cover.filePath}`,
+    `${LIBRARY_SERVICE_HOST}/${rawFileDetails.cover.filePath}`,
   );
   const filePath = escapePoundSymbol(encodedFilePath);
   return (
@@ -23,17 +23,34 @@ export const RawFileDetails = (rawFileData): ReactElement => {
           </div>
           <ul className="card-content">
             <li className="name has-text-weight-medium">
-              {ellipsize(data.name, 28)}
+              {ellipsize(rawFileDetails.name, 49)}
+            </li>
+
+            <li>
+              <dl className="is-size-7">
+                <dd>
+                  Series:{" "}
+                  <span className="has-text-weight-medium">
+                    {inferredMetadata.issue.name}
+                  </span>
+                </dd>
+              </dl>
             </li>
             <li>
-              <div className="control">
+              <div className="mt-1 field is-grouped is-grouped-multiline">
-                <div className="tags has-addons">
+                <div className="control">
-                  <span className="tag is-primary is-light">
+                  <div className="tags">
-                    {data.extension}
+                    <span className="tag is-warning is-light">
-                  </span>
+                      {inferredMetadata.issue.number}
-                  <span className="tag is-info is-light">
+                    </span>
-                    {prettyBytes(data.fileSize)}
+
-                  </span>
+                    <span className="tag is-success is-light">
+                      {rawFileDetails.extension}
+                    </span>
+                    <span className="tag">
+                      {prettyBytes(rawFileDetails.fileSize)}
+                    </span>
+                  </div>
                 </div>
               </div>
             </li>

src/client/constants/action-types.ts

@@ -14,6 +14,7 @@ export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
 export const LS_IMPORT_CALL_IN_PROGRESS = "LS_IMPORT_CALL_IN_PROGRESS";
 // Library import bull mq queue control
 export const LS_TOGGLE_IMPORT_QUEUE = "LS_TOGGLE_IMPORT_QUEUE";
+export const LS_QUEUE_DRAINED = "LS_QUEUE_DRAINED";
 
 // ComicVine Metadata
 export const IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS =

src/client/reducers/fileops.reducer.ts

@@ -15,6 +15,7 @@ import {
   IMS_COMIC_BOOK_ARCHIVE_EXTRACTION_SUCCESS,
   LS_IMPORT,
   LS_COVER_EXTRACTED,
+  LS_QUEUE_DRAINED,
   LS_COMIC_ADDED,
   IMG_ANALYSIS_CALL_IN_PROGRESS,
   IMG_ANALYSIS_DATA_FETCH_SUCCESS,
@@ -147,6 +148,12 @@ function fileOpsReducer(state = initialState, action) {
         librarySearchResultCount: state.librarySearchResultCount + 1,
       };
     }
+    case LS_QUEUE_DRAINED: {
+      console.log("drained", action);
+      return {
+        ...state,
+      };
+    }
     case LS_COMIC_ADDED: {
       console.log("ADDED na anna", action);
       return {

yarn.lock

@@ -12789,10 +12789,10 @@ text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-threetwo-ui-typings@^1.0.13:
+threetwo-ui-typings@^1.0.14:
-  version "1.0.13"
+  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.13.tgz#9437a8c08a6984ebd1dcdf308e06e404dee11c81"
+  resolved "https://registry.yarnpkg.com/threetwo-ui-typings/-/threetwo-ui-typings-1.0.14.tgz#39cb8115cd311af2569504a6d32f401827de5c0a"
-  integrity sha512-AQiY8/hbp+TobBoehNTEoNco97AoiKYQjAANSFDR3pSD5jFn5qjLlKntvqdNF9Fg5tcS0ReYe0AjsvKshKpixQ==
+  integrity sha512-nfOi2T9Pr35Bry7Y9q0r6ZnuLdGqfJY45Xu0lDGJl/oA8RLBS19FZtxsVQzYnm5jfm0tO2Q6t/JY7JnU8a9olw==
   dependencies:
     typescript "^4.3.2"