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

src/components/Common/Modal/index.tsx

@@ -63,126 +63,122 @@ const Modal: React.FC<ModalProps> = ({
   });
   useLockBodyScroll(true, disableScrollLock);
 
-  return (
-    <>
-      {ReactDOM.createPortal(
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+  return ReactDOM.createPortal(
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <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"
+      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
-          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;
-            }
-          }}
+          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}
         >
-          <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 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="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}
+              className={`mt-3 text-center sm:mt-0 sm:text-left ${
+                iconSvg ? 'sm:ml-4' : 'mb-6'
+              }`}
             >
-              <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
-                      className="text-lg leading-6 font-medium text-white"
-                      id="modal-headline"
-                    >
-                      {title}
-                    </h3>
-                  )}
-                </div>
-              </div>
-              {children && (
-                <div className="mt-4 text-sm leading-5 text-gray-300">
-                  {children}
-                </div>
+                  {title}
+                </h3>
+              )}
+            </div>
+          </div>
+          {children && (
+            <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>
               )}
-              {(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>
+              {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>
-          </Transition>
-        </div>,
-        document.body
-      )}
-    </>
+          )}
+        </div>
+      </Transition>
+    </div>,
+    document.body
   );
 };
 

src/components/Settings/RadarrModal/index.tsx

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

src/components/Settings/SonarrModal/index.tsx

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

src/hooks/useClickOutside.ts

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