Show renamer name and version when selecting config

ShokoAnime · Nov 1, 2024 · a3b5936 · a3b5936
1 parent f47a20d
commit a3b5936
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/components/Utilities/Renamer/ConfigModal.tsx b/src/components/Utilities/Renamer/ConfigModal.tsx
@@ -107,7 +107,7 @@ const ConfigModal = (props: Props) => {
       >
         {renamers?.map(renamer => (
           <option key={renamer.RenamerID} value={renamer.RenamerID}>
-            {renamer.Name}
+            {`${renamer.Name} - ${renamer.Version}`}
           </option>
         ))}
 

diff --git a/src/pages/utilities/Renamer.tsx b/src/pages/utilities/Renamer.tsx
@@ -38,7 +38,7 @@ import {
   useRenamerRelocateMutation,
   useRenamerSaveConfigMutation,
 } from '@/core/react-query/renamer/mutations';
-import { useRenamerByConfigQuery, useRenamerConfigsQuery } from '@/core/react-query/renamer/queries';
+import { useRenamerByConfigQuery, useRenamerConfigsQuery, useRenamersQuery } from '@/core/react-query/renamer/queries';
 import { usePatchSettingsMutation } from '@/core/react-query/settings/mutations';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
 import { clearFiles, clearRenameResults, removeFiles } from '@/core/slices/utilities/renamer';
@@ -268,6 +268,28 @@ const Menu = React.memo((props: MenuProps) => {
   );
 });
 
+const ConfigOption = React.memo(({ config }: { config: RenamerConfigType }) => {
+  const renamersQuery = useRenamersQuery();
+
+  const currentRenamer = useMemo(
+    () => find(renamersQuery.data, item => item.RenamerID === config.RenamerID),
+    [config.RenamerID, renamersQuery.data],
+  );
+
+  let configName: string;
+  if (currentRenamer) {
+    configName = `${config.Name} (${currentRenamer.Name} - ${currentRenamer.Version})`;
+  } else {
+    configName = `${config.Name} (<Unknown>)`;
+  }
+
+  return (
+    <option value={config.Name}>
+      {configName}
+    </option>
+  );
+});
+
 const Renamer = () => {
   const dispatch = useDispatch();
   const addedFiles = useSelector((state: RootState) => state.utilities.renamer.files);
@@ -521,9 +543,7 @@ const Renamer = () => {
                     onChange={event => changeSelectedConfig(event.target.value)}
                   >
                     {renamerConfigsQuery.data.map(renamerConfig => (
-                      <option key={renamerConfig.Name} value={renamerConfig.Name}>
-                        {renamerConfig.Name}
-                      </option>
+                      <ConfigOption config={renamerConfig} key={renamerConfig.Name} />
                     ))}
 
                     {renamerConfigsQuery.data.length === 0 && (