diff --git a/frontend/src/Components/SeriesTagList.tsx b/frontend/src/Components/SeriesTagList.tsx
new file mode 100644
index 000000000..bec6c28d5
--- /dev/null
+++ b/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 ;
+}
+
+export default SeriesTagList;
diff --git a/frontend/src/Components/TagList.js b/frontend/src/Components/TagList.js
deleted file mode 100644
index fe700b8fe..000000000
--- a/frontend/src/Components/TagList.js
+++ /dev/null
@@ -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 (
-
- {
- sortedTags.map((tag) => {
- return (
-
- );
- })
- }
-
- );
-}
-
-TagList.propTypes = {
- tags: PropTypes.arrayOf(PropTypes.number).isRequired,
- tagList: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default TagList;
diff --git a/frontend/src/Components/TagList.tsx b/frontend/src/Components/TagList.tsx
new file mode 100644
index 000000000..9f04d01a8
--- /dev/null
+++ b/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 (
+
+ {sortedTags.map((tag) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default TagList;
diff --git a/frontend/src/Components/TagListConnector.js b/frontend/src/Components/TagListConnector.js
deleted file mode 100644
index be7e618e3..000000000
--- a/frontend/src/Components/TagListConnector.js
+++ /dev/null
@@ -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);
diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx b/frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx
index dc2312193..fdd888410 100644
--- a/frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx
+++ b/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 ? (
-
+
) : null}
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
index 8e8b128aa..cbecf5ba8 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
+++ b/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 ? (
) : null}
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
index a85a95ae4..9af64f5be 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
+++ b/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 (
);
diff --git a/frontend/src/Series/Index/Table/SeriesIndexRow.tsx b/frontend/src/Series/Index/Table/SeriesIndexRow.tsx
index ec03f63a9..f7857017b 100644
--- a/frontend/src/Series/Index/Table/SeriesIndexRow.tsx
+++ b/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 (
-
+
);
}
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx b/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx
index 5e1a62cb5..e831ae4ec 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx
+++ b/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(
-
+
);
diff --git a/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx b/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx
index 095ac7c03..b8974cddf 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx
+++ b/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) {
-
+
);
diff --git a/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx b/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx
index c888b84c4..9cbfd5d1e 100644
--- a/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx
+++ b/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) {
{priority}
-
+
);