fix(frontend): new radarr/sonarr ports will be converted to a number before posting

This commit is contained in:
sct
2020-12-14 06:37:34 +00:00
parent 5f09e83ed8
commit 92c9001c9d
4 changed files with 114 additions and 118 deletions

View File

@@ -63,126 +63,122 @@ const Modal: React.FC<ModalProps> = ({
}); });
useLockBodyScroll(true, disableScrollLock); useLockBodyScroll(true, disableScrollLock);
return ( return ReactDOM.createPortal(
<> // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ReactDOM.createPortal( <div
// eslint-disable-next-line jsx-a11y/no-static-element-interactions className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
onKeyDown={(e) => {
if (e.key === 'Escape') {
typeof onCancel === 'function' && backgroundClickable
? onCancel()
: undefined;
}
}}
>
<Transition
enter="transition opacity-0 duration-300 transform scale-75"
enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100"
leave="transition opacity-100 duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
show={loading}
>
<div style={{ position: 'absolute' }}>
<LoadingSpinner />
</div>
</Transition>
<Transition
enter="transition opacity-0 duration-300 transform scale-75"
enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100"
leave="transition opacity-100 duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
show={!loading}
>
<div <div
className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center" className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
onKeyDown={(e) => { role="dialog"
if (e.key === 'Escape') { aria-modal="true"
typeof onCancel === 'function' && backgroundClickable aria-labelledby="modal-headline"
? onCancel() ref={modalRef}
: undefined;
}
}}
> >
<Transition <div className="sm:flex sm:items-center">
enter="transition opacity-0 duration-300 transform scale-75" {iconSvg && (
enterFrom="opacity-0 scale-75" <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
enterTo="opacity-100 scale-100" {iconSvg}
leave="transition opacity-100 duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
show={loading}
>
<div style={{ position: 'absolute' }}>
<LoadingSpinner />
</div>
</Transition>
<Transition
enter="transition opacity-0 duration-300 transform scale-75"
enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100"
leave="transition opacity-100 duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
show={!loading}
>
<div
className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
ref={modalRef}
>
<div className="sm:flex sm:items-center">
{iconSvg && (
<div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
{iconSvg}
</div>
)}
<div
className={`mt-3 text-center sm:mt-0 sm:text-left ${
iconSvg ? 'sm:ml-4' : 'mb-6'
}`}
>
{title && (
<h3
className="text-lg leading-6 font-medium text-white"
id="modal-headline"
>
{title}
</h3>
)}
</div>
</div> </div>
{children && ( )}
<div className="mt-4 text-sm leading-5 text-gray-300"> <div
{children} className={`mt-3 text-center sm:mt-0 sm:text-left ${
</div> iconSvg ? 'sm:ml-4' : 'mb-6'
)} }`}
{(onCancel || onOk || onSecondary || onTertiary) && ( >
<div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse"> {title && (
{typeof onOk === 'function' && ( <h3
<Button className="text-lg leading-6 font-medium text-white"
buttonType={okButtonType} id="modal-headline"
onClick={onOk} >
className="ml-3" {title}
disabled={okDisabled} </h3>
>
{okText ? okText : 'Ok'}
</Button>
)}
{typeof onSecondary === 'function' && secondaryText && (
<Button
buttonType={secondaryButtonType}
onClick={onSecondary}
className="ml-3"
disabled={secondaryDisabled}
>
{secondaryText}
</Button>
)}
{typeof onTertiary === 'function' && tertiaryText && (
<Button
buttonType={tertiaryButtonType}
onClick={onTertiary}
className="ml-3"
disabled={tertiaryDisabled}
>
{tertiaryText}
</Button>
)}
{typeof onCancel === 'function' && (
<Button
buttonType={cancelButtonType}
onClick={onCancel}
className="ml-3 sm:ml-0 sm:px-4"
>
{cancelText
? cancelText
: intl.formatMessage(globalMessages.cancel)}
</Button>
)}
</div>
)} )}
</div> </div>
</Transition> </div>
</div>, {children && (
document.body <div className="mt-4 text-sm leading-5 text-gray-300">
)} {children}
</> </div>
)}
{(onCancel || onOk || onSecondary || onTertiary) && (
<div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
{typeof onOk === 'function' && (
<Button
buttonType={okButtonType}
onClick={onOk}
className="ml-3"
disabled={okDisabled}
>
{okText ? okText : 'Ok'}
</Button>
)}
{typeof onSecondary === 'function' && secondaryText && (
<Button
buttonType={secondaryButtonType}
onClick={onSecondary}
className="ml-3"
disabled={secondaryDisabled}
>
{secondaryText}
</Button>
)}
{typeof onTertiary === 'function' && tertiaryText && (
<Button
buttonType={tertiaryButtonType}
onClick={onTertiary}
className="ml-3"
disabled={tertiaryDisabled}
>
{tertiaryText}
</Button>
)}
{typeof onCancel === 'function' && (
<Button
buttonType={cancelButtonType}
onClick={onCancel}
className="ml-3 sm:ml-0 sm:px-4"
>
{cancelText
? cancelText
: intl.formatMessage(globalMessages.cancel)}
</Button>
)}
</div>
)}
</div>
</Transition>
</div>,
document.body
); );
}; };

View File

@@ -108,7 +108,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
{ {
hostname, hostname,
apiKey, apiKey,
port, port: Number(port),
baseUrl, baseUrl,
useSsl, useSsl,
} }

View File

@@ -111,7 +111,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
{ {
hostname, hostname,
apiKey, apiKey,
port, port: Number(port),
baseUrl, baseUrl,
useSsl, useSsl,
} }

View File

@@ -15,7 +15,7 @@ const useClickOutside = (
): void => { ): void => {
useEffect(() => { useEffect(() => {
const handleBodyClick = (e: MouseEvent) => { const handleBodyClick = (e: MouseEvent) => {
if (!ref.current?.contains(e.target as Node)) { if (ref.current && !ref.current.contains(e.target as Node)) {
callback(e); callback(e);
} }
}; };