bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

DetailedStatus: convert to React.FC

Browse source
This commit is contained in:
Alex Gleason 2022-08-08 20:13:43 -05:00
parent f4d1cb93cd
commit 3ced53a948
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 125 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
app/soapbox/features/status/components/detailed-status.tsx
View file

@ -1,7 +1,6 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React from 'react'; import React, { useEffect, useRef, useState } from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
import { FormattedDate, FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from 'react-intl';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import StatusMedia from 'soapbox/components/status-media'; import StatusMedia from 'soapbox/components/status-media';
@ -17,13 +16,14 @@ 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';
interface IDetailedStatus extends IntlProps { interface IDetailedStatus {
status: StatusEntity, status: StatusEntity,
onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void, onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
onOpenVideo: (media: ImmutableList<AttachmentEntity>, start: number) => void, onOpenVideo: (media: ImmutableList<AttachmentEntity>, start: number) => void,
onToggleHidden: (status: StatusEntity) => void, onToggleHidden: (status: StatusEntity) => void,
measureHeight: boolean, measureHeight: boolean,
onHeightChange: () => void, /** @deprecated Unused. */
onHeightChange?: () => void,
domain: string, domain: string,
compact: boolean, compact: boolean,
showMedia: boolean, showMedia: boolean,
@ -31,159 +31,129 @@ interface IDetailedStatus extends IntlProps {
onToggleMediaVisibility: () => void, onToggleMediaVisibility: () => void,
} }
interface IDetailedStatusState { const DetailedStatus: React.FC<IDetailedStatus> = ({
height: number | null, status,
} onToggleHidden,
onOpenCompareHistoryModal,
onToggleMediaVisibility,
measureHeight,
showMedia,
compact,
}) => {
const intl = useIntl();
class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedStatusState> { const node = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState<number>();
state = { const handleExpandedToggle = () => {
height: null, onToggleHidden(status);
}; };
node: HTMLDivElement | null = null; const handleOpenCompareHistoryModal = () => {
onOpenCompareHistoryModal(status);
};
handleExpandedToggle = () => { useEffect(() => {
this.props.onToggleHidden(this.props.status); if (measureHeight && node.current) {
scheduleIdleTask(() => {
if (node.current) {
setHeight(Math.ceil(node.current.scrollHeight) + 1);
} }
});
handleOpenCompareHistoryModal = () => {
this.props.onOpenCompareHistoryModal(this.props.status);
} }
}, [node.current, height]);
_measureHeight(heightJustChanged = false) { const getActualStatus = () => {
if (this.props.measureHeight && this.node) {
scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }));
if (this.props.onHeightChange && heightJustChanged) {
this.props.onHeightChange();
}
}
}
setRef: React.RefCallback<HTMLDivElement> = c => {
this.node = c;
this._measureHeight();
}
componentDidUpdate(prevProps: IDetailedStatus, prevState: IDetailedStatusState) {
this._measureHeight(prevState.height !== this.state.height);
}
// handleModalLink = e => {
// e.preventDefault();
//
// let href;
//
// if (e.target.nodeName !== 'A') {
// href = e.target.parentNode.href;
// } else {
// href = e.target.href;
// }
//
// window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
// }
getActualStatus = () => {
const { status } = this.props;
if (!status) return undefined; if (!status) return undefined;
return status.reblog && typeof status.reblog === 'object' ? status.reblog : status; return status.reblog && typeof status.reblog === 'object' ? status.reblog : status;
} };
render() { const actualStatus = getActualStatus();
const status = this.getActualStatus(); if (!actualStatus) return null;
if (!status) return null; const { account } = actualStatus;
const { account } = status;
if (!account || typeof account !== 'object') return null; if (!account || typeof account !== 'object') return null;
const outerStyle: React.CSSProperties = { boxSizing: 'border-box' }; const outerStyle: React.CSSProperties = { boxSizing: 'border-box' };
const { compact } = this.props;
let statusTypeIcon = null; let statusTypeIcon = null;
if (this.props.measureHeight) { if (measureHeight) {
outerStyle.height = `${this.state.height}px`; outerStyle.height = `${height}px`;
} }
let quote; let quote;
if (status.quote) { if (actualStatus.quote) {
if (status.pleroma.get('quote_visible', true) === false) { if (actualStatus.pleroma.get('quote_visible', true) === false) {
quote = ( quote = (
<div className='quoted-status-tombstone'> <div className='quoted-actualStatus-tombstone'>
<p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p> <p><FormattedMessage id='actualStatuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
</div> </div>
); );
} else { } else {
quote = <QuotedStatus statusId={status.quote as string} />; quote = <QuotedStatus statusId={actualStatus.quote as string} />;
} }
} }
if (status.visibility === 'direct') { if (actualStatus.visibility === 'direct') {
statusTypeIcon = <Icon src={require('@tabler/icons/mail.svg')} />; statusTypeIcon = <Icon src={require('@tabler/icons/mail.svg')} />;
} else if (status.visibility === 'private') { } else if (actualStatus.visibility === 'private') {
statusTypeIcon = <Icon src={require('@tabler/icons/lock.svg')} />; statusTypeIcon = <Icon src={require('@tabler/icons/lock.svg')} />;
} }
return ( return (
<div style={outerStyle}> <div style={outerStyle}>
<div ref={this.setRef} className={classNames('detailed-status', { compact })} tabIndex={-1}> <div ref={node} className={classNames('detailed-actualStatus', { compact })} tabIndex={-1}>
<div className='mb-4'> <div className='mb-4'>
<AccountContainer <AccountContainer
key={account.id} key={account.id}
id={account.id} id={account.id}
timestamp={status.created_at} timestamp={actualStatus.created_at}
avatarSize={42} avatarSize={42}
hideActions hideActions
/> />
</div> </div>
{/* status.group && ( <StatusReplyMentions status={actualStatus} />
<div className='status__meta'>
Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink>
</div>
)*/}
<StatusReplyMentions status={status} />
<StatusContent <StatusContent
status={status} status={actualStatus}
expanded={!status.hidden} expanded={!actualStatus.hidden}
onExpandedToggle={this.handleExpandedToggle} onExpandedToggle={handleExpandedToggle}
/> />
<StatusMedia <StatusMedia
status={status} status={actualStatus}
showMedia={this.props.showMedia} showMedia={showMedia}
onToggleVisibility={this.props.onToggleMediaVisibility} onToggleVisibility={onToggleMediaVisibility}
/> />
{quote} {quote}
<HStack justifyContent='between' alignItems='center' className='py-2'> <HStack justifyContent='between' alignItems='center' className='py-2'>
<StatusInteractionBar status={status} /> <StatusInteractionBar status={actualStatus} />
<div className='detailed-status__timestamp'> <div className='detailed-actualStatus__timestamp'>
{statusTypeIcon} {statusTypeIcon}
<span> <span>
<a href={status.url} target='_blank' rel='noopener' className='hover:underline'> <a href={actualStatus.url} target='_blank' rel='noopener' className='hover:underline'>
<Text tag='span' theme='muted' size='sm'> <Text tag='span' theme='muted' size='sm'>
<FormattedDate value={new Date(status.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> <FormattedDate value={new Date(actualStatus.created_at)} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</Text> </Text>
</a> </a>
{status.edited_at && ( {actualStatus.edited_at && (
<> <>
{' · '} {' · '}
<div <div
className='inline hover:underline' className='inline hover:underline'
onClick={this.handleOpenCompareHistoryModal} onClick={handleOpenCompareHistoryModal}
role='button' role='button'
tabIndex={0} tabIndex={0}
> >
<Text tag='span' theme='muted' size='sm'> <Text tag='span' theme='muted' size='sm'>
<FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: this.props.intl.formatDate(new Date(status.edited_at), { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <FormattedMessage id='actualStatus.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(new Date(actualStatus.edited_at), { hour12: false, month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} />
</Text> </Text>
</div> </div>
</> </>
@ -194,8 +164,6 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
</div> </div>
</div> </div>
); );
} };
} export default DetailedStatus;
export default injectIntl(DetailedStatus);