🔧 AirDC++ Settings wired up (first draft)

src/client/actions/settings.actions.tsx

@@ -1,5 +1,4 @@
 import axios from "axios";
-import { IExtractionOptions } from "threetwo-ui-typings";
 import { SETTINGS_OBJECT_FETCHED } from "../constants/action-types";
 import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
 
@@ -10,6 +9,7 @@ export const saveSettings =
       method: "POST",
       data: { settingsObject, airdcppUserSettings },
     });
+    console.log(result.data);
     dispatch({
       type: SETTINGS_OBJECT_FETCHED,
       data: result.data,

src/client/components/AcquisitionPanel.tsx

@@ -44,22 +44,21 @@ export const AcquisitionPanel = (
   const dispatch = useDispatch();
   useEffect(() => {
     dispatch(getSettings());
-    if (!isUndefined(airDCPPClientSettings[0])) {
+    if (!isEmpty(airDCPPClientSettings)) {
       const dcppSocket = new AirDCPPSocket({
-        hostname: `${airDCPPClientSettings[0].directConnect.client.hostname}`,
+        hostname: `${airDCPPClientSettings.directConnect.client.hostname}`,
       });
       setADCPPSocket(dcppSocket);
     }
-  }, [dispatch, airDCPPClientSettings.length]);
+  }, [dispatch]);
 
-  console.log(ADCPPSocket);
   const getDCPPSearchResults = useCallback(
     (searchQuery) => {
       dispatch(search(searchQuery));
     },
     [dispatch],
   );
-
+  console.log(airDCPPClientSettings);
   const dcppQuery = {
     query: {
       pattern: `${sanitizedVolumeName.replace(/#/g, "")}`,
@@ -84,21 +83,33 @@ export const AcquisitionPanel = (
   return (
     <>
       <div className="comic-detail columns">
-        <div className="column is-one-fifth">
+        {!isEmpty(airDCPPClientSettings) &&
-          <button
+        !isUndefined(airDCPPClientSettings) ? (
-            className={
+          <div className="column is-one-fifth">
-              isAirDCPPSearchInProgress
+            <button
-                ? "button is-loading is-warning"
+              className={
-                : "button"
+                isAirDCPPSearchInProgress
-            }
+                  ? "button is-loading is-warning"
-            onClick={() => getDCPPSearchResults(dcppQuery)}
+                  : "button"
-          >
+              }
-            <span className="icon is-small">
+              onClick={() => getDCPPSearchResults(dcppQuery)}
-              <img src="/img/airdcpp_logo.svg" />
+            >
-            </span>
+              <span className="icon is-small">
-            <span className="airdcpp-text">Search on AirDC++</span>
+                <img src="/img/airdcpp_logo.svg" />
-          </button>
+              </span>
-        </div>
+              <span className="airdcpp-text">Search on AirDC++</span>
+            </button>
+          </div>
+        ) : (
+          <div className="column is-three-fifths">
+            <article className="message is-info">
+              <div className="message-body is-size-6 is-family-secondary">
+                AirDC++ is not configured. Please configure it in{" "}
+                <code>Settings</code>.
+              </div>
+            </article>
+          </div>
+        )}
         {/* AirDC++ search instance details */}
         {!isNil(searchInfo) && !isNil(searchInstance) && (
           <>

src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement } from "react";
+
+export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
+  const { settings } = settingsObject;
+  return (
+    <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>{settings._id}</dt>
+              <dt>
+                Client version:{" "}
+                {
+                  settings.directConnect.client.airdcppUserSettings.system_info
+                    .client_version
+                }
+              </dt>
+              <dt>
+                Hostname:{" "}
+                {
+                  settings.directConnect.client.airdcppUserSettings.system_info
+                    .hostname
+                }
+              </dt>
+              <dt>
+                Platform:{" "}
+                {
+                  settings.directConnect.client.airdcppUserSettings.system_info
+                    .platform
+                }
+              </dt>
+
+              <dt>
+                Username:{" "}
+                {
+                  settings.directConnect.client.airdcppUserSettings.user
+                    .username
+                }
+              </dt>
+
+              <dt>
+                Active Sessions:{" "}
+                {
+                  settings.directConnect.client.airdcppUserSettings.user
+                    .active_sessions
+                }
+              </dt>
+              <dt>
+                Permissions:{" "}
+                <pre>
+                  {JSON.stringify(
+                    settings.directConnect.client.airdcppUserSettings.user
+                      .permissions,
+                    undefined,
+                    2,
+                  )}
+                </pre>
+              </dt>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AirDCPPSettingsConfirmation;

src/client/components/AirDCPPSettingsForm.tsx

@@ -2,12 +2,13 @@ import React, { ReactElement, useEffect } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch, useSelector } from "react-redux";
 import { saveSettings, getSettings } from "../actions/settings.actions";
+import { AirDCPPSettingsConfirmation } from "./AirDCPPSettings/AirDCPPSettingsConfirmation";
 import axios from "axios";
 import { isUndefined, isEmpty } from "lodash";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   const airdcppClientSettings = useSelector(
-    (state: RootState) => state.settings.data[0],
+    (state: RootState) => state.settings.data,
   );
 
   const dispatch = useDispatch();
@@ -34,9 +35,11 @@ export const AirDCPPSettingsForm = (): ReactElement => {
     }
   };
   const validate = async () => {};
-  const initFormData = !isUndefined(airdcppClientSettings)
+  const initFormData =
-    ? airdcppClientSettings.directConnect.client
+    !isEmpty(airdcppClientSettings.directConnect) ||
-    : null;
+    !isUndefined(airdcppClientSettings.directConnect)
+      ? airdcppClientSettings.directConnect.client
+      : {};
   return (
     <>
       <Form
@@ -51,9 +54,8 @@ export const AirDCPPSettingsForm = (): ReactElement => {
               <p className="control">
                 <span className="select">
                   <Field name="protocol" component="select">
-                    <option value="http://" defaultValue={"http://"}>
+                    <option>Protocol</option>
-                      http://
+                    <option value="http://">http://</option>
-                    </option>
                     <option value="https://">https://</option>
                   </Field>
                 </span>
@@ -104,77 +106,23 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                 </div>
               </div>
             </div>
-
+            <div className="field is-grouped">
-            <button type="submit" className="button is-primary">
+              <p className="control">
-              {!isEmpty(initFormData) ? "Update" : "Save"}
+                <button type="submit" className="button is-primary">
-            </button>
+                  {!isEmpty(initFormData) ? "Update" : "Save"}
+                </button>
+              </p>
+              {!isUndefined(airdcppClientSettings) ? (
+                <p className="control">
+                  <button className="button is-danger">Delete</button>
+                </p>
+              ) : null}
+            </div>
           </form>
         )}
       />
-      {!isUndefined(airdcppClientSettings) &&
+      {!isEmpty(airdcppClientSettings) ? (
-      !isEmpty(airdcppClientSettings) ? (
+        <AirDCPPSettingsConfirmation settings={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/reducers/settings.reducer.ts

@@ -20,6 +20,7 @@ function settingsReducer(state = initialState, action) {
       return {
         ...state,
         data: action.data,
+        inProgress: false,
       };
 
     default: