🔎 Added some validation to ADC++ Hubs settings form

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
+      {!isEmpty(hubList) ? (
-        onSubmit={mutate}
+        <Form
-        validate={validate}
+          onSubmit={mutate}
-        render={({ handleSubmit }) => (
+          validate={validate}
-          <form onSubmit={handleSubmit}>
+          render={({ handleSubmit }) => (
-            <div>
+            <form onSubmit={handleSubmit}>
-              <h3 className="title">Hubs</h3>
+              <div>
-              <h6 className="subtitle has-text-grey-light">
+                <h3 className="title">Hubs</h3>
-                Select the hubs you want to perform searches against.
+                <h6 className="subtitle has-text-grey-light">
-              </h6>
+                  Select the hubs you want to perform searches against.
-            </div>
+                </h6>
-            <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 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>
-
+          </article>
-            <button type="submit" className="button is-primary">
+        </>
-              Submit
+      )}
-            </button>
+      {!isEmpty(settings?.data.directConnect?.client.hubs) ? (
-          </form>
-        )}
-      />
-
-      {settings?.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>
+            <h6>Default Hub For Searches:</h6>
-            {settings?.directConnect?.client.hubs.map(({ value, label }) => (
+            {settings?.data.directConnect?.client.hubs.map(
-              <div key={value}>
+              ({ value, label }) => (
-                <div>{label}</div>
+                <div key={value}>
-                <span className="is-size-7">{value}</span>
+                  <div>{label}</div>
-              </div>
+                  <span className="is-size-7">{value}</span>
-            ))}
+                </div>
+              ),
+            )}
           </div>
         </>
       ) : null}