Merge branch 'master' into dev

This refactor covers the following workflows:

1. Adding a comic from LOCG or ComicVine adds it to the wanted list
2. Downloading that comic from DC++ correctly adds download metadata to the corresponding comic object in mongo
3. Successful download triggers automatic import to library and cover extraction, metadata application

package.json

@@ -182,4 +182,4 @@
   "resolutions": {
     "@storybook/react/webpack": "^5"
   }
-}
+}

src/client/actions/fileops.actions.tsx

@@ -349,4 +349,4 @@ export const analyzeImage =
       type: IMG_ANALYSIS_DATA_FETCH_SUCCESS,
       result: foo.data,
     });
-  };
+  };

src/client/components/App.tsx

@@ -137,4 +137,4 @@ export const App = (): ReactElement => {
   );
 };
 
-export default App;
+export default App;

src/client/components/ComicDetail/AcquisitionPanel.tsx

@@ -336,4 +336,4 @@ export const AcquisitionPanel = (
   );
 };
 
-export default AcquisitionPanel;
+export default AcquisitionPanel;

src/client/components/ComicDetail/ComicDetail.tsx

@@ -317,4 +317,4 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
   );
 };
 
-export default ComicDetail;
+export default ComicDetail;

src/client/components/ComicDetail/RawFileDetails.tsx

@@ -94,4 +94,4 @@ RawFileDetails.propTypes = {
       }),
     }),
   }),
-};
+};

src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx

@@ -126,4 +126,4 @@ export const ArchiveOperations = (props): ReactElement => {
   );
 };
 
-export default ArchiveOperations;
+export default ArchiveOperations;

src/client/components/Dashboard/Dashboard.tsx

@@ -94,4 +94,4 @@ export const Dashboard = (): ReactElement => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;

src/client/components/Dashboard/PullList.tsx

@@ -161,4 +161,4 @@ export const PullList = ({ issues }: PullListProps): ReactElement => {
   );
 };
 
-export default PullList;
+export default PullList;

src/client/components/Dashboard/RecentlyImported.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react";
 import Card from "../Carda";
 import { Link } from "react-router-dom";
 import ellipsize from "ellipsize";
+import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
 import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import Masonry from "react-masonry-css";
