From 843dee30a4a14b4eaa1a8ce2950a32d6a1b4c6d5 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 29 Oct 2021 00:11:51 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20AirDCPP=20Settings=20form=20WIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-compose.env                            |  2 +-
 src/client/components/AirDCPPSettingsForm.tsx | 44 +++++--------------
 src/client/components/Dashboard.tsx           |  7 ++-
 3 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/docker-compose.env b/docker-compose.env
index ffc5c1b..7c4052c 100644
--- a/docker-compose.env
+++ b/docker-compose.env
@@ -1 +1 @@
-LIBRARY_SOCKET_HOST=ws://import:3001
\ No newline at end of file
+LIBRARY_SOCKET_HOST=import
\ No newline at end of file
diff --git a/src/client/components/AirDCPPSettingsForm.tsx b/src/client/components/AirDCPPSettingsForm.tsx
index a1f5d14..9f422ac 100644
--- a/src/client/components/AirDCPPSettingsForm.tsx
+++ b/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>
       )}
     />
diff --git a/src/client/components/Dashboard.tsx b/src/client/components/Dashboard.tsx
index 3e94aad..71b7e65 100644
--- a/src/client/components/Dashboard.tsx
+++ b/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