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 Video from '../../video';
|
||||||
|
|
||||||
import Card from './card';
|
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 { List as ImmutableList } from 'immutable';
|
||||||
import type { Attachment as AttachmentEntity, Status as StatusEntity } from 'soapbox/types/entities';
|
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