🌊 qBittorrent Settings Scaffold (#90)

* 🌊 qBittorrent settings scaffold * 🔧 Added scaffold for the qBittorrent connection form * 🔧 Some refactoring * 🔧 Cleaned up folder structure * 🔧 Fixed broken paths * 🔧 Cleaned up Search and Import component hierarchy * 🔧 More path fixes * 🔧 Tooling changes * 📝 Qbittorrent form scaffold * ⬆️ Bumped @dnd-kit deps * 🧑🏼‍🔧 Fixed the hostname regex * 🏗️ Adding fields to the settings form * 🔧 Formatting and more layout changes * 🔧 Added Prowlarr settings items in JSON * 📝 Purified Card Component * 📝 Abstracted connection form into a component * 🏗️ Reorganized tabs * Migrating from Redux to RTK-query * ⬇️ Fetched qBittorrent settings * 🏗️ Trying out react-query * 🧩 Added react-query query to qBittorrentSettings page * 📝 qbittorrent form RU actions first draft * 🏗️ Added loading state check * 🏗 Added error check state * 🏗️ Refactored AirDCPP context using react-query * 🏗️ Refactoring AirDCPP Settings Form with react-query * 🔧 Removed context * 🔧 Removing context from AirDCPP settings page * 🔧 Fixed early init error on the store * 🐛 Debugging AirDCPP Settings Form page * 🧸 Zustand-ified AirDCPP Form * ❌ AirDCPP code cleaned up from App.tsx * ➕ Re-added yarn.lock
2023-11-07 12:46:08 -05:00
parent 1bd3d611e4
commit 8bebffd95e
52 changed files with 2715 additions and 5428 deletions
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
@@ -0,0 +1,96 @@
+import React, { ReactElement, useEffect, useState, useContext } from "react";
+import { Form, Field } from "react-final-form";
+import { useDispatch } from "react-redux";
+import { isEmpty, isNil, isUndefined } from "lodash";
+import Select from "react-select";
+import { saveSettings } from "../../../actions/settings.actions";
+import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
+
+export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
+  const dispatch = useDispatch();
+  const [hubList, setHubList] = useState([]);
+  const airDCPPConfiguration = useContext(AirDCPPSocketContext);
+  const {
+    airDCPPState: { settings, socket },
+  } = airDCPPConfiguration;
+
+  useEffect(() => {
+    (async () => {
+      if (!isEmpty(settings)) {
+        const hubs = await socket.get(`hubs`);
+        const hubSelectionOptions = hubs.map(({ hub_url, identity }) => ({
+          value: hub_url,
+          label: identity.name,
+        }));
+
+        setHubList(hubSelectionOptions);
+      }
+    })();
+  }, []);
+
+  const onSubmit = (values) => {
+    if (!isUndefined(values.hubs)) {
+      dispatch(saveSettings({ ...settings, 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;