Refactor claimCollecitonAddButton
- claim makeSelect to select - only interested in claim's stream_type - Tooltip
This commit is contained in:
parent
c9fbf197f9
commit
1fb154f7fe
2 changed files with 35 additions and 28 deletions
|
@ -1,19 +1,26 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { doOpenModal } from 'redux/actions/app';
|
||||
import CollectionAddButton from './view';
|
||||
import { makeSelectClaimForUri } from 'redux/selectors/claims';
|
||||
import { selectClaimForUri } from 'redux/selectors/claims';
|
||||
import { makeSelectClaimUrlInCollection } from 'redux/selectors/collections';
|
||||
|
||||
const select = (state, props) => {
|
||||
const claim = makeSelectClaimForUri(props.uri)(state);
|
||||
const permanentUrl = claim && claim.permanent_url;
|
||||
const { uri } = props;
|
||||
|
||||
const claim = selectClaimForUri(state, uri);
|
||||
|
||||
// $FlowFixMe
|
||||
const { permanent_url: permanentUrl, value } = claim || {};
|
||||
const streamType = (value && value.stream_type) || '';
|
||||
|
||||
return {
|
||||
claim,
|
||||
isSaved: makeSelectClaimUrlInCollection(permanentUrl)(state),
|
||||
streamType,
|
||||
isSaved: permanentUrl && makeSelectClaimUrlInCollection(permanentUrl)(state),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(select, {
|
||||
const perform = {
|
||||
doOpenModal,
|
||||
})(CollectionAddButton);
|
||||
};
|
||||
|
||||
export default connect(select, perform)(CollectionAddButton);
|
||||
|
|
|
@ -4,38 +4,38 @@ import * as ICONS from 'constants/icons';
|
|||
import React from 'react';
|
||||
import Button from 'component/button';
|
||||
import classnames from 'classnames';
|
||||
import Tooltip from 'component/common/tooltip';
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
doOpenModal: (string, {}) => void,
|
||||
fileAction?: boolean,
|
||||
type?: boolean,
|
||||
claim: Claim,
|
||||
// redux
|
||||
streamType: Claim,
|
||||
isSaved: boolean,
|
||||
doOpenModal: (id: string, {}) => void,
|
||||
};
|
||||
|
||||
export default function CollectionAddButton(props: Props) {
|
||||
const { doOpenModal, uri, fileAction, type = 'playlist', claim, isSaved } = props;
|
||||
const { uri, fileAction, type = 'playlist', isSaved, streamType, doOpenModal } = props;
|
||||
|
||||
// $FlowFixMe
|
||||
const streamType = (claim && claim.value && claim.value.stream_type) || '';
|
||||
const isPlayable = streamType === 'video' || streamType === 'audio';
|
||||
|
||||
if (!isPlayable) return null;
|
||||
return (
|
||||
<Button
|
||||
button={fileAction ? undefined : 'alt'}
|
||||
className={classnames({ 'button--file-action': fileAction })}
|
||||
icon={fileAction ? (!isSaved ? ICONS.ADD : ICONS.STACK) : ICONS.LIBRARY}
|
||||
iconSize={fileAction ? 22 : undefined}
|
||||
label={uri ? (!isSaved ? __('Save') : __('Saved')) : __('New List')}
|
||||
requiresAuth={IS_WEB}
|
||||
title={__('Add this claim to a list')}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
doOpenModal(MODALS.COLLECTION_ADD, { uri, type });
|
||||
}}
|
||||
/>
|
||||
return !isPlayable ? null : (
|
||||
<Tooltip title={__('Add this claim to a list')} arrow={false}>
|
||||
<Button
|
||||
button={!fileAction && 'alt'}
|
||||
className={classnames({ 'button--file-action': fileAction })}
|
||||
icon={fileAction ? (!isSaved ? ICONS.ADD : ICONS.STACK) : ICONS.LIBRARY}
|
||||
iconSize={fileAction && 22}
|
||||
label={uri ? (!isSaved ? __('Save') : __('Saved')) : __('New List')}
|
||||
requiresAuth
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
doOpenModal(MODALS.COLLECTION_ADD, { uri, type });
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue