🏗 Wiring up Settings form

src/client/actions/settings.actions.tsx

@@ -1,13 +1,31 @@
 import axios from "axios";
 import { IExtractionOptions } from "threetwo-ui-typings";
-import {} from "../constants/action-types";
+import { SETTINGS_OBJECT_FETCHED } from "../constants/action-types";
 import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
 
-export const saveSettings = (settingsObject) => async (dispatch) => {
+export const saveSettings =
+  (settingsObject, airdcppUserSettings) => async (dispatch) => {
+    const result = await axios({
+      url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`,
+      method: "POST",
+      data: { settingsObject, airdcppUserSettings },
+    });
+    dispatch({
+      type: SETTINGS_OBJECT_FETCHED,
+      data: result.data,
+    });
+  };
+
+export const getSettings = (settingsKey?) => async (dispatch) => {
   const result = await axios({
-    url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`,
+    url: `${SETTINGS_SERVICE_BASE_URI}/getSettings`,
     method: "POST",
-    data: settingsObject,
+    data: settingsKey,
   });
-  console.log(result);
+  {
+    dispatch({
+      type: SETTINGS_OBJECT_FETCHED,
+      data: result.data,
+    });
+  }
 };

src/client/components/AirDCPPSettingsForm.tsx

@@ -1,91 +1,180 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } from "react";
 import { Form, Field } from "react-final-form";
-import { useDispatch } from "react-redux";
-import { saveSettings } from "../actions/settings.actions";
+import { useDispatch, useSelector } from "react-redux";
+import { saveSettings, getSettings } from "../actions/settings.actions";
 import axios from "axios";
+import { isUndefined, isEmpty } from "lodash";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
+  const airdcppClientSettings = useSelector(
+    (state: RootState) => state.settings.data[0],
+  );
+
   const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getSettings());
+  }, [dispatch]);
+
   const onSubmit = async (values) => {
     try {
+      const fqdn = values.protocol + values.hostname;
       const airdcppResponse = await axios({
-        url: `https://${values.airdcpp_hostname}/api/v1/sessions/authorize`,
+        url: `${fqdn}/api/v1/sessions/authorize`,
         method: "POST",
         data: {
-          username: values.airdcpp_username,
-          password: values.airdcpp_password,
+          username: values.username,
+          password: values.password,
         },
       });
       if (airdcppResponse.status === 200) {
-        dispatch(saveSettings(values));
+        dispatch(saveSettings(values, airdcppResponse.data));
       }
     } catch (error) {
       console.log(error);
     }
   };
   const validate = async () => {};
