94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import React, { ReactElement } from "react";
|
|
import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
|
|
import { useQuery, useMutation, QueryClient } from "@tanstack/react-query";
|
|
import axios from "axios";
|
|
|
|
export const QbittorrentConnectionForm = (): ReactElement => {
|
|
const queryClient = new QueryClient();
|
|
// fetch settings
|
|
const { data, isLoading, isError } = useQuery({
|
|
queryKey: ["settings"],
|
|
queryFn: async () =>
|
|
await axios({
|
|
url: "http://localhost:3000/api/settings/getAllSettings",
|
|
method: "GET",
|
|
}),
|
|
});
|
|
console.log(data);
|
|
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,
|
|
});
|
|
// 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" },
|
|
}),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["settings", "qbittorrentClientInfo"],
|
|
});
|
|
},
|
|
});
|
|
|
|
if (isError)
|
|
return (
|
|
<>
|
|
<pre>Something went wrong connecting to qBittorrent.</pre>
|
|
</>
|
|
);
|
|
if (!isLoading) {
|
|
return (
|
|
<>
|
|
<ConnectionForm
|
|
initialData={hostDetails}
|
|
formHeading={"qBittorrent Configuration"}
|
|
submitHandler={mutate}
|
|
/>
|
|
|
|
<span className="flex items-center mt-10 mb-4">
|
|
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
|
|
qBittorrent Client Information
|
|
</span>
|
|
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
|
|
</span>
|
|
|
|
<div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
|
|
<span className="inline-flex justify-center rounded-full bg-emerald-100 mb-4 px-2 py-0.5 text-emerald-700">
|
|
<span className="h-5 w-6">
|
|
<i className="icon-[solar--plug-circle-bold] h-5 w-5"></i>
|
|
</span>
|
|
<p className="whitespace-nowrap text-sm">Connected</p>
|
|
</span>
|
|
<pre className="font-hasklig text-sm text-slate-700 dark:text-slate-700">
|
|
{JSON.stringify(qbittorrentClientInfo?.data, null, 4)}
|
|
</pre>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default QbittorrentConnectionForm;
|