🔌 Cleaned up styling for AirDC++ socket status

src/client/actions/airdcpp.actions.tsx

@@ -38,18 +38,20 @@ function sleep(ms: number): Promise<NodeJS.Timeout> {
 }
 
 export const toggleAirDCPPSocketConnectionStatus =
-  (status: String) => async (dispatch) => {
+  (status: String, payload?: any) => async (dispatch) => {
     console.log("sanul", status);
     switch (status) {
       case "connected":
         dispatch({
           type: AIRDCPP_SOCKET_CONNECTED,
+          data: payload,
         });
         break;
 
       case "disconnected":
         dispatch({
           type: AIRDCPP_SOCKET_DISCONNECTED,
+          data: payload,
         });
         break;
 

src/client/assets/scss/App.scss

@@ -62,6 +62,10 @@ pre {
     margin-left: -300px;
     min-width: 500px;
   }
+  .airdcpp-status {
+    min-width: 300px;
+    line-height: 1.7rem;
+  }
   body {
     background: #454a59;
   }

src/client/components/Navbar.tsx

@@ -4,16 +4,22 @@ import { DownloadProgressTick } from "./ComicDetail/DownloadProgressTick";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { isUndefined } from "lodash";
+import { format, fromUnixTime } from "date-fns";
 
 const Navbar: React.FunctionComponent = (props) => {
   const downloadProgressTick = useSelector(
     (state: RootState) => state.airdcpp.downloadProgressData,
   );
 
-  const airDCPPSocketConnectionStatus = useSelector((state: RootState) => {
-    console.log(state);
-    return state.airdcpp.isAirDCPPSocketConnected;
-  });
+  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">
@@ -80,7 +86,7 @@ const Navbar: React.FunctionComponent = (props) => {
               {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>
@@ -90,13 +96,51 @@ const Navbar: React.FunctionComponent = (props) => {
           {/* AirDC++ socket connection status */}
           <div className="navbar-item has-dropdown is-hoverable">
             {airDCPPSocketConnectionStatus ? (
-              <a className="navbar-link is-arrowless has-text-success">
-                <i className="fa-solid fa-bolt"></i>
-              </a>
+              <>
+                <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>
+              <>
+                <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>
 

src/client/context/AirDCPPSocket.tsx

@@ -63,14 +63,20 @@ const AirDCPPSocketContextProvider = ({ children }) => {
 
     // connect and disconnect handlers
     initializedAirDCPPSocket.onConnected = (sessionInfo) => {
-      dispatch(toggleAirDCPPSocketConnectionStatus("connected"));
+      dispatch(toggleAirDCPPSocketConnectionStatus("connected", sessionInfo));
     };
     initializedAirDCPPSocket.onDisconnected = async (
       reason,
       code,
       wasClean,
     ) => {
-      dispatch(toggleAirDCPPSocketConnectionStatus("disconnected"));
+      dispatch(
+        toggleAirDCPPSocketConnectionStatus("disconnected", {
+          reason,
+          code,
+          wasClean,
+        }),
+      );
     };
 
     const socketConnectionInformation = await initializedAirDCPPSocket.connect(

src/client/reducers/airdcpp.reducer.ts

@@ -27,6 +27,8 @@ const initialState = {
   bundles: [],
   transfers: [],
   isAirDCPPSocketConnected: false,
+  airDCPPSessionInfo: {},
+  socketDisconnectionReason: {},
 };
 
 function airdcppReducer(state = initialState, action) {
@@ -103,12 +105,14 @@ function airdcppReducer(state = initialState, action) {
       return {
         ...state,
         isAirDCPPSocketConnected: true,
+        airDCPPSessionInfo: action.data,
       };
 
     case AIRDCPP_SOCKET_DISCONNECTED:
       return {
         ...state,
         isAirDCPPSocketConnected: false,
+        socketDisconnectionReason: action.data,
       };
     case LOCATION_CHANGE:
       return {