🌊 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
This commit was merged in pull request #90.
This commit is contained in:
GitHub
@@ -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;
|
||||
@@ -0,0 +1,34 @@
|
||||
import React, { ReactElement } from "react";
|
||||
|
||||
export const AirDCPPSettingsConfirmation = (settingsObject): ReactElement => {
|
||||
const { settings } = settingsObject;
|
||||
return (
|
||||
<div className="mt-4 is-clearfix">
|
||||
<div className="card">
|
||||
<div className="card-content">
|
||||
<span className="tag is-pulled-right is-primary">Connected</span>
|
||||
<div className="content is-size-7">
|
||||
<dl>
|
||||
<dt>{settings._id}</dt>
|
||||
<dt>Client version: {settings.system_info.client_version}</dt>
|
||||
<dt>Hostname: {settings.system_info.hostname}</dt>
|
||||
<dt>Platform: {settings.system_info.platform}</dt>
|
||||
|
||||
<dt>Username: {settings.user.username}</dt>
|
||||
|
||||
<dt>Active Sessions: {settings.user.active_sessions}</dt>
|
||||
<dt>
|
||||
Permissions:{" "}
|
||||
<pre>
|
||||
{JSON.stringify(settings.user.permissions, undefined, 2)}
|
||||
</pre>
|
||||
</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AirDCPPSettingsConfirmation;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { ReactElement, useCallback } from "react";
|
||||
import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
|
||||
import { isUndefined, isEmpty } from "lodash";
|
||||
import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
|
||||
import { useStore } from "../../../store/index";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
|
||||
export const AirDCPPSettingsForm = (): ReactElement => {
|
||||
// cherry-picking selectors for:
|
||||
// 1. initial values for the form
|
||||
// 2. If initial values are present, get the socket information to display
|
||||
const {
|
||||
airDCPPSocketConnected,
|
||||
airDCPPDisconnectionInfo,
|
||||
airDCPPSocketConnectionInformation,
|
||||
airDCPPClientConfiguration,
|
||||
} = useStore(
|
||||
useShallow((state) => ({
|
||||
airDCPPSocketConnected: state.airDCPPSocketConnected,
|
||||
airDCPPDisconnectionInfo: state.airDCPPDisconnectionInfo,
|
||||
airDCPPClientConfiguration: state.airDCPPClientConfiguration,
|
||||
airDCPPSocketConnectionInformation:
|
||||
state.airDCPPSocketConnectionInformation,
|
||||
})),
|
||||
);
|
||||
|
||||
const onSubmit = useCallback(async (values) => {
|
||||
try {
|
||||
// airDCPPSettings.setSettings(values);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}, []);
|
||||
const removeSettings = useCallback(async () => {
|
||||
// airDCPPSettings.setSettings({});
|
||||
}, []);
|
||||
//
|
||||
const initFormData = !isUndefined(airDCPPClientConfiguration)
|
||||
? airDCPPClientConfiguration
|
||||
: {};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConnectionForm
|
||||
initialData={initFormData}
|
||||
submitHandler={onSubmit}
|
||||
formHeading={"Configure AirDC++"}
|
||||
/>
|
||||
|
||||
{!isEmpty(airDCPPSocketConnectionInformation) ? (
|
||||
<AirDCPPSettingsConfirmation
|
||||
settings={airDCPPSocketConnectionInformation}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!isEmpty(airDCPPClientConfiguration) ? (
|
||||
<p className="control mt-4">
|
||||
<button className="button is-danger" onClick={removeSettings}>
|
||||
Delete
|
||||
</button>
|
||||
</p>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AirDCPPSettingsForm;
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { ReactElement } from "react";
|
||||
import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export const QbittorrentConnectionForm = (): ReactElement => {
|
||||
// fetch settings
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["settings"],
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: "http://localhost:3000/api/settings/getAllSettings",
|
||||
method: "GET",
|
||||
}),
|
||||
});
|
||||
const hostDetails = data?.data.bittorrent.client.host;
|
||||
// connect to qbittorrent client
|
||||
const { data: connectionDetails } = useQuery({
|
||||
queryKey: [],
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: "http://localhost:3060/api/qbittorrent/connect",
|
||||
method: "POST",
|
||||
data: hostDetails,
|
||||
}),
|
||||
enabled: !!hostDetails,
|
||||
});
|
||||
// get qbittorrent client info
|
||||
const { data: qbittorrentClientInfo } = useQuery({
|
||||
queryKey: ["qbittorrentClientInfo"],
|
||||
queryFn: async () =>
|
||||
await axios({
|
||||
url: "http://localhost:3060/api/qbittorrent/getClientInfo",
|
||||
method: "GET",
|
||||
}),
|
||||
enabled: !!connectionDetails,
|
||||
});
|
||||
console.log(qbittorrentClientInfo?.data);
|
||||
// Update action using a mutation
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: async (values) =>
|
||||
await axios({
|
||||
url: `http://localhost:3000/api/settings/saveSettings`,
|
||||
method: "POST",
|
||||
data: { settingsPayload: values, settingsKey: "bittorrent" },
|
||||
}),
|
||||
});
|
||||
|
||||
if (isError)
|
||||
return (
|
||||
<>
|
||||
<pre>Something went wrong connecting to qBittorrent.</pre>
|
||||
</>
|
||||
);
|
||||
if (!isLoading) {
|
||||
return (
|
||||
<>
|
||||
<ConnectionForm
|
||||
initialData={hostDetails}
|
||||
formHeading={"qBittorrent Configuration"}
|
||||
submitHandler={mutate}
|
||||
/>
|
||||
|
||||
<pre className="mt-5">
|
||||
{JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
|
||||
</pre>
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default QbittorrentConnectionForm;
|
||||
113
src/client/components/Settings/Settings.tsx
Normal file
113
src/client/components/Settings/Settings.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { useState, ReactElement } from "react";
|
||||
import { AirDCPPSettingsForm } from "./AirDCPPSettings/AirDCPPSettingsForm";
|
||||
import { AirDCPPHubsForm } from "./AirDCPPSettings/AirDCPPHubsForm";
|
||||
import { QbittorrentConnectionForm } from "./QbittorrentSettings/QbittorrentConnectionForm";
|
||||
import { SystemSettingsForm } from "./SystemSettings/SystemSettingsForm";
|
||||
import { ServiceStatuses } from "../ServiceStatuses/ServiceStatuses";
|
||||
import settingsObject from "../../constants/settings/settingsMenu.json";
|
||||
import { isUndefined, map } from "lodash";
|
||||
|
||||
interface ISettingsProps {}
|
||||
|
||||
export const Settings = (props: ISettingsProps): ReactElement => {
|
||||
const [active, setActive] = useState("gen-db");
|
||||
const settingsContent = [
|
||||
{
|
||||
id: "adc-hubs",
|
||||
content: <div key="adc-hubs">{/* <AirDCPPHubsForm /> */}</div>,
|
||||
},
|
||||
{
|
||||
id: "adc-connection",
|
||||
content: (
|
||||
<div key="adc-connection">
|
||||
<AirDCPPSettingsForm />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "qbt-connection",
|
||||
content: (
|
||||
<div key="qbt-connection">
|
||||
<QbittorrentConnectionForm />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "core-service",
|
||||
content: <>a</>,
|
||||
},
|
||||
{
|
||||
id: "flushdb",
|
||||
content: <div key="flushdb">{/* <SystemSettingsForm /> */}</div>,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<section className="container">
|
||||
<div className="columns">
|
||||
<div className="section column is-one-quarter">
|
||||
<h1 className="title">Settings</h1>
|
||||
<aside className="menu">
|
||||
{map(settingsObject, (settingObject, idx) => {
|
||||
return (
|
||||
<div key={idx}>
|
||||
<p className="menu-label">{settingObject.category}</p>
|
||||
{/* First level children */}
|
||||
{!isUndefined(settingObject.children) ? (
|
||||
<ul className="menu-list" key={settingObject.id}>
|
||||
{map(settingObject.children, (item, idx) => {
|
||||
return (
|
||||
<li key={idx}>
|
||||
<a
|
||||
className={
|
||||
item.id.toString() === active ? "is-active" : ""
|
||||
}
|
||||
onClick={() => setActive(item.id.toString())}
|
||||
>
|
||||
{item.displayName}
|
||||
</a>
|
||||
{/* Second level children */}
|
||||
{!isUndefined(item.children) ? (
|
||||
<ul>
|
||||
{map(item.children, (item, idx) => (
|
||||
<li key={item.id}>
|
||||
<a
|
||||
className={
|
||||
item.id.toString() === active
|
||||
? "is-active"
|
||||
: ""
|
||||
}
|
||||
onClick={() =>
|
||||
setActive(item.id.toString())
|
||||
}
|
||||
>
|
||||
{item.displayName}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{/* content for settings */}
|
||||
<div className="section column is-half mt-6">
|
||||
<div className="content">
|
||||
{map(settingsContent, ({ id, content }) =>
|
||||
active === id ? content : null,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { ReactElement, useCallback } from "react";
|
||||
import { flushDb } from "../../../actions/settings.actions";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
export const SystemSettingsForm = (): ReactElement => {
|
||||
const dispatch = useDispatch();
|
||||
const isSettingsCallInProgress = useSelector(
|
||||
(state: RootState) => state.settings.inProgress,
|
||||
);
|
||||
const flushDatabase = useCallback(() => {
|
||||
dispatch(flushDb());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="is-clearfix">
|
||||
<div className="mt-4">
|
||||
<h3 className="title">Flush DB and Temporary Folders</h3>
|
||||
<h6 className="subtitle has-text-grey-light">
|
||||
If you are encountering issues, start over using this functionality.
|
||||
</h6>
|
||||
<article className="message is-danger">
|
||||
<div className="message-body is-size-6 is-family-secondary">
|
||||
Flushing and resetting will clear out:
|
||||
<p>
|
||||
<small>(This action is irreversible)</small>
|
||||
</p>
|
||||
<ol>
|
||||
<li>The mongo collection that holds library metadata</li>
|
||||
|
||||
<li>
|
||||
Your <code>USERDATA_DIRECTORY</code> which includes
|
||||
<code>covers</code>, <code>temporary</code> and
|
||||
<code>expanded</code> subfolders.
|
||||
</li>
|
||||
<li>
|
||||
Your <code>Elasticsearch indices</code>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="message is-info">
|
||||
<div className="message-body is-size-6 is-family-secondary">
|
||||
Your comic book files are not touched, and your settings will remain
|
||||
intact.
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<button
|
||||
className={
|
||||
isSettingsCallInProgress
|
||||
? "button is-danger is-loading"
|
||||
: "button is-danger"
|
||||
}
|
||||
onClick={flushDatabase}
|
||||
>
|
||||
<span className="icon">
|
||||
<i className="fas fa-eraser"></i>
|
||||
</span>
|
||||
<span>Flush DB & Temporary Folders</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SystemSettingsForm;
|
||||
Reference in New Issue
Block a user