📑 Added a AirDCPP Settings form WIP

docker-compose.yml

@@ -10,6 +10,7 @@ services:
     ports:
       - "8050:8050"
       - "3050:3050"
+      - "8051:8051"
     depends_on:
       - rabbitmq 
       - nginx

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

src/client/constants/settings/settingsMenu.json

@@ -0,0 +1,58 @@
+[
+  {
+    "id": 1,
+    "category": "general",
+    "displayName": "General",
+    "children": [
+      {
+        "id": "gen-db",
+        "displayName": "Dashboard"
+      },
+      {
+        "id": "gen-gls",
+        "displayName": "Global Search"
+      }
+    ]
+  },
+
+  {
+    "id": 2,
+    "category": "acquisition",
+    "displayName": "Acquisition",
+    "children": [
+      {
+        "id": "adc",
+        "displayName": "AirDC++",
+        "children": [
+          {
+            "id": "adc-connection",
+            "displayName": "Connection"
+          },
+          {
+            "id": "adc-hubs",
+            "displayName": "Hubs"
+          },
+          {
+            "id": "adc-add-config",
+            "displayName": "Additional Configuration"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "category": "comicvine",
+    "displayName": "Comic Vine",
+    "children": [
+      {
+        "id": "api",
+        "displayName": "API"
+      },
+      {
+        "id": "options",
+        "displayName": "Options"
+      }
+    ]
+  }
+]

src/client/shared/utils/object.utils.ts

@@ -20,3 +20,35 @@ const changes = (object, base) => {
     }
   });
 };
+
+
+export type TraverseFunction<T> = (
+  obj: T,
+  prop: string,
+  value: unknown,
+  scope: string[],
+) => void;
+
+/**
+ * Deep diff between two object, using lodash
+ * @param  {Object} object Object to traverse
+ * @param  {Object} fn     Callback function
+ * @return {Object}        Return a new object who represent the diff
+ */
+export const traverseObject = <T = Record<string, unknown>>(
+  object: T,
+  fn: TraverseFunction<T>,
+): void => traverseInternal(object, fn, []);
+
+const traverseInternal = <T = Record<string, unknown>>(
+  object: T,
+  fn: TraverseFunction<T>,
+  scope: string[] = [],
+): void => {
+  Object.entries(object).forEach(([key, value]) => {
+    fn.apply(this, [object, key, value, scope]);
+    if (value !== null && typeof value === "object") {
+      traverseInternal(value, fn, scope.concat(key));
+    }
+  });
+};