131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
import React, { ReactElement, useEffect, useState, useContext } from "react";
|
|
import { Form, Field } from "react-final-form";
|
|
import { isEmpty, isNil, isUndefined } from "lodash";
|
|
import Select from "react-select";
|
|
import { saveSettings } from "../../../actions/settings.actions";
|
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
|
import { useStore } from "../../../store";
|
|
import { useShallow } from "zustand/react/shallow";
|
|
import axios from "axios";
|
|
|
|
export const AirDCPPHubsForm = (airDCPPClientUserSettings): ReactElement => {
|
|
const queryClient = useQueryClient();
|
|
const {
|
|
airDCPPSocketInstance,
|
|
airDCPPClientConfiguration,
|
|
airDCPPSessionInformation,
|
|
} = useStore(
|
|
useShallow((state) => ({
|
|
airDCPPSocketInstance: state.airDCPPSocketInstance,
|
|
airDCPPClientConfiguration: state.airDCPPClientConfiguration,
|
|
airDCPPSessionInformation: state.airDCPPSessionInformation,
|
|
})),
|
|
);
|
|
|
|
const {
|
|
data: settings,
|
|
isLoading,
|
|
isError,
|
|
} = useQuery({
|
|
queryKey: ["settings"],
|
|
queryFn: async () =>
|
|
await axios({
|
|
url: "http://localhost:3000/api/settings/getAllSettings",
|
|
method: "GET",
|
|
}),
|
|
});
|
|
|
|
console.log("Asd", settings);
|
|
// const {
|
|
// settings: {
|
|
// data: { directConnect },
|
|
// },
|
|
// } = data;
|
|
|
|
const { data: hubs } = useQuery({
|
|
queryKey: [],
|
|
queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
|
|
enabled: !!settings,
|
|
});
|
|
let hubList = {};
|
|
if (hubs) {
|
|
hubList = hubs.map(({ hub_url, identity }) => ({
|
|
value: hub_url,
|
|
label: identity.name,
|
|
}));
|
|
}
|
|
|
|
const { mutate } = useMutation({
|
|
mutationFn: async (values) =>
|
|
await axios({
|
|
url: `http://localhost:3000/api/settings/saveSettings`,
|
|
method: "POST",
|
|
data: { settingsPayload: values, settingsKey: "directConnect" },
|
|
}),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["settings"] });
|
|
},
|
|
});
|
|
|
|
const validate = async () => {};
|
|
|
|
const SelectAdapter = ({ input, ...rest }) => {
|
|
return <Select {...input} {...rest} isClearable isMulti />;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Form
|
|
onSubmit={mutate}
|
|
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 &&
|
|
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;
|