Typings cleanup and improvements

(cherry picked from commit b2c43fb2a67965d68d3d35b72302b0cddb5aca23)

frontend/src/Components/Link/Link.js

@@ -1,98 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import styles from './Link.css';
-
-class Link extends Component {
-
-  //
-  // Listeners
-
-  onClick = (event) => {
-    const {
-      isDisabled,
-      onPress
-    } = this.props;
-
-    if (!isDisabled && onPress) {
-      onPress(event);
-    }
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      className,
-      component,
-      to,
-      target,
-      isDisabled,
-      noRouter,
-      onPress,
-      ...otherProps
-    } = this.props;
-
-    const linkProps = { target };
-    let el = component;
-
-    if (to) {
-      if ((/\w+?:\/\//).test(to)) {
-        el = 'a';
-        linkProps.href = to;
-        linkProps.target = target || '_blank';
-        linkProps.rel = 'noreferrer';
-      } else if (noRouter) {
-        el = 'a';
-        linkProps.href = to;
-        linkProps.target = target || '_self';
-      } else {
-        el = RouterLink;
-        linkProps.to = `${window.Prowlarr.urlBase}/${to.replace(/^\//, '')}`;
-        linkProps.target = target;
-      }
-    }
-
-    if (el === 'button' || el === 'input') {
-      linkProps.type = otherProps.type || 'button';
-      linkProps.disabled = isDisabled;
-    }
-
-    linkProps.className = classNames(
-      className,
-      styles.link,
-      to && styles.to,
-      isDisabled && 'isDisabled'
-    );
-
-    const props = {
-      ...otherProps,
-      ...linkProps
-    };
-
-    props.onClick = this.onClick;
-
-    return (
-      React.createElement(el, props)
-    );
-  }
-}
-
-Link.propTypes = {
-  className: PropTypes.string,
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  to: PropTypes.string,
-  target: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  noRouter: PropTypes.bool,
-  onPress: PropTypes.func
-};
-
-Link.defaultProps = {
-  component: 'button',
-  noRouter: false
-};
-
-export default Link;

frontend/src/Components/Link/Link.tsx

@@ -0,0 +1,96 @@
+import classNames from 'classnames';
+import React, {
+  ComponentClass,
+  FunctionComponent,
+  SyntheticEvent,
+  useCallback,
+} from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import styles from './Link.css';
+
+interface ReactRouterLinkProps {
+  to?: string;
+}
+
+export interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
+  className?: string;
+  component?:
+    | string
+    | FunctionComponent<LinkProps>
+    | ComponentClass<LinkProps, unknown>;
+  to?: string;
+  target?: string;
+  isDisabled?: boolean;
+  noRouter?: boolean;
+  onPress?(event: SyntheticEvent): void;
+}
+function Link(props: LinkProps) {
+  const {
+    className,
+    component = 'button',
+    to,
+    target,
+    type,
+    isDisabled,
+    noRouter = false,
+    onPress,
+    ...otherProps
+  } = props;
+
+  const onClick = useCallback(
+    (event: SyntheticEvent) => {
+      if (!isDisabled && onPress) {
+        onPress(event);
+      }
+    },
+    [isDisabled, onPress]
+  );
+
+  const linkProps: React.HTMLProps<HTMLAnchorElement> & ReactRouterLinkProps = {
+    target,
+  };
+  let el = component;
+
+  if (to) {
+    if (/\w+?:\/\//.test(to)) {
+      el = 'a';
+      linkProps.href = to;
+      linkProps.target = target || '_blank';
+      linkProps.rel = 'noreferrer';
+    } else if (noRouter) {
+      el = 'a';
+      linkProps.href = to;
+      linkProps.target = target || '_self';
+    } else {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      el = RouterLink;
+      linkProps.to = `${window.Prowlarr.urlBase}/${to.replace(/^\//, '')}`;
+      linkProps.target = target;
+    }
+  }
+
+  if (el === 'button' || el === 'input') {
+    linkProps.type = type || 'button';
+    linkProps.disabled = isDisabled;
+  }
+
+  linkProps.className = classNames(
+    className,
+    styles.link,
+    to && styles.to,
+    isDisabled && 'isDisabled'
+  );
+
+  const elementProps = {
+    ...otherProps,
+    type,
+    ...linkProps,
+  };
+
+  elementProps.onClick = onClick;
+
+  return React.createElement(el, elementProps);
+}
+
+export default Link;