🏗 Wiring up the AirDCPP settings call

src/client/actions/fileops.actions.tsx

@@ -90,7 +90,6 @@ export const getComicBooks = (options) => async (dispatch) => {
       },
     })
     .then((response) => {
-      console.log(response);
       dispatch({
         type: IMS_RECENT_COMICS_FETCHED,
         data: response.data,
@@ -145,7 +144,6 @@ export const fetchVolumeGroups = () => (dispatch) => {
         method: "GET",
       })
       .then((data) => {
-        console.log(data);
         dispatch({
           type: IMS_COMIC_BOOK_GROUPS_FETCHED,
           data,

src/client/actions/settings.actions.tsx

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

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 />

src/client/constants/action-types.ts

@@ -7,14 +7,15 @@ export const CV_API_GENERIC_FAILURE = "CV_API_GENERIC_FAILURE";
 
 export const IMS_COMICBOOK_METADATA_FETCHED = "IMS_SOCKET_DATA_FETCHED";
 
+export const IMS_RAW_IMPORT_SUCCESSFUL = "IMS_RAW_IMPORT_SUCCESSFUL";
+export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
+
 //  rabbitmq
 export const RMQ_SOCKET_CONNECTED = "RMQ_SOCKET_CONNECTED";
 export const RMQ_SOCKET_DISCONNECTED = "RMQ_SOCKET_DISCONNECTED";
 export const RMQ_SOCKET_ERROR = "RMQ_SOCKET_ERROR";
 
-export const IMS_RAW_IMPORT_SUCCESSFUL = "IMS_RAW_IMPORT_SUCCESSFUL";
-export const IMS_RAW_IMPORT_FAILED = "IMS_RAW_IMPORT_FAILED";
-
+// ComicVine Metadata
 export const IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS =
   "IMS_CV_METADATA_IMPORT_CALL_IN_PROGRESS";
 export const IMS_CV_METADATA_IMPORT_SUCCESSFUL =
@@ -61,3 +62,8 @@ export const AIRDCPP_DOWNLOAD_PROGRESS_TICK = "AIRDCPP_DOWNLOAD_PROGRESS_TICK";
 // LIBRARY SOCKET ENDPOINT
 export const LS_IMPORT = "LS_IMPORT";
 export const LS_COVER_EXTRACTED = "LS_COVER_EXTRACTED";
+
+// Settings
+export const SETTINGS_CALL_IN_PROGRESS = "SETTINGS_CALL_IN_PROGRESS";
+export const SETTINGS_OBJECT_FETCHED = "SETTINGS_OBJECT_FETCHED";
+export const SETTINGS_CALL_FAILED = "SETTINGS_CALL_FAILED";

src/client/constants/endpoints.ts

@@ -36,6 +36,13 @@ export const IMPORT_SERVICE_BASE_URI = hostURIBuilder({
   apiPath: "/api/import",
 });
 
+export const SETTINGS_SERVICE_BASE_URI = hostURIBuilder({
+  protocol: "http",
+  host: process.env.UNDERLYING_HOSTNAME || "localhost",
+  port: "3000",
+  apiPath: "/api/settings",
+});
+
 export const SOCKET_BASE_URI = hostURIBuilder({
   protocol: "http",
   host: process.env.UNDERLYING_HOSTNAME || "localhost",

src/client/reducers/index.js

@@ -3,6 +3,7 @@ import { connectRouter } from "connected-react-router";
 import comicinfoReducer from "../reducers/comicinfo.reducer";
 import fileOpsReducer from "../reducers/fileops.reducer";
 import airdcppReducer from "../reducers/airdcpp.reducer";
+import settingsReducer from "../reducers/settings.reducer";
 import { reducer as notifications } from "react-notification-system-redux";
 
 export default (history) =>
@@ -11,5 +12,6 @@ export default (history) =>
     comicInfo: comicinfoReducer,
     fileOps: fileOpsReducer,
     airdcpp: airdcppReducer,
+    settings: settingsReducer,
     router: connectRouter(history),
   });

src/client/reducers/settings.reducer.ts

@@ -0,0 +1,30 @@
+import {
+  SETTINGS_CALL_FAILED,
+  SETTINGS_OBJECT_FETCHED,
+  SETTINGS_CALL_IN_PROGRESS,
+} from "../constants/action-types";
+const initialState = {
+  settings: {},
+  inProgress: false,
+};
+
+function settingsReducer(state = initialState, action) {
+  switch (action.type) {
+    case SETTINGS_CALL_IN_PROGRESS:
+      return {
+        ...state,
+        inProgress: true,
+      };
+
+    case SETTINGS_OBJECT_FETCHED:
+      return {
+        ...state,
+        data: action.data,
+      };
+
+    default:
+      return { ...state };
+  }
+}
+
+export default settingsReducer;