From 492fd572e2b7a016b51d782ffec7c7815e583ec1 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 15 Oct 2021 23:02:49 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Wiring=20up=20Settings=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-env/threetwo-import-service.env |  2 +-
 src/client/components/ComicDetail.tsx  |  2 --
 src/client/components/Settings.tsx     | 36 +++++++++++++++++++++++++-
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/docker-env/threetwo-import-service.env b/docker-env/threetwo-import-service.env
index 48e6c75..0d75170 100644
--- a/docker-env/threetwo-import-service.env
+++ b/docker-env/threetwo-import-service.env
@@ -1,7 +1,7 @@
 LOGGER=true
 LOGLEVEL=info
 SERVICEDIR=dist/services
-MONGO_URI=mongodb://db:27017/threetwo
+MONGO_URI=mongodb://mongodb:27017/threetwo
 TRANSPORTER=nats://nats:4222
 CALIBRE_PATH=/opt/calibre
 CACHER=Memory
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx
index f166250..9797457 100644
--- a/src/client/components/ComicDetail.tsx
+++ b/src/client/components/ComicDetail.tsx
@@ -44,8 +44,6 @@ type ComicDetailProps = {};
 export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
   const [page, setPage] = useState(1);
   const [visible, setVisible] = useState(false);
-  const [comicBookPagesGridVisible, setComicBookPagesGridVisible] =
-    useState(false);
   const [slidingPanelContentId, setSlidingPanelContentId] = useState("");
 
   const comicVineSearchResults = useSelector(
diff --git a/src/client/components/Settings.tsx b/src/client/components/Settings.tsx
index 221d1ec..8086203 100644
--- a/src/client/components/Settings.tsx
+++ b/src/client/components/Settings.tsx
@@ -7,6 +7,32 @@ interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
+  const settingsContent = [
+    {
+      id: "adc-connection",
+      content: (
+        <>
+          <div className="content">
+            <p>
+              <h3 className="title">AirDC++ Connection Settings</h3>
+              <h6 className="subtitle has-text-grey-light">
+                Configure AirDC++ connection settings such as hostname and
+                credentials
+              </h6>
+            </p>
+          </div>
+        </>
+      ),
+    },
+    {
+      id: "adc-hubs",
+      content: (
+        <>
+          <AirDCPPSettingsForm />
+        </>
+      ),
+    },
+  ];
   return (
     <section className="container">
       <div className="columns">
@@ -64,8 +90,16 @@ export const Settings = (props: ISettingsProps): ReactElement => {
             })}
           </aside>
         </div>
+
+        {/* content for settings */}
+        <div className="section column is-half mt-6">
+          <div className="content">
+            {map(settingsContent, ({ id, content }) =>
+              active === id ? content : null,
+            )}
+          </div>
+        </div>
       </div>
-      <AirDCPPSettingsForm />
     </section>
   );
 };