Merge branch 'master' into dcpp-socket-status

* 🔧 Fixed empty library state with explanation

* ⚡️ Added a status indicator for the AirDC++ socket connection

src/client/components/Dashboard/RecentlyImported.tsx

@@ -2,7 +2,6 @@ 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";
@@ -52,7 +51,6 @@ export const RecentlyImported = ({
             },
             idx,
           ) => {
-            console.log(comicvine);
             const { issueName, url } = determineCoverFile({
               rawFileDetails,
               comicvine,
@@ -64,7 +62,6 @@ export const RecentlyImported = ({
               comicInfo,
               locg,
             });
-            console.log(name);
             const isComicBookMetadataAvailable =
               !isUndefined(comicvine) &&
               !isUndefined(comicvine.volumeInformation);

src/client/components/Library/Library.tsx

@@ -208,14 +208,13 @@ 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>
-        {!isUndefined(searchResults.hits) && (
+        {!isEmpty(searchResults) ? (
           <div>
             <div className="library">
               <T2Table
@@ -230,7 +229,25 @@ 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,15 +1,17 @@
-import React from "react";
+import React, { useContext } 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 } from "lodash";
+import { isUndefined, isEmpty } from "lodash";
+import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
 
 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">
@@ -80,10 +82,23 @@ const Navbar: React.FunctionComponent = (props) => {
               <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/context/AirDCPPSocket.tsx

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