Files
threetwo/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx

68 lines
2.0 KiB
TypeScript

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;