Refactor claimCollecitonAddButton

- claim makeSelect to select
- only interested in claim's stream_type
- Tooltip
This commit is contained in:
Rafael 2022-02-01 17:10:08 -03:00 committed by Thomas Zarebczan
parent c9fbf197f9
commit 1fb154f7fe
2 changed files with 35 additions and 28 deletions

View file

@ -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);

View file

@ -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>
);
}