🔧 Several CORS related fixes

.gitignore

@@ -13,4 +13,5 @@ tests/**/*.jsx
 src/client/assets/scss/App.css.map
 yarn-error.log
 .nova
-environment.list
+environment.list
+.env

docker-compose.yml

@@ -12,7 +12,7 @@ services:
       - $COMICS_DIRECTORY:/comics
       - $USERDATA_DIRECTORY:/userdata
     ports:
-      - "8050:8050"
+      # - "8050:8050"
       - "3050:3050"
     links:
       - importapi
@@ -175,7 +175,7 @@ services:
     ports:
       - 8050:80
     environment:
-      - TARGET_DOMAIN=ghost
+      - TARGET_DOMAIN=0.0.0.0
 
   # elasticsearch:
   #   image: docker.elastic.co/elasticsearch/elasticsearch:7.10.0

src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -1,34 +1,34 @@
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useState, useContext } from "react";
 import { Form, Field } from "react-final-form";
-import axios from "axios";
 import { useDispatch } from "react-redux";
-import { isEmpty, isUndefined } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 import Select from "react-select";
 import { saveSettings } from "../../actions/settings.actions";
-import { CORS_PROXY_SERVER_URI } from "../../constants/endpoints";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 
 export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
   const { settings } = airDCPPClientUserSettings;
   const dispatch = useDispatch();
   const [hubList, setHubList] = useState([]);
-
+  const { ADCPPSocket } = useContext(AirDCPPSocketContext);
   useEffect(() => {
-    if (!isEmpty(settings)) {
+    (async () => {
-      axios({
+      if (!isEmpty(settings)) {
-        url: `${CORS_PROXY_SERVER_URI}${settings.directConnect.client.host.protocol}://${settings.directConnect.client.host.hostname}/api/v1/hubs`,
+        console.log(ADCPPSocket);
-        method: "GET",
+        await ADCPPSocket.connect(
-        headers: {
+          settings.directConnect.client.host.username,
-          Authorization: `${settings.directConnect.client.airDCPPUserSettings.auth_token}`,
+          settings.directConnect.client.host.password,
-        },
+          true,
-      }).then((hubs) => {
+        );
-        const hubSelectionOptions = hubs.data.map(({ hub_url, identity }) => ({
+        const hubs = await ADCPPSocket.get(`hubs`);
+        const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
           value: hub_url,
           label: identity.name,
         }));
 
         setHubList(hubSelectionOptions);
-      });
+      }
-    }
+    })();
   }, []);
 
   const onSubmit = (values) => {

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -6,7 +6,7 @@ import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import axios from "axios";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
 import AirDCPPSocket from "../../services/DcppSearchService";
-import { isUndefined, isEmpty } from "lodash";
+import { isUndefined, isEmpty, isNil } from "lodash";
 import { CORS_PROXY_SERVER_URI } from "../../constants/endpoints";
 
 export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
@@ -16,19 +16,20 @@ export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
 
   const onSubmit = async (values) => {
     try {
-      const airDCPPResponse = await axios({
+      const socket = new AirDCPPSocket({
-        url: `${CORS_PROXY_SERVER_URI}${values.protocol}://${values.hostname}/api/v1/sessions/authorize`,
+        hostname: `${values.hostname}`,
-        method: "POST",
+        protocol: `${values.protocol}`,
-        data: {
-          username: values.username,
-          password: values.password,
-        },
       });
-      if (airDCPPResponse.status === 200) {
+      const socketConnectionResponse = await socket.connect(
+        values.username,
+        values.password,
+        true,
+      );
+      if (!isNil(socketConnectionResponse.session_id)) {
         dispatch(
           saveSettings({
             host: values,
-            airDCPPUserSettings: airDCPPResponse.data,
+            airDCPPUserSettings: socketConnectionResponse,
           }),
         );
         setADCPPSocket(

src/client/components/Settings.tsx

@@ -1,11 +1,19 @@
-import React, { useState, useEffect, useCallback, ReactElement } from "react";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  ReactElement,
+  useContext,
+} from "react";
 import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
 import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
 import settingsObject from "../constants/settings/settingsMenu.json";
-import { isEmpty, isUndefined, map } from "lodash";
+import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { useDispatch, useSelector } from "react-redux";
 import { getSettings } from "../actions/settings.actions";
+import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
+import AirDCPPSocket from "../services/DcppSearchService";
 
 interface ISettingsProps {}
 
@@ -15,10 +23,24 @@ export const Settings = (props: ISettingsProps): ReactElement => {
     (state: RootState) => state.settings.data,
   );
   const dispatch = useDispatch();
+  const { ADCPPSocket, setADCPPSocket } = useContext(AirDCPPSocketContext);
   useEffect(() => {
     dispatch(getSettings());
   }, []);
+
+  useEffect(() => {
+    if (!isEmpty(airDCPPClientSettings)) {
+      console.log(airDCPPClientSettings);
+      setADCPPSocket(
+        new AirDCPPSocket({
+          hostname: `${airDCPPClientSettings.directConnect.client.host.hostname}`,
+          protocol: `${airDCPPClientSettings.directConnect.client.host.protocol}`,
+        }),
+      );
+    }
+  }, [airDCPPClientSettings]);
   const [active, setActive] = useState("gen-db");
+
   const settingsContent = [
     {
       id: "adc-hubs",

src/server/index.ts

@@ -6,22 +6,32 @@ import path from "path";
 // call express
 const app: Express = express(); // define our app using express
 
+const port: number = Number(process.env.PORT) || 8050; // set our port
+
+// Configure app to respond with these headers for CORS purposes
+app.use(function (req, res, next) {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header(
+    "Access-Control-Allow-Headers",
+    "Origin, X-Requested-With, Content-Type, Accept",
+  );
+  next();
+});
+
 // configure app to use bodyParser for
 // Getting data from body of requests
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
-
+//
-const port: number = Number(process.env.PORT) || 8050; // set our port
+// app.get("/", (req: Request, res: Response) => {
-
+//   console.log("sending index.html");
-app.get("/", (req: Request, res: Response) => {
+//   res.sendFile(path.resolve(__dirname, "../dist/index.html"));
-  console.log("sending index.html");
+// });
-  res.sendFile(path.resolve(__dirname, "../dist/index.html"));
-});
 
 // REGISTER ROUTES
 // all of the routes will be prefixed with /api
-const routes: Router[] = Object.values(router);
+// const routes: Router[] = Object.values(router);
-app.use("/api", routes);
+// app.use("/api", routes);
 
 // Send index.html on root request
 app.use(express.static("dist"));