Add translations to frontend/InteractiveImport

frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.tsx

@@ -71,7 +71,7 @@ interface SelectEpisodeModalContentProps {
   isAnime: boolean;
   sortKey?: string;
   sortDirection?: string;
-  modalTitle?: string;
+  modalTitle: string;
   onEpisodesSelect(selectedEpisodes: SelectedEpisode[]): unknown;
   onModalClose(): unknown;
 }
@@ -103,7 +103,7 @@ function SelectEpisodeModalContent(props: SelectEpisodeModalContentProps) {
   const dispatch = useDispatch();
 
   const filterEpisodeNumber = parseInt(filter);
-  const errorMessage = getErrorMessage(error, 'Unable to load episodes');
+  const errorMessage = getErrorMessage(error, translate('EpisodesLoadError'));
   const selectedCount = selectedIds.length;
   const selectedEpisodesCount = getSelectedIds(selectedState).length;
   const selectionIsValid =
@@ -197,13 +197,15 @@ function SelectEpisodeModalContent(props: SelectEpisodeModalContentProps) {
   if (!details) {
     details =
       selectedCount > 1
-        ? `${selectedCount} selected files`
-        : `${selectedCount} selected file`;
+        ? translate('CountSelectedFiles', { selectedCount })
+        : translate('CountSelectedFile', { selectedCount });
   }
 
   return (
     <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>{modalTitle} - Select Episode(s)</ModalHeader>
+      <ModalHeader>
+        {translate('SelectEpisodesModalTitle', { modalTitle })}
+      </ModalHeader>
 
       <ModalBody
         className={styles.modalBody}
@@ -211,7 +213,7 @@ function SelectEpisodeModalContent(props: SelectEpisodeModalContentProps) {
       >
         <TextInput
           className={styles.filterInput}
-          placeholder="Filter episodes by title or number"
+          placeholder={translate('FilterEpisodesPlaceholder')}
           name="filter"
           value={filter}
           autoFocus={true}
@@ -256,7 +258,7 @@ function SelectEpisodeModalContent(props: SelectEpisodeModalContentProps) {
           ) : null}
 
           {isPopulated && !items.length
-            ? 'No episodes were found for the selected season'
+            ? translate('NoEpisodesFoundForSelectedSeason')
             : null}
         </Scroller>
       </ModalBody>
@@ -265,14 +267,14 @@ function SelectEpisodeModalContent(props: SelectEpisodeModalContentProps) {
         <div className={styles.details}>{details}</div>
 
         <div className={styles.buttons}>
-          <Button onPress={onModalClose}>Cancel</Button>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
 
           <Button
             kind={kinds.SUCCESS}
             isDisabled={!selectionIsValid}
             onPress={onEpisodesSelectWrapper}
           >
-            Select Episodes
+            {translate('SelectEpisodes')}
           </Button>
         </div>
       </ModalFooter>