🔧 Wiring up Settings page

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

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(

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>
   );
 };