🏗 Wiring up the AirDCPP settings call

src/client/components/AirDCPPConnectionForm.tsx

@@ -11,13 +11,13 @@ export const AirDCPPConnectionForm = (): ReactElement => {
       validate={validate}
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
-          <p>
+          <div>
             <h3 className="title">AirDC++ Connection Settings</h3>
             <h6 className="subtitle has-text-grey-light">
               Configure AirDC++ connection settings such as hostname and
               credentials
             </h6>
-          </p>
+          </div>
           <div className="field">
             <label className="label">AirDC++ Host</label>
             <div className="control">

src/client/components/AirDCPPSettingsForm.tsx

@@ -1,27 +1,44 @@
 import React, { ReactElement } from "react";
 import { Form, Field } from "react-final-form";
+import { useDispatch } from "react-redux";
+import { saveSettings } from "../actions/settings.actions";
+import axios from "axios";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
+  const dispatch = useDispatch();
   const onSubmit = async (values) => {
-    console.log(values);
+    try {
+      const airdcppResponse = await axios({
+        url: `https://${values.airdcpp_hostname}/api/v1/sessions/authorize`,
+        method: "POST",
+        data: {
+          username: values.airdcpp_username,
+          password: values.airdcpp_password,
+        },
+      });
+      if (airdcppResponse.status === 200) {
+        dispatch(saveSettings(values));
+      }
+    } catch (error) {
+      console.log(error);
+    }
   };
   const validate = async () => {};
-
   return (
     <Form
       onSubmit={onSubmit}
       validate={validate}
       render={({ handleSubmit }) => (
         <form onSubmit={handleSubmit}>
-          <h2>Hub Connection Information</h2>
+          <h2>AirDC++ Connection Information</h2>
           <div className="field">
-            <label className="label">Hub URL</label>
+            <label className="label">AirDC++ Hostname</label>
             <div className="control">
               <Field
                 name="airdcpp_hostname"
                 component="input"
                 className="input"
-                placeholder="adc://hub.url"
+                placeholder="111.222.333.4 / one.airdcpp.com"
               />
             </div>
           </div>

src/client/components/RecentlyImported.tsx

@@ -39,7 +39,6 @@ export const RecentlyImported = ({
           ({ _id, rawFileDetails, sourcedMetadata }) => {
             let imagePath = "";
             let comicName = "";
-            console.log(rawFileDetails);
             if (!isNil(rawFileDetails)) {
               const encodedFilePath = encodeURI(
                 `${IMPORT_SERVICE_HOST}` +

src/client/components/Settings.tsx

@@ -10,7 +10,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
   const [active, setActive] = useState("gen-db");
   const settingsContent = [
     {
-      id: "adc-connection",
+      id: "adc-hubs",
       content: (
         <>
           <AirDCPPConnectionForm />
@@ -18,7 +18,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
       ),
     },
     {
-      id: "adc-hubs",
+      id: "adc-connection",
       content: (
         <>
           <AirDCPPSettingsForm />