+  const initFormData = !isUndefined(airdcppClientSettings)
+    ? airdcppClientSettings.directConnect.client
+    : null;
   return (
-    <Form
-      onSubmit={onSubmit}
-      validate={validate}
-      render={({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <h2>AirDC++ Connection Information</h2>
-          <div className="field">
+    <>
+      <Form
+        onSubmit={onSubmit}
+        validate={validate}
+        initialValues={initFormData}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <h2>AirDC++ Connection Information</h2>
             <label className="label">AirDC++ Hostname</label>
-            <div className="control">
-              <Field
-                name="airdcpp_hostname"
-                component="input"
-                className="input"
-                placeholder="111.222.333.4 / one.airdcpp.com"
-              />
+            <div className="field has-addons">
+              <p className="control">
+                <span className="select">
+                  <Field name="protocol" component="select">
+                    <option value="http://">http://</option>
+                    <option value="https://">https://</option>
+                  </Field>
+                </span>
+              </p>
+              <p className="control is-expanded">
+                <Field
+                  name="hostname"
+                  component="input"
+                  className="input"
+                  placeholder="AirDC++ host IP / hostname"
+                />
+              </p>
             </div>
-          </div>
-          <div className="field">
-            <div className="is-clearfix">
-              <label className="label">Credentials</label>
-            </div>
-            <div className="field-body">
-              <div className="field">
-                <p className="control is-expanded has-icons-left">
-                  <Field
-                    name="airdcpp_username"
-                    component="input"
-                    className="input"
-                    placeholder="Username"
-                  />
-                  <span className="icon is-small is-left">
-                    <i className="fa-solid fa-user-ninja"></i>
-                  </span>
-                </p>
+            <div className="field">
+              <div className="is-clearfix">
+                <label className="label">Credentials</label>
               </div>
-              <div className="field">
-                <p className="control is-expanded has-icons-left has-icons-right">
-                  <Field
-                    name="airdcpp_password"
-                    component="input"
-                    type="password"
-                    className="input"
-                    placeholder="Password"
-                  />
-                  <span className="icon is-small is-left">
-                    <i className="fa-solid fa-lock"></i>
-                  </span>
-                  <span className="icon is-small is-right">
-                    <i className="fas fa-check"></i>
-                  </span>
-                </p>
+              <div className="field-body">
+                <div className="field">
+                  <p className="control is-expanded has-icons-left">
+                    <Field
+                      name="username"
+                      component="input"
+                      className="input"
+                      placeholder="Username"
+                    />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-user-ninja"></i>
+                    </span>
+                  </p>
+                </div>
+                <div className="field">
+                  <p className="control is-expanded has-icons-left has-icons-right">
+                    <Field
+                      name="password"
+                      component="input"
+                      type="password"
+                      className="input"
+                      placeholder="Password"
+                    />
+                    <span className="icon is-small is-left">
+                      <i className="fa-solid fa-lock"></i>
+                    </span>
+                    <span className="icon is-small is-right">
+                      <i className="fas fa-check"></i>
+                    </span>
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
 
-          <button type="submit" className="button is-primary">
-            Submit
-          </button>
-        </form>
-      )}
-    />
+            <button type="submit" className="button is-primary">
+              {!isEmpty(initFormData) ? "Update" : "Save"}
+            </button>
+          </form>
+        )}
+      />
+      {!isUndefined(airdcppClientSettings) &&
+      !isEmpty(airdcppClientSettings) ? (
+        <div className="mt-4 is-clearfix">
+          <div className="card">
+            <div className="card-content">
+              <span className="icon is-medium is-pulled-right">
+                <i className="fa-solid fa-circle has-text-success"></i>
+              </span>
+              <div className="content is-size-7">
+                <dl>
+                  <dt>{airdcppClientSettings._id}</dt>
+                  <dt>
+                    Client version:{" "}
+                    {
+                      airdcppClientSettings.directConnect.client
+                        .airdcppUserSettings.system_info.client_version
+                    }
+                  </dt>
+                  <dt>
+                    Hostname:{" "}
+                    {
+                      airdcppClientSettings.directConnect.client
+                        .airdcppUserSettings.system_info.hostname
+                    }
+                  </dt>
+                  <dt>
+                    Platform:{" "}
+                    {
+                      airdcppClientSettings.directConnect.client
+                        .airdcppUserSettings.system_info.platform
+                    }
+                  </dt>
+
+                  <dt>
+                    Username:{" "}
+                    {
+                      airdcppClientSettings.directConnect.client
+                        .airdcppUserSettings.user.username
+                    }
+                  </dt>
+
+                  <dt>
+                    Active Sessions:{" "}
+                    {
+                      airdcppClientSettings.directConnect.client
+                        .airdcppUserSettings.user.active_sessions
+                    }
+                  </dt>
+                  <dt>
+                    Permissions:{" "}
+                    <pre>
+                      {JSON.stringify(
+                        airdcppClientSettings.directConnect.client
+                          .airdcppUserSettings.user.permissions,
+                        undefined,
+                        2,
+                      )}
+                    </pre>
+                  </dt>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 };
 

src/client/components/Library.tsx

@@ -14,6 +14,7 @@ import { Form, Field } from "react-final-form";
 import { getComicBooks } from "../actions/fileops.actions";
 import { isNil } from "lodash";
 import { IMPORT_SERVICE_HOST } from "../constants/endpoints";
+import { Link } from "react-router-dom";
 
 interface IComicBookLibraryProps {
   matches?: unknown;
@@ -142,6 +143,26 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
             </div>
           )}
         />
+        <div className="column one-fifth">
+          <div className="field has-addons">
+            <p className="control">
+              <button className="button">
+                <span className="icon is-small">
+                  <i className="fa-solid fa-list"></i>
+                </span>
+              </button>
+            </p>
+            <p className="control">
+              <button className="button">
+                <Link to="/library-grid">
+                  <span className="icon is-small">
+                    <i className="fa-solid fa-image"></i>
+                  </span>
+                </Link>
+              </button>
+            </p>
+          </div>
+        </div>
       </div>
     );
   };
@@ -292,6 +313,7 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
     <section className="container">
       <div className="section">
         <h1 className="title">Library</h1>
+
         <SearchBar />
         <div>
           <div className="library">

src/client/components/Navbar.tsx

@@ -46,9 +46,7 @@ const Navbar: React.FunctionComponent = (props) => {
           <Link to="/library" className="navbar-item">
             Library
           </Link>
-          <Link to="/library-grid" className="navbar-item">
-            Library Grid
-          </Link>
+
           <Link to="/search" className="navbar-item">
             Search
           </Link>

src/client/components/Settings.tsx

@@ -34,10 +34,8 @@ export const Settings = (props: ISettingsProps): ReactElement => {
           <aside className="menu">
             {map(settingsObject, (settingObject, idx) => {
               return (
-                <>
-                  <p className="menu-label" key={idx}>
-                    {settingObject.category}
-                  </p>
+                <div key={idx}>
+                  <p className="menu-label">{settingObject.category}</p>
                   {/* First level children */}
                   {!isUndefined(settingObject.children) ? (
                     <ul className="menu-list" key={settingObject.id}>
@@ -78,7 +76,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
                       })}
                     </ul>
                   ) : null}
-                </>
+                </div>
               );
             })}
           </aside>

src/client/reducers/settings.reducer.ts

@@ -4,7 +4,7 @@ import {
   SETTINGS_CALL_IN_PROGRESS,
 } from "../constants/action-types";
 const initialState = {
-  settings: {},
+  data: {},
   inProgress: false,
 };