🔌 AirDCPP socket refactoring

.babelrc

@@ -7,7 +7,8 @@
   "plugins": [
     "react-hot-loader/babel",
     "@babel/transform-runtime",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-top-level-await"
   ],
   "env": {
     "production": {

package.json

@@ -79,6 +79,7 @@
   "devDependencies": {
     "@babel/cli": "^7.13.10",
     "@babel/core": "^7.13.10",
+    "@babel/plugin-syntax-top-level-await": "^7.14.5",
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.12.13",

src/client/components/AcquisitionPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, ReactElement } from "react";
+import React, { useCallback, useEffect, useState, ReactElement } from "react";
 import {
   search,
   downloadAirDCPPItem,
@@ -7,8 +7,9 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
-import { isEmpty, isNil, map } from "lodash";
-
+import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { getSettings } from "../actions/settings.actions";
+import AirDCPPSocket from "../services/DcppSearchService";
 interface IAcquisitionPanelProps {
   comicBookMetadata: any;
 }
@@ -20,6 +21,10 @@ export const AcquisitionPanel = (
     props.comicBookMetadata.sourcedMetadata.comicvine.volumeInformation.name;
   const sanitizedVolumeName = volumeName.replace(/[^a-zA-Z0-9 ]/g, "");
   const issueName = props.comicBookMetadata.sourcedMetadata.comicvine.name;
+
+  // local state
+  const [ADCPPSocket, setADCPPSocket] = useState({});
+  // Selectors for picking state
   const airDCPPSearchResults = useSelector((state: RootState) => {
     return state.airdcpp.searchResults;
   });
@@ -32,8 +37,22 @@ export const AcquisitionPanel = (
   const searchInstance: SearchInstance = useSelector(
     (state: RootState) => state.airdcpp.searchInstance,
   );
+  const airDCPPClientSettings = useSelector(
+    (state: RootState) => state.settings.data,
+  );
 
   const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getSettings());
+    if (!isUndefined(airDCPPClientSettings[0])) {
+      const dcppSocket = new AirDCPPSocket({
+        hostname: `${airDCPPClientSettings[0].directConnect.client.hostname}`,
+      });
+      setADCPPSocket(dcppSocket);
+    }
+  }, [dispatch, airDCPPClientSettings.length]);
+
+  console.log(ADCPPSocket);
   const getDCPPSearchResults = useCallback(
     (searchQuery) => {
       dispatch(search(searchQuery));

src/client/components/AirDCPPSettingsForm.tsx

@@ -51,7 +51,9 @@ export const AirDCPPSettingsForm = (): ReactElement => {
               <p className="control">
                 <span className="select">
                   <Field name="protocol" component="select">
-                    <option value="http://">http://</option>
+                    <option value="http://" defaultValue={"http://"}>
+                      http://
+                    </option>
                     <option value="https://">https://</option>
                   </Field>
                 </span>

src/client/constants/settings/settingsMenu.json

@@ -54,5 +54,20 @@
         "displayName": "Options"
       }
     ]
+  },
+  {
+    "id": 4,
+    "category": "acknowledgments",
+    "displayName": "Acknowledgments",
+    "children": [
+      {
+        "id": "testers",
+        "displayName": "Testers"
+      },
+      {
+        "id": "software",
+        "displayName": "Software"
+      }
+    ]
   }
 ]

src/client/services/DcppSearchService.ts

@@ -1,19 +1,20 @@
 import { Socket } from "airdcpp-apisocket";
 
-const options = {
-  url: "wss://sab.rishighan.com/api/v1/",
-  autoReconnect: false,
-  reconnectInterval: 5,
-  logLevel: "verbose",
-  ignoredListenerEvents: [
-    "transfer_statistics",
-    "hash_statistics",
-    "hub_counts_updated",
-  ],
-};
-
-const APISocket = Socket(options, window.WebSocket as any);
-type SocketType = typeof APISocket;
-export { SocketType as APISocket };
-
-export default APISocket;
+class AirDCPPSocket {
+  constructor(configuration) {
+    const options = {
+      url: `wss://${configuration.hostname}/api/v1/`,
+      autoReconnect: false,
+      reconnectInterval: 5,
+      logLevel: "verbose",
+      ignoredListenerEvents: [
+        "transfer_statistics",
+        "hash_statistics",
+        "hub_counts_updated",
+      ],
+    };
+    const AirDCPPSocketInstance = Socket(options, window.WebSocket as any);
+    return AirDCPPSocketInstance;
+  }
+}
+export default AirDCPPSocket;

tsconfig.json

@@ -11,12 +11,7 @@
     "outDir": "./dist/",
     "skipLibCheck": true,
     "resolveJsonModule": true,
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext",
-      "webworker"
-    ]
+    "lib": ["dom", "dom.iterable", "esnext", "webworker"]
   },
   "settings": {
     "eslint.workingDirectories": [
@@ -26,11 +21,6 @@
       }
     ]
   },
-  "exclude": [
-    "./src/server "
-  ],
-  "include": [
-    "./src/client/*",
-    "./src/client/types/**/*.d.ts"
-  ]
-}
+  "exclude": ["./src/server "],
+  "include": ["./src/client/*", "./src/client/types/**/*.d.ts"]
+}

webpack.config.js

@@ -18,6 +18,9 @@ module.exports = () => {
     stats: {
       children: true,
     },
+    experiments: {
+      topLevelAwait: true,
+    },
     module: {
       rules: [
         {