Backup_Repos/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr synced 2025-12-06 08:28:50 +01:00
Code Issues Projects Releases Wiki Activity

Convert TagList components to TypeScript

Browse source 
(cherry picked from commit 20e1a8d116cf60d619f9525cc82867483d38df84)
This commit is contained in:
Mark McDowall 2024-12-22 18:51:59 -08:00 committed by Bogdan
parent 937557e214
commit 371ac0921d
11 changed files with 62 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/Components/MovieTagList.tsx Normal file
View file

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

37
frontend/src/Components/TagList.js
View file

@ -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;

32
frontend/src/Components/TagList.tsx Normal file
View file

@ -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;

17
frontend/src/Components/TagListConnector.js
View file

@ -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);

4
frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
View file

@ -6,7 +6,7 @@ import Icon from 'Components/Icon';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import TagListConnector from 'Components/TagListConnector';
import MovieTagList from 'Components/MovieTagList';
import Popover from 'Components/Tooltip/Popover';
import { icons } from 'Helpers/Props';
import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@ -231,7 +231,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
{overviewOptions.showTags ? (
<div className={styles.tags}>
<TagListConnector tags={tags} />
<MovieTagList tags={tags} />
</div>
) : null}
</div>

4
frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
View file

@ -7,8 +7,8 @@ import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import MovieTagList from 'Components/MovieTagList';
import RottenTomatoRating from 'Components/RottenTomatoRating';
import TagListConnector from 'Components/TagListConnector';
import TmdbRating from 'Components/TmdbRating';
import Popover from 'Components/Tooltip/Popover';
import TraktRating from 'Components/TraktRating';
@ -346,7 +346,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
{showTags && tags.length ? (
<div className={styles.tags}>
<div className={styles.tagsList}>
<TagListConnector tags={tags} />
<MovieTagList tags={tags} />
</div>
</div>
) : null}

4
frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
View file

@ -1,8 +1,8 @@
import React from 'react';
import Icon from 'Components/Icon';
import ImdbRating from 'Components/ImdbRating';
import MovieTagList from 'Components/MovieTagList';
import RottenTomatoRating from 'Components/RottenTomatoRating';
import TagListConnector from 'Components/TagListConnector';
import TmdbRating from 'Components/TmdbRating';
import TraktRating from 'Components/TraktRating';
import { icons } from 'Helpers/Props';
@ -261,7 +261,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
return (
<div className={styles.tags}>
<div className={styles.tagsList}>
<TagListConnector tags={tags} />
<MovieTagList tags={tags} />
</div>
</div>
);

4
frontend/src/Movie/Index/Table/MovieIndexRow.tsx
View file

@ -6,12 +6,12 @@ import Icon from 'Components/Icon';
import ImdbRating from 'Components/ImdbRating';
import IconButton from 'Components/Link/IconButton';
import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
import MovieTagList from 'Components/MovieTagList';
import RottenTomatoRating from 'Components/RottenTomatoRating';
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 TmdbRating from 'Components/TmdbRating';
import Tooltip from 'Components/Tooltip/Tooltip';
import TraktRating from 'Components/TraktRating';
@ -429,7 +429,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
if (name === 'tags') {
return (
<VirtualTableRowCell key={name} className={styles[name]}>
<TagListConnector tags={tags} />
<MovieTagList tags={tags} />
</VirtualTableRowCell>
);
}

4
frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx
View file

@ -1,10 +1,10 @@
import React, { useCallback } from 'react';
import Label from 'Components/Label';
import MovieTagList from 'Components/MovieTagList';
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 { 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} />
<MovieTagList tags={tags} />
</TableRowCell>
</TableRow>
);

4
frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx
View file

@ -1,10 +1,10 @@
import React, { useCallback } from 'react';
import { useSelector } from 'react-redux';
import MovieTagList from 'Components/MovieTagList';
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 { createQualityProfileSelectorForHook } from 'Store/Selectors/createQualityProfileSelector';
import { SelectStateInputProps } from 'typings/props';
import firstCharToUpper from 'Utilities/String/firstCharToUpper';
@ -89,7 +89,7 @@ function ManageImportListsModalRow(props: ManageImportListsModalRowProps) {
</TableRowCell>
<TableRowCell className={styles.tags}>
<TagListConnector tags={tags} />
<MovieTagList tags={tags} />
</TableRowCell>
</TableRow>
);

4
frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx
View file

@ -1,10 +1,10 @@
import React, { useCallback } from 'react';
import Label from 'Components/Label';
import MovieTagList from 'Components/MovieTagList';
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 { 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} />
<MovieTagList tags={tags} />
</TableRowCell>
</TableRow>
);