Convert QualityProfileName to TypeScript

frontend/src/Author/Details/AuthorDetailsHeader.js

@@ -11,7 +11,7 @@ import MonitorToggleButton from 'Components/MonitorToggleButton';
 import Popover from 'Components/Tooltip/Popover';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
+import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName';
 import fonts from 'Styles/Variables/fonts';
 import formatBytes from 'Utilities/Number/formatBytes';
 import stripHtml from 'Utilities/String/stripHtml';
@@ -213,7 +213,7 @@ class AuthorDetailsHeader extends Component {
 
                 <span className={styles.qualityProfileName}>
                   {
-                    <QualityProfileNameConnector
+                    <QualityProfileName
                       qualityProfileId={qualityProfileId}
                     />
                   }

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);

src/NzbDrone.Core/Localization/Core/en.json

@@ -1063,6 +1063,7 @@
   "UnableToLoadTheCalendar": "Unable to load the calendar",
   "UnableToLoadUISettings": "Unable to load UI settings",
   "Ungroup": "Ungroup",
+  "Unknown": "Unknown",
   "UnmappedFiles": "Unmapped Files",
   "Unmonitored": "Unmonitored",
   "UnmonitoredHelpText": "Include unmonitored books in the iCal feed",