📔 Adding UI elements for cover images

src/client/assets/scss/App.scss

@@ -25,11 +25,8 @@ $border-color: red;
 }
 
 .card {
-  border: 1px solid color(srgb 0.767 0.861 0.848);
-  margin: 0 10rem 10rem 0;
-  div {
-    margin: 10px;
-    border: 1px solid red;
+  img {
+    max-width: 200px;
   }
 }
 

src/client/components/Card.tsx

@@ -7,62 +7,45 @@ import { walkFolder } from "../actions/fileops.actions";
 interface IProps {
   comicBookCoversMetadata: any;
 }
-interface IState {
-  comicBookCoversMetadata: any[];
-}
+interface IState {}
 
 class Card extends React.Component<IProps, IState> {
   constructor(props) {
     super(props);
-    this.state = {
-      comicBookCoversMetadata: [],
-    };
   }
-  public fetchComicBookCoversData = (metadata) => {
-    this.setState((prevState) => {
-      // Get previous state
-      const { comicBookCoversMetadata } = prevState;
-
-      // Add new item to array
-      comicBookCoversMetadata.push(metadata);
-
-      // Return new state
-      return { comicBookCoversMetadata };
-    });
-  };
-
-  public drawCoverCard = () => {
-    console.log("cover card", this.state.comicBookCoversMetadata);
-    if (this.state.comicBookCoversMetadata.length >= 1) {
-      return map(this.state.comicBookCoversMetadata, (metadata) => {
-        return <div>{JSON.stringify(metadata)}</div>;
-      });
+  private removeLeadingPeriod = (string) => {
+    if (string.charAt(0) == ".") {
+      string = string.substr(1);
     }
+    return string;
   };
-  public async componentDidMount() {
-    const extractionOptions = {
-      sourceFolder: "./comics",
-      extractTarget: "cover",
-      targetExtractionFolder: "./userdata/covers",
-      extractionMode: "bulk",
-      paginationOptions: {
-        pageLimit: 25,
-        page: 1,
-      },
-    };
-    const walkedFolders = await walkFolder("./comics");
-    socket.emit("call", {
-      action: "getComicCovers",
-      params: {
-        extractionOptions,
-        walkedFolders,
-      },
-      opts: { garam: "pasha" },
+  public drawCoverCard = (metadata) => {
+    return map(metadata, (item) => {
+      return (
+        <div className="card">
+          <div className="card-image">
+            <figure className="image">
+              <img
+                src={
+                  "http://localhost:3000" +
+                  this.removeLeadingPeriod(item.path) +
+                  "/" +
+                  item.name
+                }
+                alt="Placeholder image"
+              />
+            </figure>
+          </div>
+          <div className="card-content">
+            <div className="content">{item.name}</div>
+          </div>
+        </div>
+      );
     });
-    socket.on("comicBookCoverMetadata", this.fetchComicBookCoversData);
-  }
+  };
+
   public render() {
-    return <div className="card">{this.drawCoverCard()}</div>;
+    return <div>{this.drawCoverCard(this.props.comicBookCoversMetadata)}</div>;
   }
 }
 

src/client/components/Card2.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
-import { isArray, map, isUndefined, isEmpty, flatten } from "lodash";
-import { socket } from "./Import";
-import { walkFolder } from "../actions/fileops.actions";
-
-interface IProps {
-  comicBookCoversMetadata: any;
-}
-interface IState {}
-
-class Card extends React.Component<IProps, IState> {
-  constructor(props) {
-    super(props);
-  }
-
-  public drawCoverCard = (metadata) => {
-    return map(metadata, (item) => {
-      return <div className="card">{JSON.stringify(item)}</div>;
-    });
-  };
-
-  public render() {
-    return <div>{this.drawCoverCard(this.props.comicBookCoversMetadata)}</div>;
-  }
-}
-
-export default Card;

src/client/components/Import.tsx

@@ -3,7 +3,7 @@ import _ from "lodash";
 import { connect } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
 import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
-import Card from "./Card2";
+import Card from "./Card";
 import { io } from "socket.io-client";
 
 interface IProps {
@@ -40,11 +40,11 @@ class Import extends React.Component<IProps, IState> {
     });
   }
 
-  public componentDidMount() {
+  public initiateSocketConnection = () => {
     if (typeof this.props.path !== "undefined") {
       this.props.fetchComicMetadata();
     }
-  }
+  };
 
   public render() {
     return (
@@ -71,7 +71,10 @@ class Import extends React.Component<IProps, IState> {
             </div>
           </article>
           <p className="buttons">
-            <button className="button is-medium">
+            <button
+              className="button is-medium"
+              onClick={this.initiateSocketConnection}
+            >
               <span className="icon">
                 <i className="fas fa-file-import"></i>
               </span>

src/client/reducers/fileops.reducer.ts

@@ -12,7 +12,6 @@ const initialState = {
 function fileOpsReducer(state = initialState, action) {
   switch (action.type) {
     case IMS_SOCKET_DATA_FETCHED:
-      console.log("ke me hu garam garam");
       return {
         ...state,
         comicBookMetadata: [...state.comicBookMetadata, action.data.data],