Merge bb1b6072b7
into 9f4d821a2d
commit
2d1783825e
@ -0,0 +1,35 @@
|
|||||||
|
import Album from 'Album/Album';
|
||||||
|
import ModelBase from 'App/ModelBase';
|
||||||
|
import { AppSectionItemState } from 'App/State/AppSectionState';
|
||||||
|
import Artist from 'Artist/Artist';
|
||||||
|
import { QualityModel } from 'Quality/Quality';
|
||||||
|
import CustomFormat from 'typings/CustomFormat';
|
||||||
|
|
||||||
|
export interface ArtistTitleInfo {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ParsedAlbumInfo {
|
||||||
|
albumTitle: string;
|
||||||
|
artistName: string;
|
||||||
|
artistTitleInfo: ArtistTitleInfo;
|
||||||
|
discography: boolean;
|
||||||
|
quality: QualityModel;
|
||||||
|
releaseGroup?: string;
|
||||||
|
releaseHash: string;
|
||||||
|
releaseTitle: string;
|
||||||
|
releaseTokens: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ParseModel extends ModelBase {
|
||||||
|
title: string;
|
||||||
|
parsedAlbumInfo: ParsedAlbumInfo;
|
||||||
|
artist?: Artist;
|
||||||
|
albums: Album[];
|
||||||
|
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,109 @@
|
|||||||
|
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 translate from 'Utilities/String/translate';
|
||||||
|
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={translate('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. Artist.Name-Album.Title[FLAC]-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}>
|
||||||
|
{translate('ParseModalErrorParsing')}
|
||||||
|
</div>
|
||||||
|
<div>{getErrorMessage(error)}</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && title && !error && !item.parsedAlbumInfo ? (
|
||||||
|
<div className={styles.message}>
|
||||||
|
{translate('ParseModalUnableToParse')}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && !error && item.parsedAlbumInfo ? (
|
||||||
|
<ParseResult item={item} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{title ? null : (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.helpText}>
|
||||||
|
{translate('ParseModalHelpText')}
|
||||||
|
</div>
|
||||||
|
<div>{translate('ParseModalHelpTextDetails')}</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,122 @@
|
|||||||
|
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. Artist.Name-Album.Title[FLAC]-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}>
|
||||||
|
{translate('ParseModalErrorParsing')}
|
||||||
|
</div>
|
||||||
|
<div>{getErrorMessage(error)}</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && title && !error && !item.parsedAlbumInfo ? (
|
||||||
|
<div className={styles.message}>
|
||||||
|
{translate('ParseModalUnableToParse')}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && !error && item.parsedAlbumInfo ? (
|
||||||
|
<ParseResult item={item} />
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{title ? null : (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<div className={styles.helpText}>
|
||||||
|
{translate('ParseModalHelpText')}
|
||||||
|
</div>
|
||||||
|
<div>{translate('ParseModalHelpTextDetails')}</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,160 @@
|
|||||||
|
import _ from 'lodash';
|
||||||
|
import moment from 'moment';
|
||||||
|
import React from 'react';
|
||||||
|
import AlbumFormats from 'Album/AlbumFormats';
|
||||||
|
import AlbumTitleLink from 'Album/AlbumTitleLink';
|
||||||
|
import { ParseModel } from 'App/State/ParseAppState';
|
||||||
|
import ArtistNameLink from 'Artist/ArtistNameLink';
|
||||||
|
import FieldSet from 'Components/FieldSet';
|
||||||
|
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, albums, parsedAlbumInfo, artist } =
|
||||||
|
item;
|
||||||
|
|
||||||
|
const {
|
||||||
|
releaseTitle,
|
||||||
|
artistName,
|
||||||
|
albumTitle,
|
||||||
|
releaseGroup,
|
||||||
|
discography,
|
||||||
|
quality,
|
||||||
|
} = parsedAlbumInfo;
|
||||||
|
|
||||||
|
const sortedAlbums = _.sortBy(albums, (item) =>
|
||||||
|
moment(item.releaseDate).unix()
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<FieldSet legend={translate('Release')}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('ReleaseTitle')}
|
||||||
|
data={releaseTitle}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem title={translate('ArtistName')} data={artistName} />
|
||||||
|
|
||||||
|
<ParseResultItem title={translate('AlbumTitle')} data={albumTitle} />
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('ReleaseGroup')}
|
||||||
|
data={releaseGroup ?? '-'}
|
||||||
|
/>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('AlbumInfo')}>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.column}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Discography')}
|
||||||
|
data={discography ? translate('True') : translate('False')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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
|
||||||
|
? translate('True')
|
||||||
|
: '-'
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('Repack')}
|
||||||
|
data={quality.revision.isRepack ? translate('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 ? translate('True') : '-'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet legend={translate('Details')}>
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('MatchedToArtist')}
|
||||||
|
data={
|
||||||
|
artist ? (
|
||||||
|
<ArtistNameLink
|
||||||
|
foreignArtistId={artist.foreignArtistId}
|
||||||
|
artistName={artist.artistName}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('MatchedToAlbums')}
|
||||||
|
data={
|
||||||
|
sortedAlbums.length ? (
|
||||||
|
<div>
|
||||||
|
{sortedAlbums.map((album) => {
|
||||||
|
return (
|
||||||
|
<div key={album.id}>
|
||||||
|
<AlbumTitleLink
|
||||||
|
foreignAlbumId={album.foreignAlbumId}
|
||||||
|
title={album.title}
|
||||||
|
disambiguation={album.disambiguation}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'-'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ParseResultItem
|
||||||
|
title={translate('CustomFormats')}
|
||||||
|
data={
|
||||||
|
customFormats?.length ? (
|
||||||
|
<AlbumFormats 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;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
@ -1,33 +0,0 @@
|
|||||||
import React, { Component } 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 SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
|
|
||||||
import translate from 'Utilities/String/translate';
|
|
||||||
import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
|
|
||||||
|
|
||||||
class CustomFormatSettingsConnector extends Component {
|
|
||||||
|
|
||||||
//
|
|
||||||
// Render
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<PageContent title={translate('CustomFormatSettings')}>
|
|
||||||
<SettingsToolbarConnector
|
|
||||||
showSave={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<PageContentBody>
|
|
||||||
<DndProvider backend={HTML5Backend}>
|
|
||||||
<CustomFormatsConnector />
|
|
||||||
</DndProvider>
|
|
||||||
</PageContentBody>
|
|
||||||
</PageContent>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default CustomFormatSettingsConnector;
|
|
||||||
|
|
@ -0,0 +1,42 @@
|
|||||||
|
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 translate from 'Utilities/String/translate';
|
||||||
|
import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
|
||||||
|
|
||||||
|
function CustomFormatSettingsPage() {
|
||||||
|
return (
|
||||||
|
<PageContent title={translate('CustomFormatsSettings')}>
|
||||||
|
<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,109 @@
|
|||||||
|
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 () => {
|
||||||
|
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
|
||||||
|
);
|
Loading…
Reference in new issue