From 70debabb53b4af5b33bb4003ad38ba8847a24735 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Tue, 28 Nov 2023 21:18:12 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8E=20Added=20some=20validation=20to?=
 =?UTF-8?q?=20ADC++=20Hubs=20settings=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AirDCPPSettings/AirDCPPHubsForm.tsx       | 88 +++++++++++--------
 1 file changed, 51 insertions(+), 37 deletions(-)

diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
index 21f2fed..6233832 100644
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
@@ -45,6 +45,7 @@ export const AirDCPPHubsForm = (): ReactElement => {
       label: identity.name,
     }));
   }
+  console.log(hubList);
   const { mutate } = useMutation({
     mutationFn: async (values) =>
       await axios({
@@ -66,40 +67,51 @@ export const AirDCPPHubsForm = (): ReactElement => {
     return <Select {...input} {...rest} isClearable isMulti />;
   };
 
+  console.log(settings);
   return (
     <>
-      <Form
-        onSubmit={mutate}
-        validate={validate}
-        render={({ handleSubmit }) => (
-          <form onSubmit={handleSubmit}>
-            <div>
-              <h3 className="title">Hubs</h3>
-              <h6 className="subtitle has-text-grey-light">
-                Select the hubs you want to perform searches against.
-              </h6>
-            </div>
-            <div className="field">
-              <label className="label">AirDC++ Host</label>
-              <div className="control">
-                <Field
-                  name="hubs"
-                  component={SelectAdapter}
-                  className="basic-multi-select"
-                  placeholder="Select Hubs to Search Against"
-                  options={hubList}
-                />
+      {!isEmpty(hubList) ? (
+        <Form
+          onSubmit={mutate}
+          validate={validate}
+          render={({ handleSubmit }) => (
+            <form onSubmit={handleSubmit}>
+              <div>
+                <h3 className="title">Hubs</h3>
+                <h6 className="subtitle has-text-grey-light">
+                  Select the hubs you want to perform searches against.
+                </h6>
               </div>
+              <div className="field">
+                <label className="label">AirDC++ Host</label>
+                <div className="control">
+                  <Field
+                    name="hubs"
+                    component={SelectAdapter}
+                    className="basic-multi-select"
+                    placeholder="Select Hubs to Search Against"
+                    options={hubList}
+                  />
+                </div>
+              </div>
+
+              <button type="submit" className="button is-primary">
+                Submit
+              </button>
+            </form>
+          )}
+        />
+      ) : (
+        <>
+          <article className="message">
+            <div className="message-body">
+              No configured hubs detected in AirDC++. <br />
+              Configure to a hub in AirDC++ and then select a default hub here.
             </div>
-
-            <button type="submit" className="button is-primary">
-              Submit
-            </button>
-          </form>
-        )}
-      />
-
-      {settings?.directConnect?.client.hubs ? (
+          </article>
+        </>
+      )}
+      {!isEmpty(settings?.data.directConnect?.client.hubs) ? (
         <>
           <div className="mt-4">
             <article className="message is-warning">
@@ -110,13 +122,15 @@ export const AirDCPPHubsForm = (): ReactElement => {
             </article>
           </div>
           <div className="box mt-3">
-            <h6>Selected hubs</h6>
-            {settings?.directConnect?.client.hubs.map(({ value, label }) => (
-              <div key={value}>
-                <div>{label}</div>
-                <span className="is-size-7">{value}</span>
-              </div>
-            ))}
+            <h6>Default Hub For Searches:</h6>
+            {settings?.data.directConnect?.client.hubs.map(
+              ({ value, label }) => (
+                <div key={value}>
+                  <div>{label}</div>
+                  <span className="is-size-7">{value}</span>
+                </div>
+              ),
+            )}
           </div>
         </>
       ) : null}