Typings cleanup and improvements

(cherry picked from commit b2c43fb2a67965d68d3d35b72302b0cddb5aca23)

frontend/src/Indexer/Index/Select/Delete/DeleteIndexerModalContent.tsx

@@ -7,6 +7,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
+import Indexer from 'Indexer/Indexer';
 import { bulkDeleteIndexers } from 'Store/Actions/indexerActions';
 import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
 import translate from 'Utilities/String/translate';
@@ -20,15 +21,15 @@ interface DeleteIndexerModalContentProps {
 function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
   const { indexerIds, onModalClose } = props;
 
-  const allIndexers = useSelector(createAllIndexersSelector());
+  const allIndexers: Indexer[] = useSelector(createAllIndexersSelector());
   const dispatch = useDispatch();
 
-  const selectedIndexers = useMemo(() => {
-    const indexers = indexerIds.map((id) => {
+  const indexers = useMemo((): Indexer[] => {
+    const indexerList = indexerIds.map((id) => {
       return allIndexers.find((s) => s.id === id);
-    });
+    }) as Indexer[];
 
-    return orderBy(indexers, ['sortName']);
+    return orderBy(indexerList, ['sortName']);
   }, [indexerIds, allIndexers]);
 
   const onDeleteIndexerConfirmed = useCallback(() => {
@@ -47,13 +48,11 @@ function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
 
       <ModalBody>
         <div className={styles.message}>
-          {translate('DeleteSelectedIndexersMessageText', [
-            selectedIndexers.length,
-          ])}
+          {translate('DeleteSelectedIndexersMessageText', [indexers.length])}
         </div>
 
         <ul>
-          {selectedIndexers.map((s) => {
+          {indexers.map((s) => {
             return (
               <li key={s.id}>
                 <span>{s.name}</span>

frontend/src/Indexer/Index/Select/Edit/EditIndexerModalContent.tsx

@@ -107,7 +107,7 @@ function EditIndexerModalContent(props: EditIndexerModalContentProps) {
   ]);
 
   const onInputChange = useCallback(
-    ({ name, value }) => {
+    ({ name, value }: { name: string; value: string }) => {
       switch (name) {
         case 'enable':
           setEnable(value);

frontend/src/Indexer/Index/Select/IndexerIndexSelectAllButton.tsx

@@ -7,7 +7,7 @@ import translate from 'Utilities/String/translate';
 interface IndexerIndexSelectAllButtonProps {
   label: string;
   isSelectMode: boolean;
-  overflowComponent: React.FunctionComponent;
+  overflowComponent: React.FunctionComponent<never>;
 }
 
 function IndexerIndexSelectAllButton(props: IndexerIndexSelectAllButtonProps) {

frontend/src/Indexer/Index/Select/IndexerIndexSelectFooter.tsx

@@ -15,6 +15,16 @@ import EditIndexerModal from './Edit/EditIndexerModal';
 import TagsModal from './Tags/TagsModal';
 import styles from './IndexerIndexSelectFooter.css';
 
+interface SavePayload {
+  enable?: boolean;
+  appProfileId?: number;
+  priority?: number;
+  minimumSeeders?: number;
+  seedRatio?: number;
+  seedTime?: number;
+  packSeedTime?: number;
+}
+
 const indexersEditorSelector = createSelector(
   (state: AppState) => state.indexers,
   (indexers) => {
@@ -60,7 +70,7 @@ function IndexerIndexSelectFooter() {
   }, [setIsEditModalOpen]);
 
   const onSavePress = useCallback(
-    (payload) => {
+    (payload: SavePayload) => {
       setIsSavingIndexer(true);
       setIsEditModalOpen(false);
 
@@ -83,7 +93,7 @@ function IndexerIndexSelectFooter() {
   }, [setIsTagsModalOpen]);
 
   const onApplyTagsPress = useCallback(
-    (tags, applyTags) => {
+    (tags: number[], applyTags: string) => {
       setIsSavingTags(true);
       setIsTagsModalOpen(false);
 

frontend/src/Indexer/Index/Select/IndexerIndexSelectModeButton.tsx

@@ -7,7 +7,7 @@ interface IndexerIndexSelectModeButtonProps {
   label: string;
   iconName: IconDefinition;
   isSelectMode: boolean;
-  overflowComponent: React.FunctionComponent;
+  overflowComponent: React.FunctionComponent<never>;
   onPress: () => void;
 }
 

frontend/src/Indexer/Index/Select/Tags/TagsModalContent.tsx

@@ -1,6 +1,7 @@
-import { concat, uniq } from 'lodash';
+import { uniq } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { Tag } from 'App/State/TagsAppState';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -12,6 +13,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import Indexer from 'Indexer/Indexer';
 import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
 import translate from 'Utilities/String/translate';
@@ -26,29 +28,35 @@ interface TagsModalContentProps {
 function TagsModalContent(props: TagsModalContentProps) {
   const { indexerIds, onModalClose, onApplyTagsPress } = props;
 
-  const allIndexers = useSelector(createAllIndexersSelector());
-  const tagList = useSelector(createTagsSelector());
+  const allIndexers: Indexer[] = useSelector(createAllIndexersSelector());
+  const tagList: Tag[] = useSelector(createTagsSelector());
 
   const [tags, setTags] = useState<number[]>([]);
   const [applyTags, setApplyTags] = useState('add');
 
   const indexerTags = useMemo(() => {
-    const indexers = indexerIds.map((id) => {
-      return allIndexers.find((s) => s.id === id);
-    });
+    const tags = indexerIds.reduce((acc: number[], id) => {
+      const s = allIndexers.find((s) => s.id === id);
 
-    return uniq(concat(...indexers.map((s) => s.tags)));
+      if (s) {
+        acc.push(...s.tags);
+      }
+
+      return acc;
+    }, []);
+
+    return uniq(tags);
   }, [indexerIds, allIndexers]);
 
   const onTagsChange = useCallback(
-    ({ value }) => {
+    ({ value }: { value: number[] }) => {
       setTags(value);
     },
     [setTags]
   );
 
   const onApplyTagsChange = useCallback(
-    ({ value }) => {
+    ({ value }: { value: string }) => {
       setApplyTags(value);
     },
     [setApplyTags]