🔧 AirDCPP Settings form WIP

docker-compose.env

@@ -1 +1 @@
-LIBRARY_SOCKET_HOST=ws://import:3001
+LIBRARY_SOCKET_HOST=import

src/client/components/AirDCPPSettingsForm.tsx

@@ -11,40 +11,20 @@ export const AirDCPPSettingsForm = (): ReactElement => {
       validate={validate}
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
-          <h2>Simple Default Input</h2>
-          <div>
-            <label>First Name</label>
-            <Field
-              name="firstName"
-              component="input"
-              placeholder="First Name"
-            />
+          <h2>Hub Connection Information</h2>
+          <div className="field">
+            <label className="label">Hub URL</label>
+            <div className="control">
+              <Field
+                name="airdcpp_hostname"
+                component="input"
+                className="input"
+                placeholder="adc://hub.url"
+              />
+            </div>
           </div>
 
-          <h2>Render Function</h2>
-          <Field
-            name="bio"
-            render={({ input, meta }) => (
-              <div>
-                <label>Bio</label>
-                <textarea {...input} />
-                {meta.touched && meta.error && <span>{meta.error}</span>}
-              </div>
-            )}
-          />
-
-          <h2>Render Function as Children</h2>
-          <Field name="phone">
-            {({ input, meta }) => (
-              <div>
-                <label>Phone</label>
-                <input type="text" {...input} placeholder="Phone" />
-                {meta.touched && meta.error && <span>{meta.error}</span>}
-              </div>
-            )}
-          </Field>
-
-          <button type="submit">Submit</button>
+          <button type="submit" className="button is-primary">Submit</button>
         </form>
       )}
     />

src/client/components/Dashboard.tsx

@@ -4,7 +4,7 @@ import ZeroState from "./ZeroState";
 import { RecentlyImported } from "./RecentlyImported";
 import { VolumeGroups } from "./VolumeGroups";
 import { getComicBooks } from "../actions/fileops.actions";
-import { isEmpty } from "lodash";
+import { isEmpty, isNil, isUndefined } from "lodash";
 
 export const Dashboard = (): ReactElement => {
   const dispatch = useDispatch();
@@ -22,6 +22,9 @@ export const Dashboard = (): ReactElement => {
   const recentComics = useSelector(
     (state: RootState) => state.fileOps.recentComics,
   );
+  const volumeGroups = useSelector(
+    (state: RootState) => state.fileOps.comicVolumeGroups,
+  );
   return (
     <div className="container">
       <section className="section">
@@ -30,7 +33,7 @@ export const Dashboard = (): ReactElement => {
         {!isEmpty(recentComics) && !isEmpty(recentComics.docs) ? (
           <>
             <RecentlyImported comicBookCovers={recentComics} />
-            <VolumeGroups />
+            {!isEmpty(volumeGroups) ? <VolumeGroups /> : null}
           </>
         ) : (
           <ZeroState