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,8 +67,10 @@ export const AirDCPPHubsForm = (): ReactElement => {
     return <Select {...input} {...rest} isClearable isMulti />;
   };
 
+  console.log(settings);
   return (
     <>
+      {!isEmpty(hubList) ? (
         <Form
           onSubmit={mutate}
           validate={validate}
@@ -98,8 +101,17 @@ export const AirDCPPHubsForm = (): ReactElement => {
             </form>
           )}
         />
-
-      {settings?.directConnect?.client.hubs ? (
+      ) : (
+        <>
+          <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>
+        </>
+      )}
+      {!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 }) => (
+            <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}