From 23c30734d2caa604a8bf1909974fe3f445203235 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 9 Mar 2025 22:02:04 +0200
Subject: [PATCH] Convert QualityProfileName to TypeScript

Co-authored-by: Mark McDowall <mark@mcdowall.ca>
---
 .../Collection/Overview/CollectionOverview.js |  4 +--
 frontend/src/Movie/Details/MovieDetails.tsx   |  6 ++--
 .../Profiles/Quality/QualityProfileName.tsx   | 18 +++++++++++
 .../Quality/QualityProfileNameConnector.js    | 31 -------------------
 4 files changed, 22 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/Settings/Profiles/Quality/QualityProfileName.tsx
 delete mode 100644 frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js

diff --git a/frontend/src/Collection/Overview/CollectionOverview.js b/frontend/src/Collection/Overview/CollectionOverview.js
index 18b1f7004c..708a9fbbd7 100644
--- a/frontend/src/Collection/Overview/CollectionOverview.js
+++ b/frontend/src/Collection/Overview/CollectionOverview.js
@@ -11,7 +11,7 @@ import IconButton from 'Components/Link/IconButton';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import { icons, sizes } from 'Helpers/Props';
 import MovieGenres from 'Movie/MovieGenres';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
+import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName';
 import dimensions from 'Styles/Variables/dimensions';
 import fonts from 'Styles/Variables/fonts';
 import translate from 'Utilities/String/translate';
@@ -212,7 +212,7 @@ class CollectionOverview extends Component {
                         />
                         <span className={styles.qualityProfileName}>
                           {
-                            <QualityProfileNameConnector
+                            <QualityProfileName
                               qualityProfileId={qualityProfileId}
                             />
                           }
diff --git a/frontend/src/Movie/Details/MovieDetails.tsx b/frontend/src/Movie/Details/MovieDetails.tsx
index cf342a5e62..cdab8d801b 100644
--- a/frontend/src/Movie/Details/MovieDetails.tsx
+++ b/frontend/src/Movie/Details/MovieDetails.tsx
@@ -52,7 +52,7 @@ import MovieInteractiveSearchModal from 'Movie/Search/MovieInteractiveSearchModa
 import MovieFileEditorTable from 'MovieFile/Editor/MovieFileEditorTable';
 import ExtraFileTable from 'MovieFile/Extras/ExtraFileTable';
 import OrganizePreviewModal from 'Organize/OrganizePreviewModal';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
+import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName';
 import { executeCommand } from 'Store/Actions/commandActions';
 import {
   clearExtraFiles,
@@ -818,9 +818,7 @@ function MovieDetails({ movieId }: MovieDetailsProps) {
                   size={sizes.LARGE}
                 >
                   <span className={styles.qualityProfileName}>
-                    <QualityProfileNameConnector
-                      qualityProfileId={qualityProfileId}
-                    />
+                    <QualityProfileName qualityProfileId={qualityProfileId} />
                   </span>
                 </InfoLabel>
 
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileName.tsx b/frontend/src/Settings/Profiles/Quality/QualityProfileName.tsx
new file mode 100644
index 0000000000..bbb3e6f085
--- /dev/null
+++ b/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;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js
deleted file mode 100644
index bf13815ff2..0000000000
--- a/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js
+++ /dev/null
@@ -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);