@@ -51,6 +52,7 @@ export const RecentlyImported = ({
             },
             idx,
           ) => {
+            console.log(comicvine);
             const { issueName, url } = determineCoverFile({
               rawFileDetails,
               comicvine,
@@ -62,6 +64,7 @@ export const RecentlyImported = ({
               comicInfo,
               locg,
             });
+            console.log(name);
             const isComicBookMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);
@@ -143,4 +146,4 @@ export const RecentlyImported = ({
       </Masonry>
     </>
   );
-};
+};

src/client/components/Library/Library.tsx

@@ -208,13 +208,14 @@ export const Library = (): ReactElement => {
   // ImportStatus.propTypes = {
   //   value: PropTypes.bool.isRequired,
   // };
+
   return (
     <section className="container">
       <div className="section">
         <div className="header-area">
           <h1 className="title">Library</h1>
         </div>
-        {!isEmpty(searchResults) ? (
+        {!isUndefined(searchResults.hits) && (
           <div>
             <div className="library">
               <T2Table
@@ -229,25 +230,7 @@ export const Library = (): ReactElement => {
               />
             </div>
           </div>
-        ): <div className="columns">
-          <div className="column is-two-thirds">
-            <article className="message is-link">
-              <div className="message-body">
-                No comics were found in the library, Elasticsearch reports no
-                indices. Try importing a few comics into the library and come
-                back.
-              </div>
-            </article>
-            <pre>
-              {!isUndefined(searchError.data) &&
-                JSON.stringify(
-                  searchError.data.meta.body.error.root_cause,
-                  null,
-                  4,
-                )}
-            </pre>
-          </div>
-        </div> }
+        )}
       </div>
     </section>
   );

src/client/components/Navbar.tsx

@@ -1,17 +1,15 @@
-import React, { useContext } from "react";
+import React from "react";
 import { SearchBar } from "./GlobalSearchBar/SearchBar";
 import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
-import { isUndefined, isEmpty } from "lodash";
-import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
+import { isUndefined } from "lodash";
 
 const Navbar: React.FunctionComponent = (props) => {
   const downloadProgressTick = useSelector(
     (state: RootState) => state.airdcpp.downloadProgressData,
   );
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-console.log(airDCPPConfiguration)
+
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -82,23 +80,10 @@ console.log(airDCPPConfiguration)
               <div className="navbar-dropdown download-progress-meter">
                 <a className="navbar-item">
                   <DownloadProgressTick data={downloadProgressTick} />
-                </a>              </div>
+                </a>
+              </div>
             ) : null}
           </div>
-          {/* AirDC++ socket connection status */}
-          <div className="navbar-item has-dropdown is-hoverable">
-            <a className="navbar-link is-arrowless has-text-success">
-              {!isEmpty(airDCPPConfiguration.airDCPPState.socketConnectionInformation) ? (
-                <i className="fa-solid fa-bolt"></i>) : null}
-            </a>    
-            <div className="navbar-dropdown download-progress-meter">
-              <a className="navbar-item">
-                <pre>{JSON.stringify(airDCPPConfiguration.airDCPPState.socketConnectionInformation, null, 2)}</pre>
-              </a>
-            </div>      
-          </div>
-          
-          
           <div className="navbar-item has-dropdown is-hoverable is-mega">
             <div className="navbar-link flex">Blog</div>
             <div id="blogDropdown" className="navbar-dropdown">

src/client/constants/action-types.ts

@@ -137,4 +137,4 @@ export const SETTINGS_DB_FLUSH_SUCCESS = "SETTINGS_DB_FLUSH_SUCCESS";
 // Metron Metadata
 export const METRON_DATA_FETCH_SUCCESS = "METRON_DATA_FETCH_SUCCESS";
 export const METRON_DATA_FETCH_IN_PROGRESS = "METRON_DATA_FETCH_IN_PROGRESS";
-export const METRON_DATA_FETCH_ERROR = "METRON_DATA_FETCH_ERROR";
+export const METRON_DATA_FETCH_ERROR = "METRON_DATA_FETCH_ERROR";

src/client/context/AirDCPPSocket.tsx

@@ -12,7 +12,7 @@ const AirDCPPSocketContextProvider = ({ children }) => {
       airDCPPState: {
         settings: settingsObject,
         socket: {},
-        socketConectionInformation: {},
+        socketConnectionInformation: {},
       },
     });
   };
@@ -56,12 +56,11 @@ const AirDCPPSocketContextProvider = ({ children }) => {
       hostname: `${host.hostname}:${host.port}`,
     });
 
-    let socketConnectionInformation = await initializedAirDCPPSocket.connect(
+    const socketConnectionInformation = await initializedAirDCPPSocket.connect(
       `${host.username}`,
       `${host.password}`,
       true,
     );
-
     persistSettings({
       ...airDCPPState,
       airDCPPState: {
@@ -81,7 +80,7 @@ const AirDCPPSocketContextProvider = ({ children }) => {
 };
 const AirDCPPSocketContext = createContext({
   airDCPPState: {},
-  saveSettings: () => { },
+  saveSettings: () => {},
 });
 
 export { AirDCPPSocketContext, AirDCPPSocketContextProvider };

src/client/reducers/fileops.reducer.ts

@@ -283,4 +283,4 @@ function fileOpsReducer(state = initialState, action) {
   }
 }
 
-export default fileOpsReducer;
+export default fileOpsReducer;

src/client/shared/utils/metadata.utils.ts

@@ -90,4 +90,4 @@ export const determineExternalMetadata = (
     default:
       break;
   }
-};
+};