💽 Raw import to mongo WIP

src/client/components/Card.tsx

@@ -20,9 +20,9 @@ class Card extends React.Component<IProps, IState> {
   public drawCoverCard = (
     metadata: IExtractedComicBookCoverFile[],
   ): JSX.Element[] => {
-    return map(metadata, (item: IExtractedComicBookCoverFile) => {
+    return map(metadata, (item: IExtractedComicBookCoverFile, idx: number) => {
       return (
-        <div className="card">
+        <div className="card" key={idx}>
           <div className="card-image">
             <figure className="image">
               <img

src/client/components/Import.tsx

@@ -102,7 +102,7 @@ class Import extends React.Component<IProps, IState> {
 }
 
 function mapStateToProps(state: IState) {
-  console.log("STATE", state);
+  console.log("state", state);
   return {
     // matches: state.comicInfo.searchResults,
     garam: state.fileOps.comicBookMetadata,

src/client/components/Navbar.tsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
 
 const Navbar: React.FunctionComponent = (props) => {
-  const socketConnected = useSelector((state) => state.fileOps);
+  const socketConnection = useSelector((state) => state.fileOps);
 
   return (
     <nav className="navbar ">
@@ -189,7 +189,7 @@ const Navbar: React.FunctionComponent = (props) => {
           <div className="navbar-item">
             <div className="field is-grouped">
               <p className="control">
-                {socketConnected.socketConnected ? (
+                {socketConnection.socketConnected ? (
                   <span className="icon is-small has-text-success">
                     <i className="fas fa-plug"></i>
                   </span>