Mark McDowall
2 months ago
parent
32ce09648c
commit
a2fd23c84d
@ -0,0 +1,15 @@
|
|||||||
|
import ModelBase from 'App/ModelBase';
|
||||||
|
import AppSectionState from 'App/State/AppSectionState';
|
||||||
|
|
||||||
|
export interface OrganizePreviewModel extends ModelBase {
|
||||||
|
seriesId: number;
|
||||||
|
seasonNumber: number;
|
||||||
|
episodeNumbers: number[];
|
||||||
|
episodeFileId: number;
|
||||||
|
existingPath: string;
|
||||||
|
newPath: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type OrganizePreviewAppState = AppSectionState<OrganizePreviewModel>;
|
||||||
|
|
||||||
|
export default OrganizePreviewAppState;
|
||||||
@ -1,34 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import Modal from 'Components/Modal/Modal';
|
|
||||||
import OrganizePreviewModalContentConnector from './OrganizePreviewModalContentConnector';
|
|
||||||
|
|
||||||
function OrganizePreviewModal(props) {
|
|
||||||
const {
|
|
||||||
isOpen,
|
|
||||||
onModalClose,
|
|
||||||
...otherProps
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen={isOpen}
|
|
||||||
onModalClose={onModalClose}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
isOpen &&
|
|
||||||
<OrganizePreviewModalContentConnector
|
|
||||||
{...otherProps}
|
|
||||||
onModalClose={onModalClose}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
OrganizePreviewModal.propTypes = {
|
|
||||||
isOpen: PropTypes.bool.isRequired,
|
|
||||||
onModalClose: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrganizePreviewModal;
|
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
import Modal from 'Components/Modal/Modal';
|
||||||
|
import { clearOrganizePreview } from 'Store/Actions/organizePreviewActions';
|
||||||
|
import OrganizePreviewModalContent, {
|
||||||
|
OrganizePreviewModalContentProps,
|
||||||
|
} from './OrganizePreviewModalContent';
|
||||||
|
|
||||||
|
interface OrganizePreviewModalProps extends OrganizePreviewModalContentProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onModalClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function OrganizePreviewModal({
|
||||||
|
isOpen,
|
||||||
|
onModalClose,
|
||||||
|
...otherProps
|
||||||
|
}: OrganizePreviewModalProps) {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const handleOnModalClose = useCallback(() => {
|
||||||
|
dispatch(clearOrganizePreview());
|
||||||
|
onModalClose();
|
||||||
|
}, [dispatch, onModalClose]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal isOpen={isOpen} onModalClose={handleOnModalClose}>
|
||||||
|
{isOpen ? (
|
||||||
|
<OrganizePreviewModalContent
|
||||||
|
{...otherProps}
|
||||||
|
onModalClose={handleOnModalClose}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default OrganizePreviewModal;
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { clearOrganizePreview } from 'Store/Actions/organizePreviewActions';
|
|
||||||
import OrganizePreviewModal from './OrganizePreviewModal';
|
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
|
||||||
clearOrganizePreview
|
|
||||||
};
|
|
||||||
|
|
||||||
class OrganizePreviewModalConnector extends Component {
|
|
||||||
|
|
||||||
//
|
|
||||||
// Listeners
|
|
||||||
|
|
||||||
onModalClose = () => {
|
|
||||||
this.props.clearOrganizePreview();
|
|
||||||
this.props.onModalClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
// Render
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<OrganizePreviewModal
|
|
||||||
{...this.props}
|
|
||||||
onModalClose={this.onModalClose}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
OrganizePreviewModalConnector.propTypes = {
|
|
||||||
clearOrganizePreview: PropTypes.func.isRequired,
|
|
||||||
onModalClose: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default connect(undefined, mapDispatchToProps)(OrganizePreviewModalConnector);
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import Alert from 'Components/Alert';
|
|
||||||
import CheckInput from 'Components/Form/CheckInput';
|
|
||||||
import Button from 'Components/Link/Button';
|
|
||||||
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
|
||||||
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
|
|
||||||
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 { kinds } from 'Helpers/Props';
|
|
||||||
import formatSeason from 'Season/formatSeason';
|
|
||||||
import translate from 'Utilities/String/translate';
|
|
||||||
import getSelectedIds from 'Utilities/Table/getSelectedIds';
|
|
||||||
import selectAll from 'Utilities/Table/selectAll';
|
|
||||||
import toggleSelected from 'Utilities/Table/toggleSelected';
|
|
||||||
import OrganizePreviewRow from './OrganizePreviewRow';
|
|
||||||
import styles from './OrganizePreviewModalContent.css';
|
|
||||||
|
|
||||||
function getValue(allSelected, allUnselected) {
|
|
||||||
if (allSelected) {
|
|
||||||
return true;
|
|
||||||
} else if (allUnselected) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
class OrganizePreviewModalContent extends Component {
|
|
||||||
|
|
||||||
//
|
|
||||||
// Lifecycle
|
|
||||||
|
|
||||||
constructor(props, context) {
|
|
||||||
super(props, context);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
allSelected: false,
|
|
||||||
allUnselected: false,
|
|
||||||
lastToggled: null,
|
|
||||||
selectedState: {}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Control
|
|
||||||
|
|
||||||
getSelectedIds = () => {
|
|
||||||
return getSelectedIds(this.state.selectedState);
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
// Listeners
|
|
||||||
|
|
||||||
onSelectAllChange = ({ value }) => {
|
|
||||||
this.setState(selectAll(this.state.selectedState, value));
|
|
||||||
};
|
|
||||||
|
|
||||||
onSelectedChange = ({ id, value, shiftKey = false }) => {
|
|
||||||
this.setState((state) => {
|
|
||||||
return toggleSelected(state, this.props.items, id, value, shiftKey);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
onOrganizePress = () => {
|
|
||||||
this.props.onOrganizePress(this.getSelectedIds());
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
// Render
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
isFetching,
|
|
||||||
isPopulated,
|
|
||||||
error,
|
|
||||||
items,
|
|
||||||
seasonNumber,
|
|
||||||
renameEpisodes,
|
|
||||||
episodeFormat,
|
|
||||||
path,
|
|
||||||
onModalClose
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
const {
|
|
||||||
allSelected,
|
|
||||||
allUnselected,
|
|
||||||
selectedState
|
|
||||||
} = this.state;
|
|
||||||
|
|
||||||
const selectAllValue = getValue(allSelected, allUnselected);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ModalContent onModalClose={onModalClose}>
|
|
||||||
<ModalHeader>
|
|
||||||
{ seasonNumber == null ?
|
|
||||||
translate('OrganizeModalHeader') :
|
|
||||||
translate('OrganizeModalHeaderSeason', { season: formatSeason(seasonNumber) })
|
|
||||||
}
|
|
||||||
</ModalHeader>
|
|
||||||
|
|
||||||
<ModalBody>
|
|
||||||
{
|
|
||||||
isFetching &&
|
|
||||||
<LoadingIndicator />
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
!isFetching && error &&
|
|
||||||
<Alert kind={kinds.DANGER}>{translate('OrganizeLoadError')}</Alert>
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
!isFetching && isPopulated && !items.length &&
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
renameEpisodes ?
|
|
||||||
<div>{translate('OrganizeNothingToRename')}</div> :
|
|
||||||
<div>{translate('OrganizeRenamingDisabled')}</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
!isFetching && isPopulated && !!items.length &&
|
|
||||||
<div>
|
|
||||||
<Alert>
|
|
||||||
<div>
|
|
||||||
<InlineMarkdown data={translate('OrganizeRelativePaths', { path })} blockClassName={styles.path} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<InlineMarkdown data={translate('OrganizeNamingPattern', { episodeFormat })} blockClassName={styles.episodeFormat} />
|
|
||||||
</div>
|
|
||||||
</Alert>
|
|
||||||
|
|
||||||
<div className={styles.previews}>
|
|
||||||
{
|
|
||||||
items.map((item) => {
|
|
||||||
return (
|
|
||||||
<OrganizePreviewRow
|
|
||||||
key={item.episodeFileId}
|
|
||||||
id={item.episodeFileId}
|
|
||||||
existingPath={item.existingPath}
|
|
||||||
newPath={item.newPath}
|
|
||||||
isSelected={selectedState[item.episodeFileId]}
|
|
||||||
onSelectedChange={this.onSelectedChange}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</ModalBody>
|
|
||||||
|
|
||||||
<ModalFooter>
|
|
||||||
{
|
|
||||||
isPopulated && !!items.length &&
|
|
||||||
<CheckInput
|
|
||||||
className={styles.selectAllInput}
|
|
||||||
containerClassName={styles.selectAllInputContainer}
|
|
||||||
name="selectAll"
|
|
||||||
value={selectAllValue}
|
|
||||||
onChange={this.onSelectAllChange}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
onPress={onModalClose}
|
|
||||||
>
|
|
||||||
{translate('Cancel')}
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
kind={kinds.PRIMARY}
|
|
||||||
onPress={this.onOrganizePress}
|
|
||||||
>
|
|
||||||
{translate('Organize')}
|
|
||||||
</Button>
|
|
||||||
</ModalFooter>
|
|
||||||
</ModalContent>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
OrganizePreviewModalContent.propTypes = {
|
|
||||||
isFetching: PropTypes.bool.isRequired,
|
|
||||||
isPopulated: PropTypes.bool.isRequired,
|
|
||||||
error: PropTypes.object,
|
|
||||||
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
||||||
seasonNumber: PropTypes.number,
|
|
||||||
path: PropTypes.string.isRequired,
|
|
||||||
renameEpisodes: PropTypes.bool,
|
|
||||||
episodeFormat: PropTypes.string,
|
|
||||||
onOrganizePress: PropTypes.func.isRequired,
|
|
||||||
onModalClose: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrganizePreviewModalContent;
|
|
||||||
@ -0,0 +1,201 @@
|
|||||||
|
import React, { useCallback, useEffect } from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import AppState from 'App/State/AppState';
|
||||||
|
import * as commandNames from 'Commands/commandNames';
|
||||||
|
import Alert from 'Components/Alert';
|
||||||
|
import CheckInput from 'Components/Form/CheckInput';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||||
|
import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
|
||||||
|
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 useSelectState from 'Helpers/Hooks/useSelectState';
|
||||||
|
import { kinds } from 'Helpers/Props';
|
||||||
|
import formatSeason from 'Season/formatSeason';
|
||||||
|
import useSeries from 'Series/useSeries';
|
||||||
|
import { executeCommand } from 'Store/Actions/commandActions';
|
||||||
|
import { fetchOrganizePreview } from 'Store/Actions/organizePreviewActions';
|
||||||
|
import { fetchNamingSettings } from 'Store/Actions/settingsActions';
|
||||||
|
import { CheckInputChanged } from 'typings/inputs';
|
||||||
|
import { SelectStateInputProps } from 'typings/props';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
|
import getSelectedIds from 'Utilities/Table/getSelectedIds';
|
||||||
|
import OrganizePreviewRow from './OrganizePreviewRow';
|
||||||
|
import styles from './OrganizePreviewModalContent.css';
|
||||||
|
|
||||||
|
function getValue(allSelected: boolean, allUnselected: boolean) {
|
||||||
|
if (allSelected) {
|
||||||
|
return true;
|
||||||
|
} else if (allUnselected) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface OrganizePreviewModalContentProps {
|
||||||
|
seriesId: number;
|
||||||
|
seasonNumber?: number;
|
||||||
|
onModalClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function OrganizePreviewModalContent({
|
||||||
|
seriesId,
|
||||||
|
seasonNumber,
|
||||||
|
onModalClose,
|
||||||
|
}: OrganizePreviewModalContentProps) {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const {
|
||||||
|
items,
|
||||||
|
isFetching: isPreviewFetching,
|
||||||
|
isPopulated: isPreviewPopulated,
|
||||||
|
error: previewError,
|
||||||
|
} = useSelector((state: AppState) => state.organizePreview);
|
||||||
|
|
||||||
|
const {
|
||||||
|
isFetching: isNamingFetching,
|
||||||
|
isPopulated: isNamingPopulated,
|
||||||
|
error: namingError,
|
||||||
|
item: naming,
|
||||||
|
} = useSelector((state: AppState) => state.settings.naming);
|
||||||
|
|
||||||
|
const series = useSeries(seriesId)!;
|
||||||
|
const [selectState, setSelectState] = useSelectState();
|
||||||
|
|
||||||
|
const { allSelected, allUnselected, selectedState } = selectState;
|
||||||
|
const isFetching = isPreviewFetching || isNamingFetching;
|
||||||
|
const isPopulated = isPreviewPopulated && isNamingPopulated;
|
||||||
|
const error = previewError || namingError;
|
||||||
|
const { renameEpisodes } = naming;
|
||||||
|
const episodeFormat = naming[`${series.seriesType}EpisodeFormat`];
|
||||||
|
|
||||||
|
const selectAllValue = getValue(allSelected, allUnselected);
|
||||||
|
|
||||||
|
const handleSelectAllChange = useCallback(
|
||||||
|
({ value }: CheckInputChanged) => {
|
||||||
|
setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
|
||||||
|
},
|
||||||
|
[items, setSelectState]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSelectedChange = useCallback(
|
||||||
|
({ id, value, shiftKey = false }: SelectStateInputProps) => {
|
||||||
|
setSelectState({
|
||||||
|
type: 'toggleSelected',
|
||||||
|
items,
|
||||||
|
id,
|
||||||
|
isSelected: value,
|
||||||
|
shiftKey,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[items, setSelectState]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleOrganizePress = useCallback(() => {
|
||||||
|
const files = getSelectedIds(selectedState);
|
||||||
|
|
||||||
|
dispatch(
|
||||||
|
executeCommand({
|
||||||
|
name: commandNames.RENAME_FILES,
|
||||||
|
files,
|
||||||
|
seriesId,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
onModalClose();
|
||||||
|
}, [seriesId, selectedState, dispatch, onModalClose]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch(fetchOrganizePreview({ seriesId, seasonNumber }));
|
||||||
|
dispatch(fetchNamingSettings());
|
||||||
|
}, [seriesId, seasonNumber, dispatch]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalContent onModalClose={onModalClose}>
|
||||||
|
<ModalHeader>
|
||||||
|
{seasonNumber == null
|
||||||
|
? translate('OrganizeModalHeader')
|
||||||
|
: translate('OrganizeModalHeaderSeason', {
|
||||||
|
season: formatSeason(seasonNumber) ?? '',
|
||||||
|
})}
|
||||||
|
</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
{isFetching ? <LoadingIndicator /> : null}
|
||||||
|
|
||||||
|
{!isFetching && error ? (
|
||||||
|
<Alert kind={kinds.DANGER}>{translate('OrganizeLoadError')}</Alert>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && isPopulated && !items.length ? (
|
||||||
|
<div>
|
||||||
|
{renameEpisodes ? (
|
||||||
|
<div>{translate('OrganizeNothingToRename')}</div>
|
||||||
|
) : (
|
||||||
|
<div>{translate('OrganizeRenamingDisabled')}</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isFetching && isPopulated && items.length ? (
|
||||||
|
<div>
|
||||||
|
<Alert>
|
||||||
|
<div>
|
||||||
|
<InlineMarkdown
|
||||||
|
data={translate('OrganizeRelativePaths', {
|
||||||
|
path: series.path,
|
||||||
|
})}
|
||||||
|
blockClassName={styles.path}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<InlineMarkdown
|
||||||
|
data={translate('OrganizeNamingPattern', { episodeFormat })}
|
||||||
|
blockClassName={styles.episodeFormat}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<div className={styles.previews}>
|
||||||
|
{items.map((item) => {
|
||||||
|
return (
|
||||||
|
<OrganizePreviewRow
|
||||||
|
key={item.episodeFileId}
|
||||||
|
id={item.episodeFileId}
|
||||||
|
existingPath={item.existingPath}
|
||||||
|
newPath={item.newPath}
|
||||||
|
isSelected={selectedState[item.episodeFileId]}
|
||||||
|
onSelectedChange={handleSelectedChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
{isPopulated && items.length ? (
|
||||||
|
<CheckInput
|
||||||
|
className={styles.selectAllInput}
|
||||||
|
containerClassName={styles.selectAllInputContainer}
|
||||||
|
name="selectAll"
|
||||||
|
value={selectAllValue}
|
||||||
|
onChange={handleSelectAllChange}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<Button onPress={onModalClose}>{translate('Cancel')}</Button>
|
||||||
|
|
||||||
|
<Button kind={kinds.PRIMARY} onPress={handleOrganizePress}>
|
||||||
|
{translate('Organize')}
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OrganizePreviewModalContent;
|
||||||
@ -1,91 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { createSelector } from 'reselect';
|
|
||||||
import * as commandNames from 'Commands/commandNames';
|
|
||||||
import { executeCommand } from 'Store/Actions/commandActions';
|
|
||||||
import { fetchOrganizePreview } from 'Store/Actions/organizePreviewActions';
|
|
||||||
import { fetchNamingSettings } from 'Store/Actions/settingsActions';
|
|
||||||
import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
|
|
||||||
import OrganizePreviewModalContent from './OrganizePreviewModalContent';
|
|
||||||
|
|
||||||
function createMapStateToProps() {
|
|
||||||
return createSelector(
|
|
||||||
(state) => state.organizePreview,
|
|
||||||
(state) => state.settings.naming,
|
|
||||||
createSeriesSelector(),
|
|
||||||
(organizePreview, naming, series) => {
|
|
||||||
const props = { ...organizePreview };
|
|
||||||
props.isFetching = organizePreview.isFetching || naming.isFetching;
|
|
||||||
props.isPopulated = organizePreview.isPopulated && naming.isPopulated;
|
|
||||||
props.error = organizePreview.error || naming.error;
|
|
||||||
props.renameEpisodes = naming.item.renameEpisodes;
|
|
||||||
props.episodeFormat = naming.item[`${series.seriesType}EpisodeFormat`];
|
|
||||||
props.path = series.path;
|
|
||||||
|
|
||||||
return props;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
|
||||||
fetchOrganizePreview,
|
|
||||||
fetchNamingSettings,
|
|
||||||
executeCommand
|
|
||||||
};
|
|
||||||
|
|
||||||
class OrganizePreviewModalContentConnector extends Component {
|
|
||||||
|
|
||||||
//
|
|
||||||
// Lifecycle
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const {
|
|
||||||
seriesId,
|
|
||||||
seasonNumber
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
this.props.fetchOrganizePreview({
|
|
||||||
seriesId,
|
|
||||||
seasonNumber
|
|
||||||
});
|
|
||||||
|
|
||||||
this.props.fetchNamingSettings();
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Listeners
|
|
||||||
|
|
||||||
onOrganizePress = (files) => {
|
|
||||||
this.props.executeCommand({
|
|
||||||
name: commandNames.RENAME_FILES,
|
|
||||||
seriesId: this.props.seriesId,
|
|
||||||
files
|
|
||||||
});
|
|
||||||
|
|
||||||
this.props.onModalClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
// Render
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<OrganizePreviewModalContent
|
|
||||||
{...this.props}
|
|
||||||
onOrganizePress={this.onOrganizePress}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
OrganizePreviewModalContentConnector.propTypes = {
|
|
||||||
seriesId: PropTypes.number.isRequired,
|
|
||||||
seasonNumber: PropTypes.number,
|
|
||||||
fetchOrganizePreview: PropTypes.func.isRequired,
|
|
||||||
fetchNamingSettings: PropTypes.func.isRequired,
|
|
||||||
executeCommand: PropTypes.func.isRequired,
|
|
||||||
onModalClose: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default connect(createMapStateToProps, mapDispatchToProps)(OrganizePreviewModalContentConnector);
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
import PropTypes from 'prop-types';
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import CheckInput from 'Components/Form/CheckInput';
|
|
||||||
import Icon from 'Components/Icon';
|
|
||||||
import { icons, kinds } from 'Helpers/Props';
|
|
||||||
import styles from './OrganizePreviewRow.css';
|
|
||||||
|
|
||||||
class OrganizePreviewRow extends Component {
|
|
||||||
|
|
||||||
//
|
|
||||||
// Lifecycle
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const {
|
|
||||||
id,
|
|
||||||
onSelectedChange
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
onSelectedChange({ id, value: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Listeners
|
|
||||||
|
|
||||||
onSelectedChange = ({ value, shiftKey }) => {
|
|
||||||
const {
|
|
||||||
id,
|
|
||||||
onSelectedChange
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
onSelectedChange({ id, value, shiftKey });
|
|
||||||
};
|
|
||||||
|
|
||||||
//
|
|
||||||
// Render
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
id,
|
|
||||||
existingPath,
|
|
||||||
newPath,
|
|
||||||
isSelected
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={styles.row}>
|
|
||||||
<CheckInput
|
|
||||||
containerClassName={styles.selectedContainer}
|
|
||||||
name={id.toString()}
|
|
||||||
value={isSelected}
|
|
||||||
onChange={this.onSelectedChange}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<Icon
|
|
||||||
name={icons.SUBTRACT}
|
|
||||||
kind={kinds.DANGER}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span className={styles.path}>
|
|
||||||
{existingPath}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Icon
|
|
||||||
name={icons.ADD}
|
|
||||||
kind={kinds.SUCCESS}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<span className={styles.path}>
|
|
||||||
{newPath}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
OrganizePreviewRow.propTypes = {
|
|
||||||
id: PropTypes.number.isRequired,
|
|
||||||
existingPath: PropTypes.string.isRequired,
|
|
||||||
newPath: PropTypes.string.isRequired,
|
|
||||||
isSelected: PropTypes.bool,
|
|
||||||
onSelectedChange: PropTypes.func.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default OrganizePreviewRow;
|
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import React, { useCallback, useEffect } from 'react';
|
||||||
|
import CheckInput from 'Components/Form/CheckInput';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import { icons, kinds } from 'Helpers/Props';
|
||||||
|
import { CheckInputChanged } from 'typings/inputs';
|
||||||
|
import { SelectStateInputProps } from 'typings/props';
|
||||||
|
import styles from './OrganizePreviewRow.css';
|
||||||
|
|
||||||
|
interface OrganizePreviewRowProps {
|
||||||
|
id: number;
|
||||||
|
existingPath: string;
|
||||||
|
newPath: string;
|
||||||
|
isSelected?: boolean;
|
||||||
|
onSelectedChange: (props: SelectStateInputProps) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function OrganizePreviewRow({
|
||||||
|
id,
|
||||||
|
existingPath,
|
||||||
|
newPath,
|
||||||
|
isSelected,
|
||||||
|
onSelectedChange,
|
||||||
|
}: OrganizePreviewRowProps) {
|
||||||
|
const handleSelectedChange = useCallback(
|
||||||
|
({ value, shiftKey }: CheckInputChanged) => {
|
||||||
|
onSelectedChange({ id, value, shiftKey });
|
||||||
|
},
|
||||||
|
[id, onSelectedChange]
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onSelectedChange({ id, value: true, shiftKey: false });
|
||||||
|
}, [id, onSelectedChange]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.row}>
|
||||||
|
<CheckInput
|
||||||
|
containerClassName={styles.selectedContainer}
|
||||||
|
name={id.toString()}
|
||||||
|
value={isSelected}
|
||||||
|
onChange={handleSelectedChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<Icon name={icons.SUBTRACT} kind={kinds.DANGER} />
|
||||||
|
|
||||||
|
<span className={styles.path}>{existingPath}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Icon name={icons.ADD} kind={kinds.SUCCESS} />
|
||||||
|
|
||||||
|
<span className={styles.path}>{newPath}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OrganizePreviewRow;
|
||||||
Loading…
Reference in new issue