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} - + );