(cherry picked from commit 85e285598106346099ceae676599c5cb4b789c92)pull/8842/head
parent
5f70581a59
commit
faaef80a80
@ -0,0 +1,34 @@
|
|||||||
|
import ModelBase from 'App/ModelBase';
|
||||||
|
import { AppSectionItemState } from 'App/State/AppSectionState';
|
||||||
|
import Language from 'Language/Language';
|
||||||
|
import Movie from 'Movie/Movie';
|
||||||
|
import { QualityModel } from 'Quality/Quality';
|
||||||
|
import CustomFormat from 'typings/CustomFormat';
|
||||||
|
|
||||||
|
export interface ParsedMovieInfo {
|
||||||
|
releaseTitle: string;
|
||||||
|
originalTitle: string;
|
||||||
|
movieTitle: string;
|
||||||
|
movieTitles: string[];
|
||||||
|
year: number;
|
||||||
|
quality: QualityModel;
|
||||||
|
languages: Language[];
|
||||||
|
releaseHash: string;
|
||||||
|
releaseGroup?: string;
|
||||||
|
edition?: string;
|
||||||
|
tmdbId?: number;
|
||||||
|
imdbId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ParseModel extends ModelBase {
|
||||||
|
title: string;
|
||||||
|
parsedMovieInfo: ParsedMovieInfo;
|
||||||
|
movie?: Movie;
|
||||||
|
languages?: Language[];
|
||||||
|
customFormats?: CustomFormat[];
|
||||||
|
customFormatScore?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
type ParseAppState = AppSectionItemState<ParseModel>;
|
||||||
|
|
||||||
|
export default ParseAppState;
|
@ -0,0 +1,45 @@
|
|||||||
|
.inputContainer {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputIconContainer {
|
||||||
|
width: 58px;
|
||||||
|
height: 46px;
|
||||||
|
border: 1px solid var(--inputBorderColor);
|
||||||
|
border-right: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
background-color: var(--inputIconContainerBackgroundColor);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 46px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
composes: input from '~Components/Form/TextInput.css';
|
||||||
|
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearButton {
|
||||||
|
border: 1px solid var(--inputBorderColor);
|
||||||
|
border-left: none;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: $largeFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpText {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
@ -0,0 +1,12 @@
|
|||||||
|
// This file is automatically generated.
|
||||||
|
// Please do not change this file!
|
||||||
|
interface CssExports {
|
||||||
|
'clearButton': string;
|
||||||
|
'helpText': string;
|
||||||
|
'input': string;
|
||||||
|
'inputContainer': string;
|
||||||
|
'inputIconContainer': string;
|
||||||
|
'message': string;
|
||||||
|
}
|
||||||
|
export const cssExports: CssExports;
|
||||||
|
export default cssExports;
|
@ -0,0 +1,111 @@
|
|||||||
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import TextInput from 'Components/Form/TextInput';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||||
|
import PageContent from 'Components/Page/PageContent';
|
||||||
|
import PageContentBody from 'Components/Page/PageContentBody';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import { clear, fetch } from 'Store/Actions/parseActions';
|
||||||
|
import getErrorMessage from 'Utilities/Object/getErrorMessage';
|
||||||
|
import ParseResult from './ParseResult';
|
||||||
|
import parseStateSelector from './parseStateSelector';
|
||||||
|
import styles from './Parse.css';
|
||||||
|
|
||||||
|
function Parse() {
|
||||||
|
const { isFetching, error, item } = useSelector(parseStateSelector());
|
||||||
|
|
||||||
|
const [title, setTitle] = useState('');
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const onInputChange = useCallback(
|
||||||
|
({ value }: { value: string }) => {
|
||||||
|
const trimmedValue = value.trim();
|
||||||
|
|
||||||
|
setTitle(value);
|
||||||
|
|
||||||
|
if (trimmedValue === '') {
|
||||||
|
dispatch(clear());
|
||||||
|
} else {
|
||||||
|
dispatch(fetch({ title: trimmedValue }));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[setTitle, dispatch]
|
||||||
|
);
|
||||||
|
|
||||||
|
const onClearPress = useCallback(() => {
|
||||||
|
setTitle('');
|
||||||
|
dispatch(clear());
|
||||||
|
}, [setTitle, dispatch]);
|
||||||
|
|
||||||
|
useEffect(
|
||||||
|
() => {
|
||||||
|
return () => {
|
||||||
|
dispatch(clear());
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContent title="Parse">
|
||||||
|
<PageContentBody>
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<div className={styles.inputIconContainer}>
|
||||||
|
<Icon name={icons.PARSE} size={20} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
className={styles.input}
|
||||||
|
name="title"
|
||||||
|
value={title}
|
||||||
|
placeholder="eg. Movie.Title.2020.720p.HDTV-RlsGroup"
|
||||||
|
autoFocus={true}
|
||||||
|
onChange={onInputChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button className={styles.clearButton} onPress={onClearPress}>
|
||||||
|
<Icon name={icons.REMOVE} size={20} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isFetching ? <LoadingIndicator /> : null}
|
||||||
|
|
||||||
|
{!isFetching && !!error ? (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.helpText}>
|
||||||
|
Error parsing, please try again.
|
||||||
|
</div>
|
||||||
|
<div>{getErrorMessage(error)}</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && title && !error && !item.parsedMovieInfo ? (
|
||||||
|
<div className={styles.message}>
|
||||||
|
Unable to parse the provided title, please try again.
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && !error && item.parsedMovieInfo ? (
|
||||||
|
<ParseResult item={item} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{title ? null : (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.helpText}>
|
||||||
|
Enter a release title in the input above
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Radarr will attempt to parse the title and show you details about
|
||||||
|
it
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</PageContentBody>
|
||||||
|
</PageContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Parse;
|
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Modal from 'Components/Modal/Modal';
|
||||||
|
import ParseModalContent from './ParseModalContent';
|
||||||
|
|
||||||
|
interface ParseModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onModalClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ParseModal(props: ParseModalProps) {
|
||||||
|
const { isOpen, onModalClose } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onModalClose={onModalClose}>
|
||||||
|
<ParseModalContent onModalClose={onModalClose} />
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParseModal;
|
@ -0,0 +1,45 @@
|
|||||||
|
.inputContainer {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputIconContainer {
|
||||||
|
width: 58px;
|
||||||
|
height: 46px;
|
||||||
|
border: 1px solid var(--inputBorderColor);
|
||||||
|
border-right: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
background-color: var(--inputIconContainerBackgroundColor);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 46px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
composes: input from '~Components/Form/TextInput.css';
|
||||||
|
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearButton {
|
||||||
|
border: 1px solid var(--inputBorderColor);
|
||||||
|
border-left: none;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: $largeFontSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpText {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
@ -0,0 +1,12 @@
|
|||||||
|
// This file is automatically generated.
|
||||||
|
// Please do not change this file!
|
||||||
|
interface CssExports {
|
||||||
|
'clearButton': string;
|
||||||
|
'helpText': string;
|
||||||
|
'input': string;
|
||||||
|
'inputContainer': string;
|
||||||
|
'inputIconContainer': string;
|
||||||
|
'message': string;
|
||||||
|
}
|
||||||
|
export const cssExports: CssExports;
|
||||||
|
export default cssExports;
|
@ -0,0 +1,125 @@
|
|||||||
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import TextInput from 'Components/Form/TextInput';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||||
|
import ModalBody from 'Components/Modal/ModalBody';
|
||||||
|
import ModalContent from 'Components/Modal/ModalContent';
|
||||||
|
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||||
|
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import { clear, fetch } from 'Store/Actions/parseActions';
|
||||||
|
import getErrorMessage from 'Utilities/Object/getErrorMessage';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
|
import ParseResult from './ParseResult';
|
||||||
|
import parseStateSelector from './parseStateSelector';
|
||||||
|
import styles from './ParseModalContent.css';
|
||||||
|
|
||||||
|
interface ParseModalContentProps {
|
||||||
|
onModalClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ParseModalContent(props: ParseModalContentProps) {
|
||||||
|
const { onModalClose } = props;
|
||||||
|
const { isFetching, error, item } = useSelector(parseStateSelector());
|
||||||
|
|
||||||
|
const [title, setTitle] = useState('');
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const onInputChange = useCallback(
|
||||||
|
({ value }: { value: string }) => {
|
||||||
|
const trimmedValue = value.trim();
|
||||||
|
|
||||||
|
setTitle(value);
|
||||||
|
|
||||||
|
if (trimmedValue === '') {
|
||||||
|
dispatch(clear());
|
||||||
|
} else {
|
||||||
|
dispatch(fetch({ title: trimmedValue }));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[setTitle, dispatch]
|
||||||
|
);
|
||||||
|
|
||||||
|
const onClearPress = useCallback(() => {
|
||||||
|
setTitle('');
|
||||||
|
dispatch(clear());
|
||||||
|
}, [setTitle, dispatch]);
|
||||||
|
|
||||||
|
useEffect(
|
||||||
|
() => {
|
||||||
|
return () => {
|
||||||
|
dispatch(clear());
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalContent onModalClose={onModalClose}>
|
||||||
|
<ModalHeader>{translate('TestParsing')}</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
<div className={styles.inputContainer}>
|
||||||
|
<div className={styles.inputIconContainer}>
|
||||||
|
<Icon name={icons.PARSE} size={20} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TextInput
|
||||||
|
className={styles.input}
|
||||||
|
name="title"
|
||||||
|
value={title}
|
||||||
|
placeholder="eg. Movie.Title.2020.720p.HDTV-RlsGroup"
|
||||||
|
autoFocus={true}
|
||||||
|
onChange={onInputChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button className={styles.clearButton} onPress={onClearPress}>
|
||||||
|
<Icon name={icons.REMOVE} size={20} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isFetching ? <LoadingIndicator /> : null}
|
||||||
|
|
||||||
|
{!isFetching && !!error ? (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.helpText}>
|
||||||
|
Error parsing, please try again.
|
||||||
|
</div>
|
||||||
|
<div>{getErrorMessage(error)}</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && title && !error && !item.parsedMovieInfo ? (
|
||||||
|
<div className={styles.message}>
|
||||||
|
Unable to parse the provided title, please try again.
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && !error && item.parsedMovieInfo ? (
|
||||||
|
<ParseResult item={item} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{title ? null : (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.helpText}>
|
||||||
|
Enter a release title in the input above
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Radarr will attempt to parse the title and show you details about
|
||||||
|
it
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<Button onPress={onModalClose}>{translate('Close')}</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParseModalContent;
|
@ -0,0 +1,8 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
flex: 0 0 50%;
|
||||||
|
}
|
@ -0,0 +1,8 @@
|
|||||||
|
// This file is automatically generated.
|
||||||
|
// Please do not change this file!
|
||||||
|
interface CssExports {
|
||||||
|
'column': string;
|
||||||
|
'container': string;
|
||||||
|
}
|
||||||
|
export const cssExports: CssExports;
|
||||||
|
export default cssExports;
|
@ -0,0 +1,161 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ParseModel } from 'App/State/ParseAppState';
|
||||||
|
import FieldSet from 'Components/FieldSet';
|
||||||
|
import MovieFormats from 'Movie/MovieFormats';
|
||||||
|
import MovieTitleLink from 'Movie/MovieTitleLink';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
|
import ParseResultItem from './ParseResultItem';
|
||||||
|
import styles from './ParseResult.css';
|
||||||
|
|
||||||
|
interface ParseResultProps {
|
||||||
|
item: ParseModel;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ParseResult(props: ParseResultProps) {
|
||||||
|
const { item } = props;
|
||||||
|
const {
|
||||||
|
customFormats,
|
||||||
|
customFormatScore,
|
||||||
|
languages,
|
||||||
|
parsedMovieInfo,
|
||||||
|
movie,
|
||||||
|
} = item;
|
||||||
|
|
||||||
|
const {
|
||||||
|
releaseTitle,
|
||||||
|
movieTitle,
|
||||||
|
movieTitles,
|
||||||
|
year,
|
||||||
|
edition,
|
||||||
|
releaseGroup,
|
||||||
|
releaseHash,
|
||||||
|
quality,
|
||||||
|
tmdbId,
|
||||||
|
imdbId,
|
||||||
|
} = parsedMovieInfo;
|
||||||
|
|
||||||
|
const finalLanguages = languages ?? parsedMovieInfo.languages;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<FieldSet legend={translate('Release')}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('ReleaseTitle')}
|
||||||
|
data={releaseTitle}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem title={translate('MovieTitle')} data={movieTitle} />
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Year')}
|
||||||
|
data={year > 0 ? year : '-'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Edition')}
|
||||||
|
data={edition ? edition : '-'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('AllTitles')}
|
||||||
|
data={movieTitles?.length > 0 ? movieTitles.join(', ') : '-'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('ReleaseGroup')}
|
||||||
|
data={releaseGroup ?? '-'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('ReleaseHash')}
|
||||||
|
data={releaseHash ? releaseHash : '-'}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{tmdbId ? (
|
||||||
|
<ParseResultItem title={translate('TmdbId')} data={tmdbId} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{imdbId ? (
|
||||||
|
<ParseResultItem title={translate('ImdbId')} data={imdbId} />
|
||||||
|
) : null}
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('Quality')}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.column}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Quality')}
|
||||||
|
data={quality.quality.name}
|
||||||
|
/>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Proper')}
|
||||||
|
data={
|
||||||
|
quality.revision.version > 1 && !quality.revision.isRepack
|
||||||
|
? 'True'
|
||||||
|
: '-'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Repack')}
|
||||||
|
data={quality.revision.isRepack ? 'True' : '-'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.column}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Version')}
|
||||||
|
data={
|
||||||
|
quality.revision.version > 1 ? quality.revision.version : '-'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Real')}
|
||||||
|
data={quality.revision.real ? 'True' : '-'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('Languages')}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Languages')}
|
||||||
|
data={finalLanguages.map((l) => l.name).join(', ')}
|
||||||
|
/>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('Details')}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('MatchedToMovie')}
|
||||||
|
data={
|
||||||
|
movie ? (
|
||||||
|
<MovieTitleLink titleSlug={movie.titleSlug} title={movie.title} />
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{movie && movie.originalLanguage ? (
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('OriginalLanguage')}
|
||||||
|
data={movie.originalLanguage.name}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('CustomFormats')}
|
||||||
|
data={<MovieFormats formats={customFormats} />}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('CustomFormatScore')}
|
||||||
|
data={customFormatScore}
|
||||||
|
/>
|
||||||
|
</FieldSet>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParseResult;
|
@ -0,0 +1,21 @@
|
|||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 250px;
|
||||||
|
text-align: right;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $breakpointSmall) {
|
||||||
|
.item {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,8 @@
|
|||||||
|
// This file is automatically generated.
|
||||||
|
// Please do not change this file!
|
||||||
|
interface CssExports {
|
||||||
|
'item': string;
|
||||||
|
'title': string;
|
||||||
|
}
|
||||||
|
export const cssExports: CssExports;
|
||||||
|
export default cssExports;
|
@ -0,0 +1,20 @@
|
|||||||
|
import React, { ReactNode } from 'react';
|
||||||
|
import styles from './ParseResultItem.css';
|
||||||
|
|
||||||
|
interface ParseResultItemProps {
|
||||||
|
title: string;
|
||||||
|
data: string | number | ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ParseResultItem(props: ParseResultItemProps) {
|
||||||
|
const { title, data } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.item}>
|
||||||
|
<div className={styles.title}>{title}</div>
|
||||||
|
<div>{data}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParseResultItem;
|
@ -0,0 +1,31 @@
|
|||||||
|
import React, { Fragment, useCallback, useState } from 'react';
|
||||||
|
import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
|
import ParseModal from 'Parse/ParseModal';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
|
|
||||||
|
function ParseToolbarButton() {
|
||||||
|
const [isParseModalOpen, setIsParseModalOpen] = useState(false);
|
||||||
|
|
||||||
|
const onOpenParseModalPress = useCallback(() => {
|
||||||
|
setIsParseModalOpen(true);
|
||||||
|
}, [setIsParseModalOpen]);
|
||||||
|
|
||||||
|
const onParseModalClose = useCallback(() => {
|
||||||
|
setIsParseModalOpen(false);
|
||||||
|
}, [setIsParseModalOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<PageToolbarButton
|
||||||
|
label={translate('TestParsing')}
|
||||||
|
iconName={icons.PARSE}
|
||||||
|
onPress={onOpenParseModalPress}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseModal isOpen={isParseModalOpen} onModalClose={onParseModalClose} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ParseToolbarButton;
|
@ -0,0 +1,12 @@
|
|||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import AppState from 'App/State/AppState';
|
||||||
|
import ParseAppState from 'App/State/ParseAppState';
|
||||||
|
|
||||||
|
export default function parseStateSelector() {
|
||||||
|
return createSelector(
|
||||||
|
(state: AppState) => state.parse,
|
||||||
|
(parse: ParseAppState) => {
|
||||||
|
return parse;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
@ -0,0 +1,41 @@
|
|||||||
|
import React, { Fragment } from 'react';
|
||||||
|
import { DndProvider } from 'react-dnd';
|
||||||
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||||
|
import PageContent from 'Components/Page/PageContent';
|
||||||
|
import PageContentBody from 'Components/Page/PageContentBody';
|
||||||
|
import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
|
||||||
|
import ParseToolbarButton from 'Parse/ParseToolbarButton';
|
||||||
|
import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
|
||||||
|
import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
|
||||||
|
|
||||||
|
function CustomFormatSettingsPage() {
|
||||||
|
return (
|
||||||
|
<PageContent title="Custom Format Settings">
|
||||||
|
<SettingsToolbarConnector
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
showSave={false}
|
||||||
|
additionalButtons={
|
||||||
|
<Fragment>
|
||||||
|
<PageToolbarSeparator />
|
||||||
|
|
||||||
|
<ParseToolbarButton />
|
||||||
|
</Fragment>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PageContentBody>
|
||||||
|
{/* TODO: Upgrade react-dnd to get typings, we're 2 major versions behind */}
|
||||||
|
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
|
||||||
|
{/* @ts-ignore */}
|
||||||
|
<DndProvider backend={HTML5Backend}>
|
||||||
|
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
|
||||||
|
{/* @ts-ignore */}
|
||||||
|
<CustomFormatsConnector />
|
||||||
|
</DndProvider>
|
||||||
|
</PageContentBody>
|
||||||
|
</PageContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CustomFormatSettingsPage;
|
@ -0,0 +1,111 @@
|
|||||||
|
import { Dispatch } from 'redux';
|
||||||
|
import { createAction } from 'redux-actions';
|
||||||
|
import { batchActions } from 'redux-batched-actions';
|
||||||
|
import AppState from 'App/State/AppState';
|
||||||
|
import { createThunk, handleThunks } from 'Store/thunks';
|
||||||
|
import createAjaxRequest from 'Utilities/createAjaxRequest';
|
||||||
|
import { set, update } from './baseActions';
|
||||||
|
import createHandleActions from './Creators/createHandleActions';
|
||||||
|
import createClearReducer from './Creators/Reducers/createClearReducer';
|
||||||
|
|
||||||
|
interface FetchPayload {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Variables
|
||||||
|
|
||||||
|
export const section = 'parse';
|
||||||
|
let parseTimeout: number | null = null;
|
||||||
|
let abortCurrentRequest: (() => void) | null = null;
|
||||||
|
|
||||||
|
//
|
||||||
|
// State
|
||||||
|
|
||||||
|
export const defaultState = {
|
||||||
|
isFetching: false,
|
||||||
|
isPopulated: false,
|
||||||
|
error: null,
|
||||||
|
item: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
//
|
||||||
|
// Actions Types
|
||||||
|
|
||||||
|
export const FETCH = 'parse/fetch';
|
||||||
|
export const CLEAR = 'parse/clear';
|
||||||
|
|
||||||
|
//
|
||||||
|
// Action Creators
|
||||||
|
|
||||||
|
export const fetch = createThunk(FETCH);
|
||||||
|
export const clear = createAction(CLEAR);
|
||||||
|
|
||||||
|
//
|
||||||
|
// Action Handlers
|
||||||
|
|
||||||
|
export const actionHandlers = handleThunks({
|
||||||
|
[FETCH]: function (
|
||||||
|
_getState: () => AppState,
|
||||||
|
payload: FetchPayload,
|
||||||
|
dispatch: Dispatch
|
||||||
|
) {
|
||||||
|
if (parseTimeout) {
|
||||||
|
clearTimeout(parseTimeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
parseTimeout = window.setTimeout(async () => {
|
||||||
|
dispatch(set({ section, isFetching: true }));
|
||||||
|
|
||||||
|
if (abortCurrentRequest) {
|
||||||
|
abortCurrentRequest();
|
||||||
|
}
|
||||||
|
|
||||||
|
const { request, abortRequest } = createAjaxRequest({
|
||||||
|
url: '/parse',
|
||||||
|
data: {
|
||||||
|
title: payload.title,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await request;
|
||||||
|
|
||||||
|
dispatch(
|
||||||
|
batchActions([
|
||||||
|
update({ section, data }),
|
||||||
|
|
||||||
|
set({
|
||||||
|
section,
|
||||||
|
isFetching: false,
|
||||||
|
isPopulated: true,
|
||||||
|
error: null,
|
||||||
|
}),
|
||||||
|
])
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
dispatch(
|
||||||
|
set({
|
||||||
|
section,
|
||||||
|
isAdding: false,
|
||||||
|
isAdded: false,
|
||||||
|
addError: error,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
abortCurrentRequest = abortRequest;
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reducers
|
||||||
|
|
||||||
|
export const reducers = createHandleActions(
|
||||||
|
{
|
||||||
|
[CLEAR]: createClearReducer(section, defaultState),
|
||||||
|
},
|
||||||
|
defaultState,
|
||||||
|
section
|
||||||
|
);
|
@ -0,0 +1,39 @@
|
|||||||
|
import { Dispatch } from 'redux';
|
||||||
|
import AppState from 'App/State/AppState';
|
||||||
|
|
||||||
|
type GetState = () => AppState;
|
||||||
|
type Thunk = (
|
||||||
|
getState: GetState,
|
||||||
|
identityFn: never,
|
||||||
|
dispatch: Dispatch
|
||||||
|
) => unknown;
|
||||||
|
|
||||||
|
const thunks: Record<string, Thunk> = {};
|
||||||
|
|
||||||
|
function identity<T, TResult>(payload: T): TResult {
|
||||||
|
return payload as unknown as TResult;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createThunk(type: string, identityFunction = identity) {
|
||||||
|
return function <T>(payload?: T) {
|
||||||
|
return function (dispatch: Dispatch, getState: GetState) {
|
||||||
|
const thunk = thunks[type];
|
||||||
|
|
||||||
|
if (thunk) {
|
||||||
|
const finalPayload = payload ?? {};
|
||||||
|
|
||||||
|
return thunk(getState, identityFunction(finalPayload), dispatch);
|
||||||
|
}
|
||||||
|
|
||||||
|
throw Error(`Thunk handler has not been registered for ${type}`);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function handleThunks(handlers: Record<string, Thunk>) {
|
||||||
|
const types = Object.keys(handlers);
|
||||||
|
|
||||||
|
types.forEach((type) => {
|
||||||
|
thunks[type] = handlers[type];
|
||||||
|
});
|
||||||
|
}
|
Loading…
Reference in new issue