🏗️ Adding fields to the settings form

src/client/actions/settings.actions.tsx

@@ -12,11 +12,12 @@ import {
 } from "../constants/endpoints";
 
 export const saveSettings =
-  (settingsPayload, settingsObjectId?: string) => async (dispatch) => {
+  (settingsPayload, settingsKey: string, settingsObjectId?: string) =>
+  async (dispatch) => {
     const result = await axios({
       url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`,
       method: "POST",
-      data: { settingsPayload, settingsObjectId },
+      data: { settingsPayload, settingsKey, settingsObjectId },
     });
     dispatch({
       type: SETTINGS_OBJECT_FETCHED,
@@ -70,18 +71,20 @@ export const flushDb = () => async (dispatch) => {
   }
 };
 
-
-
-export const getQBitTorrentClientInfo = () => async (dispatch) => {
-  
+export const getQBitTorrentClientInfo = (hostInfo) => async (dispatch) => {
   const foo = await axios.request({
-    url: `${QBITTORRENT_SERVICE_BASE_URI}/getList`,
+    url: `${QBITTORRENT_SERVICE_BASE_URI}/connect`,
+    method: "POST",
+    data: hostInfo,
+  });
+  const bar = await axios.request({
+    url: `${QBITTORRENT_SERVICE_BASE_URI}/getClientInfo`,
     method: "GET",
   });
-  
+
+  console.log(bar);
   dispatch({
     type: SETTINGS_QBITTORRENT_TORRENTS_LIST_FETCHED,
     data: foo,
-  })
-  
-}
+  });
+};

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
 
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
-  console.log(settings);
   return (
     <div className="mt-4 is-clearfix">
       <div className="card">

src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -8,32 +8,16 @@ import {
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
 import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
 import { isUndefined, isEmpty, isNil } from "lodash";
+import { hostNameValidator } from "../../../shared/utils/validator.utils";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
   const dispatch = useDispatch();
   const airDCPPSettings = useContext(AirDCPPSocketContext);
 
-  const hostValidator = (hostname: string): string | undefined => {
-    const hostnameRegex =
-      /^([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])(\.([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9]))*$/;
-
-    if (!isUndefined(hostname)) {
-      const matches = hostname.match(hostnameRegex);
-      console.log(matches);
-      return !isNil(matches) && matches.length > 0
-        ? undefined
-        : "Enter a valid hostname";
-    }
-  };
-
   const onSubmit = useCallback(async (values) => {
     try {
       airDCPPSettings.setSettings(values);
-      dispatch(
-        saveSettings({
-          host: values,
-        }),
-      );
+      dispatch(saveSettings(values, "directConnect"));
     } catch (error) {
       console.log(error);
     }
@@ -70,7 +54,7 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                 </span>
               </p>
               <div className="control is-expanded">
-                <Field name="hostname" validate={hostValidator}>
+                <Field name="hostname" validate={hostNameValidator}>
                   {({ input, meta }) => (
                     <div>
                       <input
@@ -125,9 +109,6 @@ export const AirDCPPSettingsForm = (): ReactElement => {
                     <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>

src/client/components/Settings/QbittorrentSettings/QbittorrentConnectionForm.tsx

@@ -2,6 +2,9 @@ import React, { ReactElement, useCallback, useEffect } from "react";
 import { Form, Field } from "react-final-form";
 import { useDispatch, useSelector } from "react-redux";
 import { getQBitTorrentClientInfo } from "../../../actions/settings.actions";
+import { hostNameValidator } from "../../../shared/utils/validator.utils";
+import { saveSettings } from "../../../actions/settings.actions";
+import { isUndefined } from "lodash";
 
 export const QbittorrentConnectionForm = (): ReactElement => {
   const dispatch = useDispatch();
@@ -9,18 +12,34 @@ export const QbittorrentConnectionForm = (): ReactElement => {
     (state: RootState) => state.settings.torrentsList,
   );
 
+  const qBittorrentSettings = useSelector((state: RootState) => {
+    if (!isUndefined(state.settings.data.bittorrent)) {
+      return state.settings.data.bittorrent.client.host;
+    }
+  });
+
   useEffect(() => {
-    dispatch(getQBitTorrentClientInfo());
+    if (!isUndefined(qBittorrentSettings)) {
+      dispatch(getQBitTorrentClientInfo(qBittorrentSettings));
+    }
   }, []);
-  const handleSubmit = () => {};
+
+  const onSubmit = useCallback(async (values) => {
+    try {
+      dispatch(saveSettings(values, "bittorrent"));
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+
   return (
     <>
       <pre> {JSON.stringify(torrents, null, 4)} </pre>
 
       <Form
-        onSubmit={handleSubmit}
+        onSubmit={onSubmit}
         // validate={}
-        /* initialValues={} */
+        initialValues={qBittorrentSettings}
         render={({ handleSubmit }) => (
           <form onSubmit={handleSubmit}>
             <h2>Configure Qbittorrent</h2>
@@ -36,7 +55,7 @@ export const QbittorrentConnectionForm = (): ReactElement => {
                 </span>
               </p>
               <div className="control is-expanded">
-                <Field name="hostname">
+                <Field name="hostname" validate={hostNameValidator}>
                   {({ input, meta }) => (
                     <div>
                       <input
@@ -92,13 +111,18 @@ export const QbittorrentConnectionForm = (): ReactElement => {
                     <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 className="field is-grouped">
+              <p className="control">
+                <button type="submit" className="button is-primary">
+                  Connect
+                </button>
+              </p>
+            </div>
           </form>
         )}
       />

src/client/shared/utils/validator.utils.ts

@@ -0,0 +1,14 @@
+import { isNil, isUndefined } from "lodash";
+
+export const hostNameValidator = (hostname: string): string | undefined => {
+  // https://stackoverflow.com/a/3824105/656708
+  const hostnameRegex =
+    /^([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])(\.([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]{0,61}[a-zA-Z0-9]))*$/;
+
+  if (!isUndefined(hostname)) {
+    const matches = hostname.match(hostnameRegex);
+    return !isNil(matches) && matches.length > 0
+      ? undefined
+      : "Enter a valid hostname";
+  }
+};