🗾 Beuatifying card view for import results

src/client/actions/fileops.actions.tsx

@@ -6,10 +6,8 @@ import {
 import { API_BASE_URI, SOCKET_BASE_URI } from "../constants/endpoints";
 import { io } from "socket.io-client";
 import {
-  IMS_SOCKET_DATA_FETCHED,
+  IMS_COMICBOOK_METADATA_FETCHED,
   IMS_SOCKET_CONNECTION_CONNECTED,
-  IMS_RAW_IMPORT_SUCCESSFUL,
-  IMS_RAW_IMPORT_FAILED,
 } from "../constants/action-types";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
@@ -28,28 +26,6 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
     })
     .catch((error) => error);
 }
-export const rawImportToDB = (payload: any) => async (dispatch) => {
-  return axios({
-    method: "POST",
-    url: "http://localhost:3000/api/import/rawImportToDb",
-    data: {
-      payload,
-    },
-  })
-    .then((result) => {
-      dispatch({
-        type: IMS_RAW_IMPORT_SUCCESSFUL,
-        rawImportDetails: result,
-      });
-      return result;
-    })
-    .catch((error) => {
-      dispatch({
-        type: IMS_RAW_IMPORT_FAILED,
-        rawImportDetails: error,
-      });
-    });
-};
 
 export const fetchComicBookMetadata = (options) => async (dispatch) => {
   const extractionOptions = {
@@ -79,7 +55,7 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
   socket.on("disconnect", () => {
     console.log(`disconnect`);
   });
-  socket.emit("call", {
+  socket.emit("importComicsInDB", {
     action: "getComicCovers",
     params: {
       extractionOptions,
@@ -89,24 +65,11 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
   });
 
   socket.on("comicBookCoverMetadata", (data: IExtractedComicBookCoverFile) => {
-    console.log(data);
     dispatch({
-      type: IMS_SOCKET_DATA_FETCHED,
+      type: IMS_COMICBOOK_METADATA_FETCHED,
       data,
       dataTransferred: true,
     });
-    dispatch(
-      rawImportToDB({
-        importStatus: {
-          isImported: true,
-          tagged: false,
-          matchedResult: {
-            score: "0",
-          },
-        },
-        rawFileDetails: data,
-      }),
-    );
   });
 
   socket.on("comicBookCoverMetadataSent", (status) => {

src/client/assets/scss/App.scss

@@ -24,22 +24,58 @@ $border-color: red;
 }
 
 .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 {
+  //     max-width: 200px;
+  //
+  //     .truncate {
+  //       width: 100px;
+  //       white-space: nowrap;
+  //       overflow: hidden;
+  //       text-overflow: ellipsis;
+  //     }
+  //
+  //     img {
+  //       max-width: 200px;
+  //     }
+  // }
   .card {
-    max-width: 200px;
+    max-width: 500px;
-
+    margin: 0 0 15px 0;
-    .truncate {
+    .is-horizontal {
-      width: 100px;
+      flex-direction: row;
-      white-space: nowrap;
+      display: flex;
-      overflow: hidden;
+      flex-basis: 50ex;
-      text-overflow: ellipsis;
+      flex-grow: 0;
-    }
+      flex-shrink: 1;
+      box-shadow: none;
 
+      .card-image {
+        align-self: center;
+        .image {
+          max-width: 60px;
           img {
-      max-width: 200px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-top-left-radius: 0.25em;
+            border-bottom-left-radius: 0.25em;
+          }
+        }
+      }
+      .card-content {
+        flex: 1;
+        padding-left: 1em;
+        padding-top: 0;
+        padding-bottom: 0;
+        font-size: 0.8em;
+      }
+      .is-divider {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+      }
     }
   }
 }

src/client/components/Card.tsx

@@ -22,24 +22,32 @@ class Card extends React.Component<IProps, IState> {
   public drawCoverCard = (
     metadata: IExtractedComicBookCoverFile[],
   ): JSX.Element[] => {
-    return map(metadata, (item: IExtractedComicBookCoverFile, idx: number) => {
+    return map(metadata, (item: any, idx: number) => {
       return (
-        <div className="card" key={idx}>
+        <div key={idx}>
+          <div className="card">
+            <div className="is-horizontal">
               <div className="card-image">
                 <figure className="image">
                   <img
                     src={
                       "http://localhost:3000" +
-                  this.removeLeadingPeriod(item.path) +
+                      this.removeLeadingPeriod(
+                        item.comicBookCoverMetadata.path,
+                      ) +
                       "/" +
-                  item.name
+                      item.comicBookCoverMetadata.name
                     }
                     alt="Placeholder image"
                   />
                 </figure>
               </div>
               <div className="card-content">
-            <div className="content truncate">{item.name}</div>
+                <div className="truncate">
+                  {item.comicBookCoverMetadata.name}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       );

src/client/constants/action-types.ts

@@ -4,7 +4,7 @@ export const CV_SEARCH_SUCCESS = "CV_SEARCH_SUCCESS";
 
 export const CV_API_GENERIC_FAILURE = "CV_API_GENERIC_FAILURE";
 
-export const IMS_SOCKET_DATA_FETCHED = "IMS_SOCKET_DATA_FETCHED";
+export const IMS_COMICBOOK_METADATA_FETCHED = "IMS_SOCKET_DATA_FETCHED";
 export const IMS_SOCKET_CONNECTION_CONNECTED =
   "IMS_SOCKET_CONNECTION_CONNECTED";
 export const IMS_SOCKET_CONNECTION_DISCONNECTED =

src/client/reducers/fileops.reducer.ts

@@ -1,7 +1,7 @@
 import {
   IMS_SOCKET_CONNECTION_CONNECTED,
   IMS_SOCKET_CONNECTION_DISCONNECTED,
-  IMS_SOCKET_DATA_FETCHED,
+  IMS_COMICBOOK_METADATA_FETCHED,
   IMS_SOCKET_ERROR,
   IMS_RAW_IMPORT_SUCCESSFUL,
   IMS_RAW_IMPORT_FAILED,
@@ -10,13 +10,12 @@ const initialState = {
   dataTransferred: false,
   comicBookMetadata: [],
   socketConnected: false,
-  rawImportDetails: {},
   rawImportError: {},
 };
 
 function fileOpsReducer(state = initialState, action) {
   switch (action.type) {
-    case IMS_SOCKET_DATA_FETCHED:
+    case IMS_COMICBOOK_METADATA_FETCHED:
       return {
         ...state,
         comicBookMetadata: [...state.comicBookMetadata, action.data],