97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
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;
|