💽 Raw import to mongo WIP

src/client/actions/fileops.actions.tsx

@@ -8,12 +8,13 @@ import { io } from "socket.io-client";
 import {
   IMS_SOCKET_DATA_FETCHED,
   IMS_SOCKET_CONNECTION_CONNECTED,
+  IMS_RAW_IMPORT_SUCCESSFUL,
 } from "../constants/action-types";
 
 export async function walkFolder(path: string): Promise<Array<IFolderData>> {
   return axios
     .request<Array<IFolderData>>({
-      url: API_BASE_URI + "walkFolder",
+      url: "http://localhost:3000/api/import/walkFolders",
       method: "POST",
       data: {
         basePathToWalk: path,
@@ -23,8 +24,24 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
     .then((response) => {
       const { data } = response;
       return data;
-    });
+    })
+    .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,
+      rawImportCompleted: result,
+    });
+    return result;
+  });
+};
 
 export const fetchComicBookMetadata = (options) => async (dispatch) => {
   const extractionOptions = {
@@ -64,10 +81,27 @@ export const fetchComicBookMetadata = (options) => async (dispatch) => {
   });
 
   socket.on("comicBookCoverMetadata", (data: IExtractedComicBookCoverFile) => {
+    console.log(data);
     dispatch({
       type: IMS_SOCKET_DATA_FETCHED,
       data,
       dataTransferred: true,
     });
+    dispatch(
+      rawImportToDB({
+        importStatus: {
+          isImported: true,
+          tagged: false,
+          matchedResult: {
+            score: "0",
+          },
+        },
+        rawFileDetails: data,
+      }),
+    );
+  });
+
+  socket.on("comicBookCoverMetadataSent", (status) => {
+    console.log(status);
   });
 };

src/client/assets/scss/App.scss

@@ -14,7 +14,6 @@ $border-color: red;
     background-color: $bg-color;
   }
 }
-
 .navbar-item.is-mega {
   position: static;
 

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>

src/client/constants/action-types.ts

@@ -10,3 +10,5 @@ export const IMS_SOCKET_CONNECTION_CONNECTED =
 export const IMS_SOCKET_CONNECTION_DISCONNECTED =
   "IMS_SOCKET_CONNECTION_DISCONNECTED";
 export const IMS_SOCKET_ERROR = "IMS_SOCKET_ERROR";
+
+export const IMS_RAW_IMPORT_SUCCESSFUL = "IMS_RAW_IMPORT_SUCCESSFUL";

src/client/reducers/fileops.reducer.ts

@@ -3,11 +3,13 @@ import {
   IMS_SOCKET_CONNECTION_DISCONNECTED,
   IMS_SOCKET_DATA_FETCHED,
   IMS_SOCKET_ERROR,
+  IMS_RAW_IMPORT_SUCCESSFUL,
 } from "../constants/action-types";
 const initialState = {
   dataTransferred: false,
   comicBookMetadata: [],
   socketConnected: false,
+  rawImportCompleted: {},
 };
 
 function fileOpsReducer(state = initialState, action) {
@@ -15,7 +17,7 @@ function fileOpsReducer(state = initialState, action) {
     case IMS_SOCKET_DATA_FETCHED:
       return {
         ...state,
-        comicBookMetadata: [...state.comicBookMetadata, action.data.data],
+        comicBookMetadata: [...state.comicBookMetadata, action.data],
         dataTransferred: true,
       };
 
@@ -24,6 +26,11 @@ function fileOpsReducer(state = initialState, action) {
         ...state,
         socketConnected: action.socketConnected,
       };
+    case IMS_RAW_IMPORT_SUCCESSFUL:
+      return {
+        ...state,
+        rawImportCompleted: action.rawImportCompleted,
+      };
     default:
       return state;
   }

webpack.config.js

@@ -57,7 +57,7 @@ module.exports = {
     extensions: ["*", ".ts", ".tsx", ".js", ".jsx", ".json"],
   },
   devServer: {
-    port: 3000,
+    port: 3050,
     open: true,
     hot: true,
     proxy: {