Convert QualityProfileName to TypeScript

Co-authored-by: Mark McDowall <mark@mcdowall.ca>

frontend/src/Settings/Profiles/Quality/QualityProfileName.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createQualityProfileSelectorForHook } from 'Store/Selectors/createQualityProfileSelector';
+import translate from 'Utilities/String/translate';
+
+interface QualityProfileNameProps {
+  qualityProfileId: number;
+}
+
+function QualityProfileName({ qualityProfileId }: QualityProfileNameProps) {
+  const qualityProfile = useSelector(
+    createQualityProfileSelectorForHook(qualityProfileId)
+  );
+
+  return <span>{qualityProfile?.name ?? translate('Unknown')}</span>;
+}
+
+export default QualityProfileName;

frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createQualityProfileSelector from 'Store/Selectors/createQualityProfileSelector';
-
-function createMapStateToProps() {
-  return createSelector(
-    createQualityProfileSelector(),
-    (qualityProfile) => {
-      return {
-        name: qualityProfile.name
-      };
-    }
-  );
-}
-
-function QualityProfileNameConnector({ name, ...otherProps }) {
-  return (
-    <span>
-      {name}
-    </span>
-  );
-}
-
-QualityProfileNameConnector.propTypes = {
-  qualityProfileId: PropTypes.number.isRequired,
-  name: PropTypes.string.isRequired
-};
-
-export default connect(createMapStateToProps)(QualityProfileNameConnector);