From eda11d3537aa6d4c121e49ccff2cbd14a6dffeaf Mon Sep 17 00:00:00 2001
From: rishighan <rishi.ghan@gmail.com>
Date: Mon, 19 Sep 2022 15:41:32 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20bug=20on=20the=20AirDC++?=
 =?UTF-8?q?=20settings=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/actions/settings.actions.tsx       |  1 -
 .../AirDCPPSettings/AirDCPPSettingsForm.tsx   | 32 +++++++++++++++----
 src/client/context/AirDCPPSocket.tsx          |  2 +-
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/client/actions/settings.actions.tsx b/src/client/actions/settings.actions.tsx
index 194506f..6b1200d 100644
--- a/src/client/actions/settings.actions.tsx
+++ b/src/client/actions/settings.actions.tsx
@@ -16,7 +16,6 @@ export const saveSettings =
       method: "POST",
       data: { settingsPayload, settingsObjectId },
     });
-    console.log(result.data);
     dispatch({
       type: SETTINGS_OBJECT_FETCHED,
       data: result.data,
diff --git a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx
index c0e3734..b2aea7e 100644
--- a/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -4,11 +4,25 @@ import { useDispatch } from "react-redux";
 import { saveSettings, deleteSettings } from "../../actions/settings.actions";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import { isUndefined, isEmpty } from "lodash";
+import { isUndefined, isEmpty, isNil } from "lodash";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   const dispatch = useDispatch();
   const airDCPPSettings = useContext(AirDCPPSocketContext);
+
+  const hostValidator = (hostname: string): string | null => {
+    const hostnameRegex = /[\W]+/gm;
+    try {
+      if (!isUndefined(hostname)) {
+        const matches = hostname.match(hostnameRegex);
+        return (isNil(matches) && matches.length !== 0) ? hostname : "Invalid hostname; it should not contain special characters";
+      }
+    }
+    catch {
+      return null;
+    }
+
+  }
   const onSubmit = useCallback(async (values) => {
     try {
       airDCPPSettings.setSettings(values);
@@ -52,14 +66,18 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                   </Field>
                 </span>
               </p>
-              <p className="control is-expanded">
+              <div className="control is-expanded">
                 <Field
                   name="hostname"
-                  component="input"
-                  className="input"
-                  placeholder="AirDC++ host IP / hostname"
-                />
-              </p>
+                  validate={hostValidator}>
+                  {({ input, meta }) => (
+                    <div>
+                      <input {...input} type="text" placeholder="AirDC++ hostname" className="input" />
+                      {meta.error && meta.touched && <span className="is-size-7 has-text-danger">{meta.error}</span>}
+                    </div>
+                  )}
+                </Field>
+              </div>
               <p className="control">
                 <Field
                   name="port"
diff --git a/src/client/context/AirDCPPSocket.tsx b/src/client/context/AirDCPPSocket.tsx
index 55aab27..d7fbe9f 100644
--- a/src/client/context/AirDCPPSocket.tsx
+++ b/src/client/context/AirDCPPSocket.tsx
@@ -53,7 +53,7 @@ const AirDCPPSocketContextProvider = ({ children }) => {
     } = configuration;
     const initializedAirDCPPSocket = new AirDCPPSocket({
       protocol: `${host.protocol}`,
-      hostname: `${host.hostname}`,
+      hostname: `${host.hostname}:${host.port}`,
     });
 
     const socketConnectionInformation = await initializedAirDCPPSocket.connect(