🔧 Genericized AirDC++ settings

1. You can now enter your AirDC++ client settings in the settings menu and the UI will read from them
2. Hubs can also be selected for search

package.json

@@ -59,7 +59,7 @@
     "react-notification-system": "^0.4.0",
     "react-notification-system-redux": "^2.0.1",
     "react-responsive-carousel": "^3.2.21",
-    "react-select": "^4.3.1",
+    "react-select": "^5.2.1",
     "react-sliding-pane": "^7.0.0",
     "react-stickynode": "^4.0.0",
     "react-table": "^7.7.0",

src/client/actions/settings.actions.tsx

@@ -6,11 +6,11 @@ import {
 import { SETTINGS_SERVICE_BASE_URI } from "../constants/endpoints";
 
 export const saveSettings =
-  (settingsObject, airdcppUserSettings) => async (dispatch) => {
+  (settingsPayload, settingsObjectId?) => async (dispatch) => {
     const result = await axios({
       url: `${SETTINGS_SERVICE_BASE_URI}/saveSettings`,
       method: "POST",
-      data: { settingsObject, airdcppUserSettings },
+      data: { settingsPayload, settingsObjectId },
     });
     console.log(result.data);
     dispatch({

src/client/components/AcquisitionPanel.tsx

@@ -7,7 +7,7 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, SearchInstance } from "threetwo-ui-typings";
 import ellipsize from "ellipsize";
-import { isEmpty, isNil, isUndefined, map } from "lodash";
+import { isEmpty, isNil, isUndefined, map, pick } from "lodash";
 import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
 interface IAcquisitionPanelProps {
   comicBookMetadata: any;
@@ -43,8 +43,8 @@ export const AcquisitionPanel = (
     async (searchQuery) => {
       dispatch(
         search(searchQuery, ADCPPSocket, {
-          username: `${userSettings.directConnect.client.username}`,
+          username: `${userSettings.directConnect.client.host.username}`,
-          password: `${userSettings.directConnect.client.password}`,
+          password: `${userSettings.directConnect.client.host.password}`,
         }),
       );
     },
@@ -59,7 +59,7 @@ export const AcquisitionPanel = (
       extensions: ["cbz", "cbr"],
     },
     // "comic-scans.no-ip.biz:24674",
-    hub_urls: ["perfection.comichub.org:777"],
+    hub_urls: map(userSettings.directConnect.client.hubs, (item) => item.value),
     priority: 5,
   };
 
@@ -73,16 +73,16 @@ export const AcquisitionPanel = (
           comicBookObjectId,
           ADCPPSocket,
           {
-            username: `${userSettings.directConnect.client.username}`,
+            username: `${userSettings.directConnect.client.host.username}`,
-            password: `${userSettings.directConnect.client.password}`,
+            password: `${userSettings.directConnect.client.host.password}`,
           },
         ),
       );
       // this is to update the download count badge on the downloads tab
       dispatch(
         getBundlesForComic(comicBookObjectId, ADCPPSocket, {
-          username: `${userSettings.directConnect.client.username}`,
+          username: `${userSettings.directConnect.client.host.username}`,
-          password: `${userSettings.directConnect.client.password}`,
+          password: `${userSettings.directConnect.client.host.password}`,
         }),
       );
     },
@@ -126,6 +126,17 @@ export const AcquisitionPanel = (
                 <div className="card-content">
                   <div className="content">
                     <dl>
+                      <dt>
+                        <div className="tags">
+                          {userSettings.directConnect.client.hubs.map(
+                            ({ value }) => (
+                              <span className="tag" key={value}>
+                                {value}
+                              </span>
+                            ),
+                          )}
+                        </div>
+                      </dt>
                       <dt>Query: {searchInfo.query.pattern}</dt>
                       <dd>
                         Extensions: {searchInfo.query.extensions.join(", ")}

src/client/components/AirDCPPConnectionForm.tsx

@@ -1,42 +0,0 @@
-import React, { ReactElement } from "react";
-import { Form, Field } from "react-final-form";
-
-export const AirDCPPConnectionForm = (): ReactElement => {
-  const onSubmit = () => {};
-  const validate = async () => {};
-
-  return (
-    <Form
-      onSubmit={onSubmit}
-      validate={validate}
-      render={({ handleSubmit }) => (
-        <form onSubmit={handleSubmit}>
-          <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>
-          </div>
-          <div className="field">
-            <label className="label">AirDC++ Host</label>
-            <div className="control">
-              <Field
-                name="airdcpp_hostname"
-                component="input"
-                className="input"
-                placeholder="adc://hub.url"
-              />
-            </div>
-          </div>
-
-          <button type="submit" className="button is-primary">
-            Submit
-          </button>
-        </form>
-      )}
-    />
-  );
-};
-
-export default AirDCPPConnectionForm;

src/client/components/AirDCPPSettings/AirDCPPHubsForm.tsx

@@ -0,0 +1,98 @@
+import React, { ReactElement, useEffect, useState } from "react";
+import { Form, Field } from "react-final-form";
+import axios from "axios";
+import { useDispatch } from "react-redux";
+import { isEmpty, isUndefined } from "lodash";
+import Select from "react-select";
+import { saveSettings } from "../../actions/settings.actions";
+
+export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
+  const { settings } = airDCPPClientUserSettings;
+  const dispatch = useDispatch();
+  const [hubList, setHubList] = useState([]);
+
+  useEffect(() => {
+    if (!isEmpty(settings)) {
+      axios({
+        url: `${settings.directConnect.client.host.protocol}://${settings.directConnect.client.host.hostname}/api/v1/hubs`,
+        method: "GET",
+        headers: {
+          Authorization: `${settings.directConnect.client.airDCPPUserSettings.auth_token}`,
+        },
+      }).then((hubs) => {
+        const hubSelectionOptions = hubs.data.map(({ hub_url, identity }) => ({
+          value: hub_url,
+          label: identity.name,
+        }));
+
+        setHubList(hubSelectionOptions);
+      });
+    }
+  }, []);
+
+  const onSubmit = (values) => {
+    if (!isUndefined(values.hubs)) {
+      dispatch(saveSettings({ hubs: values.hubs }, settings._id));
+    }
+  };
+
+  const validate = async () => {};
+
+  const SelectAdapter = ({ input, ...rest }) => {
+    return <Select {...input} {...rest} isClearable isMulti />;
+  };
+
+  return (
+    <>
+      <Form
+        onSubmit={onSubmit}
+        validate={validate}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <div>
+              <h3 className="title">Hubs</h3>
+              <h6 className="subtitle has-text-grey-light">
+                Select the hubs you want to perform searches against.
+              </h6>
+            </div>
+            <div className="field">
+              <label className="label">AirDC++ Host</label>
+              <div className="control">
+                <Field
+                  name="hubs"
+                  component={SelectAdapter}
+                  className="basic-multi-select"
+                  placeholder="Select Hubs to Search Against"
+                  options={hubList}
+                />
+              </div>
+            </div>
+
+            <button type="submit" className="button is-primary">
+              Submit
+            </button>
+          </form>
+        )}
+      />
+      <div className="mt-4">
+        <article className="message is-warning">
+          <div className="message-body is-size-6 is-family-secondary">
+            Your selection in the dropdown <strong>will replace</strong> the
+            existing selection.
+          </div>
+        </article>
+      </div>
+      <div className="box mt-3">
+        <h6>Selected hubs</h6>
+        {settings.directConnect.client.hubs.map(({ value, label }) => (
+          <div key={value}>
+            <div>{label}</div>
+            <span className="is-size-7">{value}</span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default AirDCPPHubsForm;

src/client/components/AirDCPPSettings/AirDCPPSettingsConfirmation.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react";
 
 export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
   const { settings } = settingsObject;
+
   return (
     <div className="mt-4 is-clearfix">
       <div className="card">
@@ -15,21 +16,21 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
               <dt>
                 Client version:{" "}
                 {
-                  settings.directConnect.client.airdcppUserSettings.system_info
+                  settings.directConnect.client.airDCPPUserSettings.system_info
                     .client_version
                 }
               </dt>
               <dt>
                 Hostname:{" "}
                 {
-                  settings.directConnect.client.airdcppUserSettings.system_info
+                  settings.directConnect.client.airDCPPUserSettings.system_info
                     .hostname
                 }
               </dt>
               <dt>
                 Platform:{" "}
                 {
-                  settings.directConnect.client.airdcppUserSettings.system_info
+                  settings.directConnect.client.airDCPPUserSettings.system_info
                     .platform
                 }
               </dt>
@@ -37,7 +38,7 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
               <dt>
                 Username:{" "}
                 {
-                  settings.directConnect.client.airdcppUserSettings.user
+                  settings.directConnect.client.airDCPPUserSettings.user
                     .username
                 }
               </dt>
@@ -45,7 +46,7 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
               <dt>
                 Active Sessions:{" "}
                 {
-                  settings.directConnect.client.airdcppUserSettings.user
+                  settings.directConnect.client.airDCPPUserSettings.user
                     .active_sessions
                 }
               </dt>
@@ -53,7 +54,7 @@ export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
                 Permissions:{" "}
                 <pre>
                   {JSON.stringify(
-                    settings.directConnect.client.airdcppUserSettings.user
+                    settings.directConnect.client.airDCPPUserSettings.user
                       .permissions,
                     undefined,
                     2,

src/client/components/AirDCPPSettings/AirDCPPSettingsForm.tsx

@@ -1,27 +1,18 @@
 import React, { ReactElement, useCallback, useContext, useEffect } from "react";
 import { Form, Field } from "react-final-form";
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
-import {
+import { saveSettings, deleteSettings } from "../../actions/settings.actions";
-  getSettings,
+import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
-  saveSettings,
-  deleteSettings,
-} from "../actions/settings.actions";
-import { AirDCPPSettingsConfirmation } from "./AirDCPPSettings/AirDCPPSettingsConfirmation";
 import axios from "axios";
-import { AirDCPPSocketContext } from "../context/AirDCPPSocket";
+import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
-import AirDCPPSocket from "../services/DcppSearchService";
+import AirDCPPSocket from "../../services/DcppSearchService";
 import { isUndefined, isEmpty } from "lodash";
 
-export const AirDCPPSettingsForm = (): ReactElement => {
+export const AirDCPPSettingsForm = (airDCPPClientSettings): ReactElement => {
-  const airDCPPClientSettings = useSelector(
+  const { settings } = airDCPPClientSettings;
-    (state: RootState) => state.settings.data,
-  );
-
-  const { setADCPPSocket } = useContext(AirDCPPSocketContext);
   const dispatch = useDispatch();
-  useEffect(() => {
+  const { setADCPPSocket } = useContext(AirDCPPSocketContext);
-    dispatch(getSettings());
+
-  }, []);
   const onSubmit = async (values) => {
     try {
       const airDCPPResponse = await axios({
@@ -33,20 +24,17 @@ export const AirDCPPSettingsForm = (): ReactElement => {
         },
       });
       if (airDCPPResponse.status === 200) {
-        dispatch(saveSettings(values, airDCPPResponse.data));
+        dispatch(
+          saveSettings({
+            host: values,
+            airDCPPUserSettings: airDCPPResponse.data,
+          }),
+        );
         setADCPPSocket(
           new AirDCPPSocket({
             hostname: `${values.hostname}`,
           }),
         );
-        const hubList = await axios({
-          url: `${values.protocol}://${values.hostname}/api/v1/hubs`,
-          method: "GET",
-          params: {
-            username: values.username,
-            password: values.password,
-          },
-        });
       }
     } catch (error) {
       console.log(error);
@@ -60,9 +48,8 @@ export const AirDCPPSettingsForm = (): ReactElement => {
 
   const validate = async () => {};
   const initFormData =
-    !isEmpty(airDCPPClientSettings.directConnect) ||
+    !isEmpty(settings.directConnect) || !isUndefined(settings.directConnect)
-    !isUndefined(airDCPPClientSettings.directConnect)
+      ? settings.directConnect.client.host
-      ? airDCPPClientSettings.directConnect.client
       : {};
   return (
     <>
@@ -140,11 +127,11 @@ export const AirDCPPSettingsForm = (): ReactElement => {
           </form>
         )}
       />
-
+      {!isEmpty(settings) ? (
-      {!isEmpty(airDCPPClientSettings) ? (
+        <AirDCPPSettingsConfirmation settings={settings} />
-        <AirDCPPSettingsConfirmation settings={airDCPPClientSettings} />
       ) : null}
-      {!isEmpty(airDCPPClientSettings) ? (
+
+      {!isEmpty(settings) ? (
         <p className="control mt-4">
           <button className="button is-danger" onClick={removeSettings}>
             Delete

src/client/components/ComicDetail.tsx

@@ -87,11 +87,11 @@ export const ComicDetail = ({}: ComicDetailProps): ReactElement => {
 
   useEffect(() => {
     if (isEmpty(ADCPPSocket) && !isEmpty(userSettings)) {
-      console.log(userSettings.directConnect.client.hostname);
+      console.log(userSettings.directConnect.client.host.hostname);
       setADCPPSocket(
         new AirDCPPSocket({
-          protocol: `${userSettings.directConnect.client.protocol}`,
+          protocol: `${userSettings.directConnect.client.host.protocol}`,
-          hostname: `${userSettings.directConnect.client.hostname}`,
+          hostname: `${userSettings.directConnect.client.host.hostname}`,
         }),
       );
     }

src/client/components/Settings.tsx

@@ -1,19 +1,31 @@
 import React, { useState, useEffect, useCallback, ReactElement } from "react";
-import { AirDCPPSettingsForm } from "./AirDCPPSettingsForm";
+import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
-import { AirDCPPConnectionForm } from "./AirDCPPConnectionForm";
+import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
 import settingsObject from "../constants/settings/settingsMenu.json";
-import { isUndefined, map } from "lodash";
+import { isEmpty, isUndefined, map } from "lodash";
+import { useDispatch, useSelector } from "react-redux";
+import { getSettings } from "../actions/settings.actions";
 
 interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
+  // fetch saved AirDC++ settings, if any
+  const airDCPPClientSettings = useSelector(
+    (state: RootState) => state.settings.data,
+  );
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(getSettings());
+  }, []);
   const [active, setActive] = useState("gen-db");
   const settingsContent = [
     {
       id: "adc-hubs",
       content: (
         <>
-          <AirDCPPConnectionForm />
+          {!isEmpty(airDCPPClientSettings) ? (
+            <AirDCPPHubsForm settings={airDCPPClientSettings} />
+          ) : null}
         </>
       ),
     },
@@ -21,7 +33,7 @@ export const Settings = (props: ISettingsProps): ReactElement => {
       id: "adc-connection",
       content: (
         <>
-          <AirDCPPSettingsForm />
+          <AirDCPPSettingsForm settings={airDCPPClientSettings} />
         </>
       ),
     },

yarn.lock

@@ -1991,6 +1991,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-window@^1.8.2":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
@@ -11057,13 +11064,6 @@ react-hot-loader@^4.13.0:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-input-autosize@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
-  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -11191,17 +11191,17 @@ react-router@5.2.1, react-router@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-select@^4.3.1:
+react-select@^5.2.1:
-  version "4.3.1"
+  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.1.tgz#416c25c6b79b94687702374e019c4f2ed9d159d6"
-  integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q==
+  integrity sha512-OOyNzfKrhOcw/BlembyGWgdlJ2ObZRaqmQppPFut1RptJO423j+Y+JIsmxkvsZ4D/3CpOmwIlCvWbbAWEdh12A==
   dependencies:
     "@babel/runtime" "^7.12.0"
     "@emotion/cache" "^11.4.0"
     "@emotion/react" "^11.1.1"
+    "@types/react-transition-group" "^4.4.0"
     memoize-one "^5.0.0"
     prop-types "^15.6.0"
-    react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
 react-sliding-pane@^7.0.0: