AirDC++ Socket Status (#58)

src/client/components/App.tsx

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

src/client/components/Library/Library.tsx

@@ -8,10 +8,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { searchIssue } from "../../actions/fileops.actions";
 import ellipsize from "ellipsize";
 
-
 /**
  * Component that tabulates the contents of the user's ThreeTwo Library.
- * 
+ *
  * @component
  * @example
  * <Library />
@@ -20,9 +19,10 @@ export const Library = (): ReactElement => {
   const searchResults = useSelector(
     (state: RootState) => state.fileOps.libraryComics,
   );
-  const searchError = useSelector(
-    (state: RootState) => state.fileOps.librarySearchError,
-  );
+  const searchError = useSelector((state: RootState) => {
+    console.log(state);
+    return state.fileOps.librarySearchError;
+  });
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(
@@ -36,7 +36,7 @@ export const Library = (): ReactElement => {
             from: 0,
           },
           type: "all",
-          trigger: "libraryPage"
+          trigger: "libraryPage",
         },
       ),
     );
@@ -89,63 +89,67 @@ export const Library = (): ReactElement => {
   const WantedStatus = ({ value }) => {
     return !value ? <span className="tag is-info is-light">Wanted</span> : null;
   };
-  const columns = useMemo(() => [
-    {
-      header: "Comic Metadata",
-      footer: 1,
-      columns: [
-        {
-          header: "File Details",
-          id: "fileDetails",
-          minWidth: 400,
-          accessorKey: "_source",
-          cell: info => {
-            return <MetadataPanel data={info.getValue()} />;
+  const columns = useMemo(
+    () => [
+      {
+        header: "Comic Metadata",
+        footer: 1,
+        columns: [
+          {
+            header: "File Details",
+            id: "fileDetails",
+            minWidth: 400,
+            accessorKey: "_source",
+            cell: (info) => {
+              return <MetadataPanel data={info.getValue()} />;
+            },
           },
-        },
-        {
-          header: "ComicInfo.xml",
-          accessorKey: "_source.sourcedMetadata.comicInfo",
-          align: "center",
-          minWidth: 250,
-          cell: info =>
-            !isEmpty(info.getValue()) ? (
-              <ComicInfoXML data={info.getValue()} />
-            ) : (
-              <span className="tag mt-5">No ComicInfo.xml</span>
-            ),
-        },
-      ],
-    },
-    {
-      header: "Additional Metadata",
-      columns: [
-        {
-          header: "Publisher",
-          accessorKey:
-            "_source.sourcedMetadata.comicvine.volumeInformation",
-          cell: info => {
-            return (
-              !isNil(info.getValue()) && (
-                <h6 className="is-size-7 has-text-weight-bold">
-                  {info.getValue().publisher.name}
-                </h6>
-              )
-            );
+          {
+            header: "ComicInfo.xml",
+            accessorKey: "_source.sourcedMetadata.comicInfo",
+            align: "center",
+            minWidth: 250,
+            cell: (info) =>
+              !isEmpty(info.getValue()) ? (
+                <ComicInfoXML data={info.getValue()} />
+              ) : (
+                <span className="tag mt-5">No ComicInfo.xml</span>
+              ),
           },
-        },
-        {
-          header: "Something",
-          accessorKey: "_source.acquisition.source.wanted",
-          cell: info => {
-            !isUndefined(info.getValue()) ?
-              <WantedStatus value={info.getValue().toString()} /> : "Nothing";
+        ],
+      },
+      {
+        header: "Additional Metadata",
+        columns: [
+          {
+            header: "Publisher",
+            accessorKey: "_source.sourcedMetadata.comicvine.volumeInformation",
+            cell: (info) => {
+              return (
+                !isNil(info.getValue()) && (
+                  <h6 className="is-size-7 has-text-weight-bold">
+                    {info.getValue().publisher.name}
+                  </h6>
+                )
+              );
+            },
           },
-        },
-      ],
-    }
-  ], []);
-
+          {
+            header: "Something",
+            accessorKey: "_source.acquisition.source.wanted",
+            cell: (info) => {
+              !isUndefined(info.getValue()) ? (
+                <WantedStatus value={info.getValue().toString()} />
+              ) : (
+                "Nothing"
+              );
+            },
+          },
+        ],
+      },
+    ],
+    [],
+  );
 
   /**
    * Pagination control that fetches the next x (pageSize) items
@@ -153,7 +157,7 @@ export const Library = (): ReactElement => {
    * @param {number} pageIndex
    * @param {number} pageSize
    * @returns void
-   *  
+   *
    **/
   const nextPage = useCallback((pageIndex: number, pageSize: number) => {
     dispatch(
@@ -173,7 +177,6 @@ export const Library = (): ReactElement => {
     );
   }, []);
 
-
   /**
    * Pagination control that fetches the previous x (pageSize) items
    * based on the y (pageIndex) offset from the ThreeTwo Elasticsearch index
@@ -199,7 +202,7 @@ export const Library = (): ReactElement => {
             from,
           },
           type: "all",
-          trigger: "libraryPage"
+          trigger: "libraryPage",
         },
       ),
     );
@@ -229,25 +232,27 @@ 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 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> }
+        )}
       </div>
     </section>
   );

src/client/components/Navbar.tsx

@@ -3,15 +3,23 @@ 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";
+import { format, fromUnixTime } from "date-fns";
 
 const Navbar: React.FunctionComponent = (props) => {
   const downloadProgressTick = useSelector(
     (state: RootState) => state.airdcpp.downloadProgressData,
   );
-  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-console.log(airDCPPConfiguration)
+
+  const airDCPPSocketConnectionStatus = useSelector(
+    (state: RootState) => state.airdcpp.isAirDCPPSocketConnected,
+  );
+  const airDCPPSessionInfo = useSelector(
+    (state: RootState) => state.airdcpp.airDCPPSessionInfo,
+  );
+  const socketDisconnectionReason = useSelector(
+    (state: RootState) => state.airdcpp.socketDisconnectionReason,
+  );
   return (
     <nav className="navbar is-fixed-top">
       <div className="navbar-brand">
@@ -74,12 +82,10 @@ console.log(airDCPPConfiguration)
           <div className="navbar-item has-dropdown is-hoverable">
             <a className="navbar-link is-arrowless">
               <i className="fa-solid fa-download"></i>
-              {downloadProgressTick && (
-                <div className="pulsating-circle"></div>
-              )}
+              {downloadProgressTick && <div className="pulsating-circle"></div>}
             </a>
             {!isUndefined(downloadProgressTick) ? (
-              <div className="navbar-dropdown download-progress-meter">
+              <div className="navbar-dropdown is-right">
                 <a className="navbar-item">
                   <DownloadProgressTick data={downloadProgressTick} />
                 </a>              </div>
@@ -87,18 +93,55 @@ console.log(airDCPPConfiguration)
           </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>      
+            {airDCPPSocketConnectionStatus ? (
+              <>
+                <a className="navbar-link is-arrowless has-text-success">
+                  <i className="fa-solid fa-bolt"></i>
+                </a>
+                <div className="navbar-dropdown pt-4 pr-2 pl-2 is-right airdcpp-status">
+                  {/* AirDC++ Session Information */}
+
+                  <p>
+                    Last login was{" "}
+                    <span className="tag">
+                      {format(
+                        fromUnixTime(airDCPPSessionInfo.user.last_login),
+                        "dd MMMM, yyyy",
+                      )}
+                    </span>
+                  </p>
+                  <hr className="navbar-divider" />
+                  <p>
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInfo.user.username}
+                    </span>
+                    connected to{" "}
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInfo.system_info.client_version}
+                    </span>{" "}
+                    with session ID{" "}
+                    <span className="tag has-text-success">
+                      {airDCPPSessionInfo.session_id}
+                    </span>
+                  </p>
+
+                  {/* <pre>{JSON.stringify(airDCPPSessionInfo, null, 2)}</pre> */}
+                </div>
+              </>
+            ) : (
+              <>
+                <a className="navbar-link is-arrowless has-text-danger">
+                  <i className="fa-solid fa-bolt"></i>
+                </a>
+                <div className="navbar-dropdown pr-2 pl-2 is-right">
+                  <pre>
+                    {JSON.stringify(socketDisconnectionReason, null, 2)}
+                  </pre>
+                </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">