tedkulp/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2026-04-18 21:35:51 -04:00
Code Issues Projects Releases Wiki Activity

Convert Movie Titles to TypeScript

Browse Source
This commit is contained in:
Bogdan
2024-09-16 00:56:23 +03:00
parent 5975be3690
commit 2fc32189d8
42 changed files with 190 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Movie/Details/MovieDetails.js
+1 -1
View File
@@ -26,6 +26,7 @@ import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
import MovieHistoryModal from 'Movie/History/MovieHistoryModal';
import MovieCollectionLabelConnector from 'Movie/MovieCollectionLabelConnector';
import MoviePoster from 'Movie/MoviePoster';
import MovieInteractiveSearchModal from 'Movie/Search/MovieInteractiveSearchModal';
import MovieFileEditorTable from 'MovieFile/Editor/MovieFileEditorTable';
@@ -37,7 +38,6 @@ import * as keyCodes from 'Utilities/Constants/keyCodes';
import formatRuntime from 'Utilities/Date/formatRuntime';
import formatBytes from 'Utilities/Number/formatBytes';
import translate from 'Utilities/String/translate';
import MovieCollectionLabelConnector from './../MovieCollectionLabelConnector';
import MovieCastPosters from './Credits/Cast/MovieCastPosters';
import MovieCrewPosters from './Credits/Crew/MovieCrewPosters';
import MovieDetailsLinks from './MovieDetailsLinks';
frontend/src/Movie/Details/Titles/MovieTitlesRow.js
-40
View File
@@ -1,40 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow';
import titleCase from 'Utilities/String/titleCase';
class MovieTitlesRow extends Component {
//
// Render
render() {
const {
title,
sourceType
} = this.props;
return (
<TableRow>
<TableRowCell>
{title}
</TableRowCell>
<TableRowCell>
{titleCase(sourceType)}
</TableRowCell>
</TableRow>
);
}
}
MovieTitlesRow.propTypes = {
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
sourceType: PropTypes.string.isRequired
};
export default MovieTitlesRow;
frontend/src/Movie/Details/Titles/MovieTitlesRow.tsx
+21
View File
@@ -0,0 +1,21 @@
import React from 'react';
import TableRowCell from 'Components/Table/Cells/TableRowCell';
import TableRow from 'Components/Table/TableRow';
import titleCase from 'Utilities/String/titleCase';
interface MovieTitlesRowProps {
title: string;
sourceType: string;
}
function MovieTitlesRow({ title, sourceType }: MovieTitlesRowProps) {
return (
<TableRow>
<TableRowCell>{title}</TableRowCell>
<TableRowCell>{titleCase(sourceType)}</TableRowCell>
</TableRow>
);
}
export default MovieTitlesRow;
frontend/src/Movie/Details/Titles/MovieTitlesTable.css
+6
View File
@@ -1,3 +1,9 @@
.blankpad {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 2em;
}
.container {
border: 1px solid var(--borderColor);
border-radius: 4px;
frontend/src/Movie/Details/Titles/MovieTitlesTable.css.d.ts
Vendored
+1
View File
@@ -1,6 +1,7 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'blankpad': string;
'container': string;
}
export const cssExports: CssExports;
frontend/src/Movie/Details/Titles/MovieTitlesTable.js
-22
View File
@@ -1,22 +0,0 @@
import React from 'react';
import MovieTitlesTableContentConnector from './MovieTitlesTableContentConnector';
import styles from './MovieTitlesTable.css';
function MovieTitlesTable(props) {
const {
...otherProps
} = props;
return (
<div className={styles.container}>
<MovieTitlesTableContentConnector
{...otherProps}
/>
</div>
);
}
MovieTitlesTable.propTypes = {
};
export default MovieTitlesTable;
frontend/src/Movie/Details/Titles/MovieTitlesTable.tsx
+94
View File
@@ -0,0 +1,94 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';
import AppState from 'App/State/AppState';
import Alert from 'Components/Alert';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Column from 'Components/Table/Column';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import { kinds } from 'Helpers/Props';
import sortByProp from 'Utilities/Array/sortByProp';
import translate from 'Utilities/String/translate';
import MovieTitlesRow from './MovieTitlesRow';
import styles from './MovieTitlesTable.css';
const columns: Column[] = [
{
name: 'alternativeTitle',
label: () => translate('AlternativeTitle'),
isVisible: true,
},
{
name: 'sourceType',
label: () => translate('Type'),
isVisible: true,
},
];
function movieAlternativeTitlesSelector(movieId: number) {
return createSelector(
(state: AppState) => state.movies,
(movies) => {
const { isFetching, isPopulated, error, items } = movies;
const alternateTitles =
items.find((m) => m.id === movieId)?.alternateTitles ?? [];
return {
isFetching,
isPopulated,
error,
items: alternateTitles,
};
}
);
}
interface MovieTitlesProps {
movieId: number;
}
function MovieTitlesTable({ movieId }: MovieTitlesProps) {
const { isFetching, isPopulated, error, items } = useSelector(
movieAlternativeTitlesSelector(movieId)
);
const sortedItems = items.sort(sortByProp('title'));
if (!isFetching && !!error) {
return (
<Alert kind={kinds.DANGER}>
{translate('AlternativeTitlesLoadError')}
</Alert>
);
}
return (
<div className={styles.container}>
{isFetching && <LoadingIndicator />}
{isPopulated && !items.length && !error ? (
<div className={styles.blankpad}>
{translate('NoAlternativeTitles')}
</div>
) : null}
{isPopulated && !!items.length && !error ? (
<Table columns={columns}>
<TableBody>
{sortedItems.map((item) => (
<MovieTitlesRow
key={item.id}
title={item.title}
sourceType={item.sourceType}
/>
))}
</TableBody>
</Table>
) : null}
</div>
);
}
export default MovieTitlesTable;
frontend/src/Movie/Details/Titles/MovieTitlesTableContent.css
-5
View File
@@ -1,5 +0,0 @@
.blankpad {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 2em;
}
frontend/src/Movie/Details/Titles/MovieTitlesTableContent.css.d.ts
Vendored
-7
View File
@@ -1,7 +0,0 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
'blankpad': string;
}
export const cssExports: CssExports;
export default cssExports;
frontend/src/Movie/Details/Titles/MovieTitlesTableContent.js
-87
View File
@@ -1,87 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Table from 'Components/Table/Table';
import TableBody from 'Components/Table/TableBody';
import translate from 'Utilities/String/translate';
import MovieTitlesRow from './MovieTitlesRow';
import styles from './MovieTitlesTableContent.css';
const columns = [
{
name: 'altTitle',
label: () => translate('AlternativeTitle'),
isVisible: true
},
{
name: 'sourceType',
label: () => translate('Type'),
isVisible: true
}
];
class MovieTitlesTableContent extends Component {
//
// Render
render() {
const {
isFetching,
isPopulated,
error,
items
} = this.props;
const hasItems = !!items.length;
return (
<div>
{
isFetching &&
<LoadingIndicator />
}
{
!isFetching && !!error &&
<div className={styles.blankpad}>
{translate('UnableToLoadAltTitle')}
</div>
}
{
isPopulated && !hasItems && !error &&
<div className={styles.blankpad}>
{translate('NoAltTitle')}
</div>
}
{
isPopulated && hasItems && !error &&
<Table columns={columns}>
<TableBody>
{
items.reverse().map((item) => {
return (
<MovieTitlesRow
key={item.id}
{...item}
/>
);
})
}
</TableBody>
</Table>
}
</div>
);
}
}
MovieTitlesTableContent.propTypes = {
isFetching: PropTypes.bool.isRequired,
isPopulated: PropTypes.bool.isRequired,
error: PropTypes.object,
items: PropTypes.arrayOf(PropTypes.object).isRequired
};
export default MovieTitlesTableContent;
frontend/src/Movie/Details/Titles/MovieTitlesTableContentConnector.js
-60
View File
@@ -1,60 +0,0 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import MovieTitlesTableContent from './MovieTitlesTableContent';
function createMapStateToProps() {
return createSelector(
(state, { movieId }) => movieId,
(state) => state.movies,
(movieId, movies) => {
const {
isFetching,
isPopulated,
error,
items
} = movies;
const alternateTitles = items.find((m) => m.id === movieId)?.alternateTitles;
return {
isFetching,
isPopulated,
error,
alternateTitles
};
}
);
}
class MovieTitlesTableContentConnector extends Component {
//
// Render
render() {
const {
alternateTitles,
...otherProps
} = this.props;
return (
<MovieTitlesTableContent
{...otherProps}
items={alternateTitles}
/>
);
}
}
MovieTitlesTableContentConnector.propTypes = {
movieId: PropTypes.number.isRequired,
alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired
};
MovieTitlesTableContentConnector.defaultProps = {
alternateTitles: []
};
export default connect(createMapStateToProps)(MovieTitlesTableContentConnector);
frontend/src/Movie/Movie.ts
+6
View File
@@ -39,6 +39,11 @@ export interface Ratings {
rottenTomatoes: RatingValues;
}
export interface AlternativeTitle extends ModelBase {
sourceType: string;
title: string;
}
interface Movie extends ModelBase {
tmdbId: number;
imdbId?: string;
@@ -52,6 +57,7 @@ interface Movie extends ModelBase {
originalTitle: string;
originalLanguage: Language;
collection: Collection;
alternateTitles: AlternativeTitle[];
studio: string;
qualityProfileId: number;
added: string;