📑 Added a AirDCPP Settings form WIP

src/client/components/AirDCPPSettingsForm.tsx

@@ -0,0 +1,54 @@
+import React, { ReactElement } from "react";
+import { Form, Field } from "react-final-form";
+
+export const AirDCPPSettingsForm = (): ReactElement => {
+  const onSubmit = () => {};
+  const validate = async () => {};
+
+  return (
+    <Form
+      onSubmit={onSubmit}
+      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"
+            />
+          </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>
+        </form>
+      )}
+    />
+  );
+};
+
+export default AirDCPPSettingsForm;

src/client/components/ComicDetail.tsx

@@ -260,9 +260,7 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
             <div className="mt-5">
               {!isEmpty(extractedComicBookArchive) ? (
                 <DnD data={extractedComicBookArchive} />
-              ) : (
-                "..."
-              )}
+              ) : null}
             </div>
             {!isEmpty(extractedComicBookArchive) ? (
               <div className="column mt-5">

src/client/components/Settings.tsx

@@ -1,52 +1,71 @@
 import React, { useState, useEffect, useCallback, ReactElement } from "react";
+import { AirDCPPSettingsForm } from "./AirDCPPSettingsForm";
+import settingsObject from "../constants/settings/settingsMenu.json";
+import { isUndefined, map } from "lodash";
 
 interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
+  const [active, setActive] = useState("gen-db");
   return (
     <section className="container">
       <div className="columns">
         <div className="section column is-one-quarter">
           <h1 className="title">Settings</h1>
           <aside className="menu">
-            <p className="menu-label">General</p>
-            <ul className="menu-list">
-              <li>
-                <a>Dashboard</a>
-              </li>
-              <li>
-                <a>Global Search</a>
-              </li>
-            </ul>
-            <p className="menu-label">Acquisition</p>
-            <ul className="menu-list">
-              <li>
-                <a className="is-active">AirDC++</a>
-                <ul>
-                  <li>
-                    <a>Connection</a>
-                  </li>
-                  <li>
-                    <a>Hubs</a>
-                  </li>
-                  <li>
-                    <a>Additional Configuration</a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-            <p className="menu-label">ComicVine</p>
-            <ul className="menu-list">
-              <li>
-                <a>API</a>
-              </li>
-              <li>
-                <a>Configuration</a>
-              </li>
-            </ul>
+            {map(settingsObject, (settingObject, idx) => {
+              return (
+                <>
+                  <p className="menu-label" key={idx}>
+                    {settingObject.category}
+                  </p>
+                  {/* First level children */}
+                  {!isUndefined(settingObject.children) ? (
+                    <ul className="menu-list" key={settingObject.id}>
+                      {map(settingObject.children, (item, idx) => {
+                        return (
+                          <li key={item.id}>
+                            <a
+                              className={
+                                item.id.toString() === active ? "is-active" : ""
+                              }
+                              onClick={() => setActive(item.id.toString())}
+                            >
+                              {item.displayName}
+                            </a>
+                            {/* Second level children */}
+                            {!isUndefined(item.children) ? (
+                              <ul>
+                                {map(item.children, (item, idx) => (
+                                  <li key={item.id}>
+                                    <a
+                                      className={
+                                        item.id.toString() === active
+                                          ? "is-active"
+                                          : ""
+                                      }
+                                      onClick={() =>
+                                        setActive(item.id.toString())
+                                      }
+                                    >
+                                      {item.displayName}
+                                    </a>
+                                  </li>
+                                ))}
+                              </ul>
+                            ) : null}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  ) : null}
+                </>
+              );
+            })}
           </aside>
         </div>
       </div>
+      <AirDCPPSettingsForm />
     </section>
   );
 };