sforkowany z mirror/soapbox
StatusInteractionBar: convert to tsx and React.FC
Alex Gleason
rodzic
d976811cf1
commit
b3d510911c
|
|
@ -19,7 +19,7 @@ import scheduleIdleTask from '../../ui/util/schedule_idle_task';
|
|||
import Video from '../../video';
|
||||
|
||||
import Card from './card';
|
||||
import StatusInteractionBar from './status_interaction_bar';
|
||||
import StatusInteractionBar from './status-interaction-bar';
|
||||
|
||||
import type { List as ImmutableList } from 'immutable';
|
||||
import type { Attachment as AttachmentEntity, Status as StatusEntity } from 'soapbox/types/entities';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,186 @@
|
|||
import classNames from 'classnames';
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import React from 'react';
|
||||
import { FormattedNumber } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import emojify from 'soapbox/features/emoji/emoji';
|
||||
import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
|
||||
import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
|
||||
|
||||
import { HStack, IconButton, Text } from '../../../components/ui';
|
||||
|
||||
import type { Status } from 'soapbox/types/entities';
|
||||
|
||||
interface IStatusInteractionBar {
|
||||
status: Status,
|
||||
}
|
||||
|
||||
const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.Element | null => {
|
||||
|
||||
const me = useAppSelector(({ me }) => me);
|
||||
const { allowedEmoji } = useSoapboxConfig();
|
||||
const dispatch = useDispatch();
|
||||
const features = useFeatures();
|
||||
const { account } = status;
|
||||
|
||||
if (!account || typeof account !== 'object') return null;
|
||||
|
||||
const onOpenUnauthorizedModal = () => {
|
||||
dispatch(openModal('UNAUTHORIZED'));
|
||||
};
|
||||
|
||||
const onOpenReblogsModal = (username: string, statusId: string): void => {
|
||||
dispatch(openModal('REBLOGS', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
};
|
||||
|
||||
const onOpenFavouritesModal = (username: string, statusId: string): void => {
|
||||
dispatch(openModal('FAVOURITES', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
};
|
||||
|
||||
const onOpenReactionsModal = (username: string, statusId: string, reaction: string): void => {
|
||||
dispatch(openModal('REACTIONS', {
|
||||
username,
|
||||
statusId,
|
||||
reaction,
|
||||
}));
|
||||
};
|
||||
|
||||
const getNormalizedReacts = () => {
|
||||
return reduceEmoji(
|
||||
ImmutableList(status.getIn(['pleroma', 'emoji_reactions']) as any),
|
||||
status.favourites_count,
|
||||
status.favourited,
|
||||
allowedEmoji,
|
||||
).reverse();
|
||||
};
|
||||
|
||||
const handleOpenReblogsModal: React.EventHandler<React.MouseEvent> = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReblogsModal(account.acct, status.id);
|
||||
};
|
||||
|
||||
const getReposts = () => {
|
||||
if (status.reblogs_count) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className='text-success-600 cursor-pointer'
|
||||
src={require('@tabler/icons/icons/repeat.svg')}
|
||||
role='presentation'
|
||||
onClick={handleOpenReblogsModal}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.reblogs_count} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleOpenFavouritesModal: React.EventHandler<React.MouseEvent<HTMLButtonElement>> = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenFavouritesModal(account.acct, status.id);
|
||||
};
|
||||
|
||||
const getFavourites = () => {
|
||||
if (status.favourites_count) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className={classNames({
|
||||
'text-accent-300': true,
|
||||
'cursor-default': !features.exposableReactions,
|
||||
})}
|
||||
src={require('@tabler/icons/icons/heart.svg')}
|
||||
iconClassName='fill-accent-300'
|
||||
role='presentation'
|
||||
onClick={features.exposableReactions ? handleOpenFavouritesModal : undefined}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.favourites_count} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleOpenReactionsModal = (reaction: ImmutableMap<string, any>) => () => {
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReactionsModal(account.acct, status.id, String(reaction.get('name')));
|
||||
};
|
||||
|
||||
const getEmojiReacts = () => {
|
||||
const emojiReacts = getNormalizedReacts();
|
||||
const count = emojiReacts.reduce((acc, cur) => (
|
||||
acc + cur.get('count')
|
||||
), 0);
|
||||
|
||||
if (count > 0) {
|
||||
return (
|
||||
<div className='emoji-reacts-container'>
|
||||
<div className='emoji-reacts'>
|
||||
{emojiReacts.map((e, i) => {
|
||||
const emojiReact = (
|
||||
<>
|
||||
<span
|
||||
className='emoji-react__emoji'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
|
||||
/>
|
||||
<span className='emoji-react__count'>{e.get('count')}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
if (features.exposableReactions) {
|
||||
return (
|
||||
<span
|
||||
className='emoji-react'
|
||||
role='presentation'
|
||||
key={i}
|
||||
onClick={handleOpenReactionsModal(e)}
|
||||
>
|
||||
{emojiReact}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className='emoji-react' key={i}>{emojiReact}</span>;
|
||||
})}
|
||||
</div>
|
||||
<div className='emoji-reacts__count'>
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
return (
|
||||
<HStack space={3}>
|
||||
{features.emojiReacts ? getEmojiReacts() : getFavourites()}
|
||||
|
||||
{getReposts()}
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatusInteractionBar;
|
||||
|
|
@ -1,213 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedNumber } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import emojify from 'soapbox/features/emoji/emoji';
|
||||
import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
|
||||
|
||||
import { HStack, IconButton, Text } from '../../../components/ui';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const me = state.get('me');
|
||||
const instance = state.get('instance');
|
||||
|
||||
return {
|
||||
me,
|
||||
allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
|
||||
features: getFeatures(instance),
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenUnauthorizedModal() {
|
||||
dispatch(openModal('UNAUTHORIZED'));
|
||||
},
|
||||
onOpenReblogsModal(username, statusId) {
|
||||
dispatch(openModal('REBLOGS', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
},
|
||||
onOpenFavouritesModal(username, statusId) {
|
||||
dispatch(openModal('FAVOURITES', {
|
||||
username,
|
||||
statusId,
|
||||
}));
|
||||
},
|
||||
onOpenReactionsModal(username, statusId, reaction) {
|
||||
dispatch(openModal('REACTIONS', {
|
||||
username,
|
||||
statusId,
|
||||
reaction,
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
class StatusInteractionBar extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
status: ImmutablePropTypes.record,
|
||||
me: SoapboxPropTypes.me,
|
||||
allowedEmoji: ImmutablePropTypes.list,
|
||||
features: PropTypes.object.isRequired,
|
||||
onOpenReblogsModal: PropTypes.func,
|
||||
onOpenReactionsModal: PropTypes.func,
|
||||
}
|
||||
|
||||
getNormalizedReacts = () => {
|
||||
const { status } = this.props;
|
||||
return reduceEmoji(
|
||||
status.getIn(['pleroma', 'emoji_reactions']),
|
||||
status.get('favourites_count'),
|
||||
status.get('favourited'),
|
||||
this.props.allowedEmoji,
|
||||
).reverse();
|
||||
}
|
||||
|
||||
handleOpenReblogsModal = (event) => {
|
||||
const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id'));
|
||||
}
|
||||
|
||||
getReposts = () => {
|
||||
const { status } = this.props;
|
||||
|
||||
if (status.get('reblogs_count')) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className='text-success-600 cursor-pointer'
|
||||
src={require('@tabler/icons/icons/repeat.svg')}
|
||||
role='presentation'
|
||||
onClick={this.handleOpenReblogsModal}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.get('reblogs_count')} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
handleOpenFavouritesModal = (event) => {
|
||||
const { me, status, onOpenUnauthorizedModal, onOpenFavouritesModal } = this.props;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenFavouritesModal(status.getIn(['account', 'acct']), status.get('id'));
|
||||
}
|
||||
|
||||
getFavourites = () => {
|
||||
const { features, status } = this.props;
|
||||
|
||||
if (status.get('favourites_count')) {
|
||||
return (
|
||||
<HStack space={0.5} alignItems='center'>
|
||||
<IconButton
|
||||
className={classNames({
|
||||
'text-accent-300': true,
|
||||
'cursor-default': !features.exposableReactions,
|
||||
})}
|
||||
src={require('@tabler/icons/icons/heart.svg')}
|
||||
iconClassName='fill-accent-300'
|
||||
role='presentation'
|
||||
onClick={features.exposableReactions ? this.handleOpenFavouritesModal : null}
|
||||
/>
|
||||
|
||||
<Text theme='muted' size='sm'>
|
||||
<FormattedNumber value={status.get('favourites_count')} />
|
||||
</Text>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
handleOpenReactionsModal = (reaction) => () => {
|
||||
const { me, status, onOpenUnauthorizedModal, onOpenReactionsModal } = this.props;
|
||||
|
||||
if (!me) onOpenUnauthorizedModal();
|
||||
else onOpenReactionsModal(status.getIn(['account', 'acct']), status.get('id'), reaction.get('name'));
|
||||
}
|
||||
|
||||
getEmojiReacts = () => {
|
||||
const { features } = this.props;
|
||||
|
||||
const emojiReacts = this.getNormalizedReacts();
|
||||
const count = emojiReacts.reduce((acc, cur) => (
|
||||
acc + cur.get('count')
|
||||
), 0);
|
||||
|
||||
if (count > 0) {
|
||||
return (
|
||||
<div className='emoji-reacts-container'>
|
||||
<div className='emoji-reacts'>
|
||||
{emojiReacts.map((e, i) => {
|
||||
const emojiReact = (
|
||||
<>
|
||||
<span
|
||||
className='emoji-react__emoji'
|
||||
dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }}
|
||||
/>
|
||||
<span className='emoji-react__count'>{e.get('count')}</span>
|
||||
</>
|
||||
);
|
||||
|
||||
if (features.exposableReactions) {
|
||||
return (
|
||||
<span
|
||||
className='emoji-react'
|
||||
type='button'
|
||||
role='presentation'
|
||||
key={i}
|
||||
onClick={this.handleOpenReactionsModal(e)}
|
||||
>
|
||||
{emojiReact}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className='emoji-react' key={i}>{emojiReact}</span>;
|
||||
})}
|
||||
</div>
|
||||
<div className='emoji-reacts__count'>
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
render() {
|
||||
const { features } = this.props;
|
||||
|
||||
return (
|
||||
<HStack space={3}>
|
||||
{features.emojiReacts ? this.getEmojiReacts() : this.getFavourites()}
|
||||
|
||||
{this.getReposts()}
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
Ładowanie…
Reference in New Issue