mirror/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr synced 2025-03-04 10:39:34 +00:00
Code Issues Releases Wiki Activity

Convert TagList components to TypeScript

Browse source
This commit is contained in:
Mark McDowall 2024-12-22 18:51:59 -08:00
parent 12a1ef0387
commit 20e1a8d116
No known key found for this signature in database
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/SeriesTagList.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 SeriesTagListProps {
tags: number[];
}
function SeriesTagList({ tags }: SeriesTagListProps) {
const tagList = useSelector(createTagsSelector());
return <TagList tags={tags} tagList={tagList} />;
}
export default SeriesTagList;

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/Series/Index/Overview/SeriesIndexOverview.tsx
View file

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

4
frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx
View file

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

4
frontend/src/Series/Index/Posters/SeriesIndexPosterInfo.tsx
View file

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

4
frontend/src/Series/Index/Table/SeriesIndexRow.tsx
View file

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

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

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

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

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

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

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