Convert TagList components to TypeScript

frontend/src/Components/SeriesTagList.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import TagList from './TagList';
+
+interface SeriesTagListProps {
+  tags: number[];
+}
+
+function SeriesTagList({ tags }: SeriesTagListProps) {
+  const tagList = useSelector(createTagsSelector());
+
+  return <TagList tags={tags} tagList={tagList} />;
+}
+
+export default SeriesTagList;

frontend/src/Components/TagList.js

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { kinds } from 'Helpers/Props';
-import sortByProp from 'Utilities/Array/sortByProp';
-import Label from './Label';
-import styles from './TagList.css';
-
-function TagList({ tags, tagList }) {
-  const sortedTags = tags
-    .map((tagId) => tagList.find((tag) => tag.id === tagId))
-    .filter((tag) => !!tag)
-    .sort(sortByProp('label'));
-
-  return (
-    <div className={styles.tags}>
-      {
-        sortedTags.map((tag) => {
-          return (
-            <Label
-              key={tag.id}
-              kind={kinds.INFO}
-            >
-              {tag.label}
-            </Label>
-          );
-        })
-      }
-    </div>
-  );
-}
-
-TagList.propTypes = {
-  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
-  tagList: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default TagList;

frontend/src/Components/TagList.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tag } from 'App/State/TagsAppState';
+import { kinds } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
+import Label from './Label';
+import styles from './TagList.css';
+
+interface TagListProps {
+  tags: number[];
+  tagList: Tag[];
+}
+
+function TagList({ tags, tagList }: TagListProps) {
+  const sortedTags = tags
+    .map((tagId) => tagList.find((tag) => tag.id === tagId))
+    .filter((tag) => !!tag)
+    .sort(sortByProp('label'));
+
+  return (
+    <div className={styles.tags}>
+      {sortedTags.map((tag) => {
+        return (
+          <Label key={tag.id} kind={kinds.INFO}>
+            {tag.label}
+          </Label>
+        );
+      })}
+    </div>
+  );
+}
+
+export default TagList;

frontend/src/Components/TagListConnector.js

@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import TagList from './TagList';
-
-function createMapStateToProps() {
-  return createSelector(
-    createTagsSelector(),
-    (tagList) => {
-      return {
-        tagList
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(TagList);

frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx

@@ -6,7 +6,7 @@ import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import TagListConnector from 'Components/TagListConnector';
+import SeriesTagList from 'Components/SeriesTagList';
 import { icons } from 'Helpers/Props';
 import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import EditSeriesModal from 'Series/Edit/EditSeriesModal';
@@ -230,7 +230,7 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
 
               {overviewOptions.showTags ? (
                 <div className={styles.tags}>
-                  <TagListConnector tags={tags} />
+                  <SeriesTagList tags={tags} />
                 </div>
               ) : null}
             </div>

frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx

@@ -6,7 +6,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import TagListConnector from 'Components/TagListConnector';
+import SeriesTagList from 'Components/SeriesTagList';
 import { icons } from 'Helpers/Props';
 import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import EditSeriesModal from 'Series/Edit/EditSeriesModal';
@@ -244,7 +244,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
       {showTags && tags.length ? (
         <div className={styles.tags}>
           <div className={styles.tagsList}>
-            <TagListConnector tags={tags} />
+            <SeriesTagList tags={tags} />
           </div>
         </div>
       ) : null}

frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import TagListConnector from 'Components/TagListConnector';
+import SeriesTagList from 'Components/SeriesTagList';
 import Language from 'Language/Language';
 import QualityProfile from 'typings/QualityProfile';
 import formatDateTime from 'Utilities/Date/formatDateTime';
@@ -131,7 +131,7 @@ function SeriesIndexPosterInfo(props: SeriesIndexPosterInfoProps) {
     return (
       <div className={styles.tags}>
         <div className={styles.tagsList}>
-          <TagListConnector tags={tags} />
+          <SeriesTagList tags={tags} />
         </div>
       </div>
     );

frontend/src/Series/Index/Table/SeriesIndexRow.tsx

@@ -12,7 +12,7 @@ import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import Column from 'Components/Table/Column';
-import TagListConnector from 'Components/TagListConnector';
+import SeriesTagList from 'Components/SeriesTagList';
 import { icons } from 'Helpers/Props';
 import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
 import EditSeriesModal from 'Series/Edit/EditSeriesModal';
@@ -432,7 +432,7 @@ function SeriesIndexRow(props: SeriesIndexRowProps) {
         if (name === 'tags') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              <TagListConnector tags={tags} />
+              <SeriesTagList tags={tags} />
             </VirtualTableRowCell>
           );
         }

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx

@@ -4,7 +4,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
-import TagListConnector from 'Components/TagListConnector';
+import SeriesTagList from 'Components/SeriesTagList';
 import { kinds } from 'Helpers/Props';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
@@ -80,7 +80,7 @@ function ManageDownloadClientsModalRow(
       </TableRowCell>
 
       <TableRowCell className={styles.tags}>
-        <TagListConnector tags={tags} />
+        <SeriesTagList tags={tags} />
       </TableRowCell>
     </TableRow>
   );

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx

@@ -4,7 +4,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
-import TagListConnector from 'Components/TagListConnector';
+import SeriesTagList from 'Components/SeriesTagList';
 import { createQualityProfileSelectorForHook } from 'Store/Selectors/createQualityProfileSelector';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
@@ -76,7 +76,7 @@ function ManageImportListsModalRow(props: ManageImportListsModalRowProps) {
       </TableRowCell>
 
       <TableRowCell className={styles.tags}>
-        <TagListConnector tags={tags} />
+        <SeriesTagList tags={tags} />
       </TableRowCell>
     </TableRow>
   );

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx

@@ -4,7 +4,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
-import TagListConnector from 'Components/TagListConnector';
+import SeriesTagList from 'Components/SeriesTagList';
 import { kinds } from 'Helpers/Props';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
@@ -91,7 +91,7 @@ function ManageIndexersModalRow(props: ManageIndexersModalRowProps) {
       <TableRowCell className={styles.priority}>{priority}</TableRowCell>
 
       <TableRowCell className={styles.tags}>
-        <TagListConnector tags={tags} />
+        <SeriesTagList tags={tags} />
       </TableRowCell>
     </TableRow>
   );