❌ AirDCPP code cleaned up from App.tsx

src/client/components/App.tsx

@@ -27,72 +27,8 @@ import {
  * 2. Handles errors in case the connection to AirDC++ is not established or terminated
  * @returns void
  */
-const AirDCPPSocketComponent = (): ReactElement => {
+
-  //   const airDCPPConfiguration = useContext(AirDCPPSocketContext);
-  //   const dispatch = useDispatch();
-  //
-  //   useEffect(() => {
-  //     const initializeAirDCPPEventListeners = async () => {
-  //       if (
-  //         !isUndefined(airDCPPConfiguration.airDCPPState) &&
-  //         !isEmpty(airDCPPConfiguration.airDCPPState.settings) &&
-  //         !isEmpty(airDCPPConfiguration.airDCPPState.socket)
-  //       ) {
-  //         await airDCPPConfiguration.airDCPPState.socket.addListener(
-  //           "queue",
-  //           "queue_bundle_added",
-  //           async (data) => {
-  //             console.log("JEMEN:", data);
-  //           },
-  //         );
-  //         // download tick listener
-  //         await airDCPPConfiguration.airDCPPState.socket.addListener(
-  //           `queue`,
-  //           "queue_bundle_tick",
-  //           async (downloadProgressData) => {
-  //             dispatch({
-  //               type: AIRDCPP_DOWNLOAD_PROGRESS_TICK,
-  //               downloadProgressData,
-  //             });
-  //           },
-  //         );
-  //         // download complete listener
-  //         await airDCPPConfiguration.airDCPPState.socket.addListener(
-  //           `queue`,
-  //           "queue_bundle_status",
-  //           async (bundleData) => {
-  //             let count = 0;
-  //             if (bundleData.status.completed && bundleData.status.downloaded) {
-  //               // dispatch the action for raw import, with the metadata
-  //               if (count < 1) {
-  //                 console.log(`[AirDCPP]: Download complete.`);
-  //                 dispatch({
-  //                   type: LS_SINGLE_IMPORT,
-  //                   meta: { remote: true },
-  //                   data: bundleData,
-  //                 });
-  //                 count += 1;
-  //               }
-  //             }
-  //           },
-  //         );
-  //         console.log(
-  //           "[AirDCPP]: Listener registered - listening to queue bundle download ticks",
-  //         );
-  //         console.log(
-  //           "[AirDCPP]: Listener registered - listening to queue bundle changes",
-  //         );
-  //         console.log(
-  //           "[AirDCPP]: Listener registered - listening to transfer completion",
-  //         );
-  //       }
-  //     };
-  //     initializeAirDCPPEventListeners();
-  //   }, [airDCPPConfiguration]);
-  return <></>;
-};
 export const App = (): ReactElement => {
-  console.log("randitva");
   // useEffect(() => {
   //   // Check if there is a sessionId in localStorage
   //   const sessionId = localStorage.getItem("sessionId");
@@ -110,12 +46,7 @@ export const App = (): ReactElement => {
   //     });
   //   }
   // }, []);
-  return (
+  return <>{/* The rest of your application */}</>;
-    <>
-      {/* The rest of your application */}
-      {/* <AirDCPPSocketComponent /> */};
-    </>
-  );
 };
 
 export default App;

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -6,18 +6,21 @@ import { useStore } from "../../../store/index";
 import { useShallow } from "zustand/react/shallow";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
-  // const airDCPPSettings = useContext(AirDCPPSocketContext);
+  // cherry-picking selectors for:
+  // 1. initial values for the form
+  // 2. If initial values are present, get the socket information to display
   const {
     airDCPPSocketConnected,
-    disconnectionInfo,
+    airDCPPDisconnectionInfo,
-    socketConnectionInformation,
+    airDCPPSocketConnectionInformation,
     airDCPPClientConfiguration,
   } = useStore(
     useShallow((state) => ({
       airDCPPSocketConnected: state.airDCPPSocketConnected,
-      disconnectionInfo: state.disconnectionInfo,
+      airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
       airDCPPClientConfiguration: state.airDCPPClientConfiguration,
-      socketConnectionInformation: state.socketConnectionInformation,
+      airDCPPSocketConnectionInformation:
+        state.airDCPPSocketConnectionInformation,
     })),
   );
 
@@ -44,8 +47,10 @@ export const AirDCPPSettingsForm = (): ReactElement => {
         formHeading={"Configure AirDC++"}
       />
 
-      {!isEmpty(socketConnectionInformation) ? (
+      {!isEmpty(airDCPPSocketConnectionInformation) ? (
-        <AirDCPPSettingsConfirmation settings={socketConnectionInformation} />
+        <AirDCPPSettingsConfirmation
+          settings={airDCPPSocketConnectionInformation}
+        />
       ) : null}
 
       {!isEmpty(airDCPPClientConfiguration) ? (

src/client/store/index.ts

@@ -1,13 +1,14 @@
 import { create } from "zustand";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty } from "lodash";
 import AirDCPPSocket from "../services/DcppSearchService";
 import axios from "axios";
 
 export const useStore = create((set, get) => ({
+  // AirDC++ state
   airDCPPSocketConnected: false,
-  disconnectionInfo: {},
+  airDCPPDisconnectionInfo: {},
   airDCPPClientConfiguration: {},
-  socketConnectionInformation: {},
+  airDCPPSocketConnectionInformation: {},
   setAirDCPPSocketConnectionStatus: () =>
     set((value) => ({
       airDCPPSocketConnected: value,
@@ -15,6 +16,7 @@ export const useStore = create((set, get) => ({
   getAirDCPPConnectionStatus: () => {
     const airDCPPSocketConnectionStatus = get().airDCPPSocketConnected;
   },
+  // Socket.io state
 }));
 
 const { getState, setState } = useStore;
@@ -44,11 +46,45 @@ const initializeAirDCPPSocket = async (configuration) => {
       airDCPPSocketConnected: false,
     });
   };
+  // AirDC++ Socket-related connection and post-connection
   // Attempt connection
-  const socketConnectionInformation = await initializedAirDCPPSocket.connect();
+  const airDCPPSocketConnectionInformation =
+    await initializedAirDCPPSocket.connect();
   setState({
-    socketConnectionInformation,
+    airDCPPSocketConnectionInformation,
   });
+
+  // Set up event listeners
+  initializedAirDCPPSocket.addListener(
+    `queue`,
+    "queue_bundle_tick",
+    async (downloadProgressData) => {
+      console.log(downloadProgressData);
+    },
+  );
+  initializedAirDCPPSocket.addListener(
+    "queue",
+    "queue_bundle_added",
+    async (data) => {
+      console.log("JEMEN:", data);
+    },
+  );
+
+  initializedAirDCPPSocket.addListener(
+    `queue`,
+    "queue_bundle_status",
+    async (bundleData) => {
+      let count = 0;
+      if (bundleData.status.completed && bundleData.status.downloaded) {
+        // dispatch the action for raw import, with the metadata
+        if (count < 1) {
+          console.log(`[AirDCPP]: Download complete.`);
+
+          count += 1;
+        }
+      }
+    },
+  );
 };
 
 // 1. get settings from mongo