🔌 Socket + RabbitMQ setup for download-client touched folders/files

src/client/components/App.tsx

@@ -29,6 +29,19 @@ const style = {
     },
     tr: {
       top: "40px",
+      right: "10px",
+    },
+  },
+  Title: {
+    DefaultStyle: {
+      fontSize: "14px",
+      margin: "0 0 5px 0",
+      padding: 0,
+      fontWeight: "bold",
+    },
+
+    success: {
+      color: "hsl(141, 71%, 48%)",
     },
   },
   NotificationItem: {
@@ -36,7 +49,7 @@ const style = {
     success: {
       // Applied to every notification, regardless of the notification level
       borderTop: "none",
-      backgroundColor: "none",
+      backgroundColor: "#FFF",
       borderRadius: "0.4rem",
       WebkitBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
       MozBoxShadow: "-7px 11px 25px -9px rgba(0, 0, 0, 0.3)",
@@ -53,6 +66,7 @@ export const App = (): ReactElement => {
         notifications={notifications}
         style={style}
         newOnTop={true}
+        allowHTML={true}
       />
       <Switch>
         <Route exact path="/">

src/client/components/ComicDetail.tsx

@@ -213,10 +213,26 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
       <dl>
         <dt>Raw File Details</dt>
         <dd>{props.data.containedIn}</dd>
-        <dd>{prettyBytes(props.data.fileSize)}</dd>
         <dd>{props.data.path}</dd>
         <dd>
-          <span className="tag is-primary">{props.data.extension}</span>
+          <div className="field is-grouped">
+            <div className="control">
+              <div className="tags has-addons">
+                <span className="tag">Size</span>
+                <span className="tag is-info is-light">
+                  {prettyBytes(props.data.fileSize)}
+                </span>
+              </div>
+            </div>
+            <div className="control">
+              <div className="tags has-addons">
+                <span className="tag">Extension</span>
+                <span className="tag is-primary is-light">
+                  {props.data.extension}
+                </span>
+              </div>
+            </div>
+          </div>
         </dd>
       </dl>
     </div>

src/client/components/Import.tsx

@@ -1,10 +1,12 @@
 import React, { ReactElement, useCallback } from "react";
-import { isNil, isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import { useSelector, useDispatch } from "react-redux";
 import { fetchComicBookMetadata } from "../actions/fileops.actions";
 import { IFolderData } from "threetwo-ui-typings";
+import { LazyLog, ScrollFollow } from "react-lazylog";
 import DynamicList, { createCache } from "react-window-dynamic-list";
-;
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import Loader from "react-loader-spinner";
 
 interface IProps {
   matches?: unknown;
@@ -32,13 +34,27 @@ export const Import = (props: IProps): ReactElement => {
     console.log(state);
     return state.fileOps.isSocketConnected;
   });
-
+  const importResults = useSelector(
+    (state: RootState) => state.fileOps.comicBookMetadata,
+  );
+  const IMSCallInProgress = useSelector(
+    (state: RootState) => state.fileOps.IMSCallInProgress,
+  );
   const initiateImport = useCallback(() => {
     if (typeof props.path !== "undefined") {
       console.log("asdasd");
       dispatch(fetchComicBookMetadata(props.path));
     }
   }, [dispatch]);
+  const cache = createCache();
+  const renderRow = ({ index, style }) => (
+    <li className="is-size-7" style={style}>
+      <strong>{importResults[index].comicBookCoverMetadata.name} </strong>
+      <br />
+      {importResults[index].comicBookCoverMetadata.path}
+      <hr />
+    </li>
+  );
 
   return (
     <div className="container">
@@ -78,6 +94,37 @@ export const Import = (props: IProps): ReactElement => {
             <span>Import and Tag</span>
           </button>
         </p>
+
+        {!isEmpty(importResults) ? (
+          <>
+            <h3>Import Results</h3>
+            <hr />
+            <ul>
+              <DynamicList
+                data={importResults}
+                cache={cache}
+                height={800}
+                width={"100%"}
+                lazyMeasurement={false}
+              >
+                {renderRow}
+              </DynamicList>
+            </ul>
+          </>
+        ) : (
+          <div className="progress-indicator-container">
+            <div className="indicator">
+              <Loader
+                type="MutatingDots"
+                color="#CCC"
+                secondaryColor="#999"
+                height={100}
+                width={100}
+                visible={IMSCallInProgress}
+              />
+            </div>
+          </div>
+        )}
       </section>
     </div>
   );