sforkowany z mirror/soapbox
Merge branch 'quote-sensitive' into 'develop'
Sensitive quotes Closes #930 See merge request soapbox-pub/soapbox-fe!1504chats-fixes
commit
4457a0613c
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
|
||||
import { render, screen, rootState } from '../../jest/test-helpers';
|
||||
import { normalizeStatus, normalizeAccount } from '../../normalizers';
|
||||
import QuotedStatus from '../quoted-status';
|
||||
|
||||
describe('<QuotedStatus />', () => {
|
||||
it('renders content', () => {
|
||||
const account = normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'alex',
|
||||
});
|
||||
|
||||
const status = normalizeStatus({
|
||||
id: '1',
|
||||
account,
|
||||
content: 'hello world',
|
||||
contentHtml: 'hello world',
|
||||
});
|
||||
|
||||
const state = rootState.setIn(['accounts', '1', account]);
|
||||
|
||||
render(<QuotedStatus status={status} />, null, state);
|
||||
screen.getByText(/hello world/i);
|
||||
expect(screen.getByTestId('quoted-status')).toHaveTextContent(/hello world/i);
|
||||
});
|
||||
});
|
|
@ -1,11 +1,13 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import StatusMedia from 'soapbox/components/status-media';
|
||||
import { Stack, Text } from 'soapbox/components/ui';
|
||||
import AccountContainer from 'soapbox/containers/account_container';
|
||||
import { useSettings } from 'soapbox/hooks';
|
||||
import { defaultMediaVisibility } from 'soapbox/utils/status';
|
||||
|
||||
import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
|
||||
|
||||
|
@ -27,6 +29,11 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|||
const intl = useIntl();
|
||||
const history = useHistory();
|
||||
|
||||
const settings = useSettings();
|
||||
const displayMedia = settings.get('displayMedia');
|
||||
|
||||
const [showMedia, setShowMedia] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
|
||||
|
||||
const handleExpandClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!status) return;
|
||||
const account = status.account as AccountEntity;
|
||||
|
@ -44,6 +51,10 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|||
}
|
||||
};
|
||||
|
||||
const handleToggleMediaVisibility = () => {
|
||||
setShowMedia(!showMedia);
|
||||
};
|
||||
|
||||
const renderReplyMentions = () => {
|
||||
if (!status?.in_reply_to_id) {
|
||||
return null;
|
||||
|
@ -113,6 +124,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|||
|
||||
return (
|
||||
<Stack
|
||||
data-testid='quoted-status'
|
||||
space={2}
|
||||
className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
|
||||
'hover:bg-gray-50 dark:hover:bg-slate-700': !compose,
|
||||
|
@ -135,7 +147,12 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
|
|||
dangerouslySetInnerHTML={{ __html: status.contentHtml }}
|
||||
/>
|
||||
|
||||
<StatusMedia status={status} />
|
||||
<StatusMedia
|
||||
status={status}
|
||||
muted={compose}
|
||||
showMedia={showMedia}
|
||||
onToggleVisibility={handleToggleMediaVisibility}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
};
|
|
@ -8,6 +8,7 @@ import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
|
|||
import Icon from 'soapbox/components/icon';
|
||||
import AccountContainer from 'soapbox/containers/account_container';
|
||||
import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
|
||||
import { defaultMediaVisibility } from 'soapbox/utils/status';
|
||||
|
||||
import StatusMedia from './status-media';
|
||||
import StatusReplyMentions from './status-reply-mentions';
|
||||
|
@ -50,16 +51,6 @@ export const textForScreenReader = (intl: IntlShape, status: StatusEntity, reblo
|
|||
return values.join(', ');
|
||||
};
|
||||
|
||||
export const defaultMediaVisibility = (status: StatusEntity, displayMedia: string): boolean => {
|
||||
if (!status) return false;
|
||||
|
||||
if (status.reblog && typeof status.reblog === 'object') {
|
||||
status = status.reblog;
|
||||
}
|
||||
|
||||
return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
|
||||
};
|
||||
|
||||
interface IStatus extends RouteComponentProps {
|
||||
id?: string,
|
||||
contextType?: string,
|
||||
|
@ -431,7 +422,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
|
|||
</div>
|
||||
);
|
||||
} else {
|
||||
quote = <QuotedStatus statusId={status.quote} />;
|
||||
quote = <QuotedStatus statusId={status.quote as string} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -8,6 +8,8 @@ import Stack from '../stack/stack';
|
|||
interface IFormGroup {
|
||||
/** Input label message. */
|
||||
labelText?: React.ReactNode,
|
||||
/** Input label tooltip message. */
|
||||
labelTitle?: string,
|
||||
/** Input hint message. */
|
||||
hintText?: React.ReactNode,
|
||||
/** Input errors. */
|
||||
|
@ -16,7 +18,7 @@ interface IFormGroup {
|
|||
|
||||
/** Input container with label. Renders the child. */
|
||||
const FormGroup: React.FC<IFormGroup> = (props) => {
|
||||
const { children, errors = [], labelText, hintText } = props;
|
||||
const { children, errors = [], labelText, labelTitle, hintText } = props;
|
||||
const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
|
||||
const inputChildren = React.Children.toArray(children);
|
||||
const hasError = errors?.length > 0;
|
||||
|
@ -41,6 +43,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
htmlFor={formFieldId}
|
||||
data-testid='form-group-label'
|
||||
className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400'
|
||||
title={labelTitle}
|
||||
>
|
||||
{labelText}
|
||||
</label>
|
||||
|
@ -74,6 +77,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
htmlFor={formFieldId}
|
||||
data-testid='form-group-label'
|
||||
className='block text-sm font-medium text-gray-700 dark:text-gray-400'
|
||||
title={labelTitle}
|
||||
>
|
||||
{labelText}
|
||||
</label>
|
||||
|
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react';
|
||||
import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
|
||||
|
||||
import { changeComposeSensitivity } from 'soapbox/actions/compose';
|
||||
import { FormGroup, Checkbox } from 'soapbox/components/ui';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
const messages = defineMessages({
|
||||
marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
|
||||
unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
|
||||
});
|
||||
|
||||
/** Button to mark own media as sensitive. */
|
||||
const SensitiveButton: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const active = useAppSelector(state => state.compose.get('sensitive') === true);
|
||||
const disabled = useAppSelector(state => state.compose.get('spoiler') === true);
|
||||
|
||||
const onClick = () => {
|
||||
dispatch(changeComposeSensitivity());
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='px-2.5 py-1'>
|
||||
<FormGroup
|
||||
labelText={<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />}
|
||||
labelTitle={intl.formatMessage(active ? messages.marked : messages.unmarked)}
|
||||
>
|
||||
<Checkbox
|
||||
name='mark-sensitive'
|
||||
checked={active}
|
||||
onChange={onClick}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SensitiveButton;
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
// import SensitiveButtonContainer from '../containers/sensitive_button_container';
|
||||
import SensitiveButton from '../components/sensitive-button';
|
||||
import UploadProgress from '../components/upload-progress';
|
||||
import UploadContainer from '../containers/upload_container';
|
||||
|
||||
|
@ -25,7 +25,7 @@ const UploadForm = () => {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* {!mediaIds.isEmpty() && <SensitiveButtonContainer />} */}
|
||||
{!mediaIds.isEmpty() && <SensitiveButton />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -1,26 +0,0 @@
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import { cancelQuoteCompose } from 'soapbox/actions/compose';
|
||||
import QuotedStatus from 'soapbox/features/status/components/quoted_status';
|
||||
import { makeGetStatus } from 'soapbox/selectors';
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
status: getStatus(state, { id: state.getIn(['compose', 'quote']) }),
|
||||
compose: true,
|
||||
});
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onCancel() {
|
||||
dispatch(cancelQuoteCompose());
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default connect(makeMapStateToProps, mapDispatchToProps)(QuotedStatus);
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
|
||||
import { cancelQuoteCompose } from 'soapbox/actions/compose';
|
||||
import QuotedStatus from 'soapbox/components/quoted-status';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
import { makeGetStatus } from 'soapbox/selectors';
|
||||
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
/** QuotedStatus shown in post composer. */
|
||||
const QuotedStatusContainer: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const status = useAppSelector(state => getStatus(state, { id: state.compose.get('quote') }));
|
||||
|
||||
const onCancel = () => {
|
||||
dispatch(cancelQuoteCompose());
|
||||
};
|
||||
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<QuotedStatus
|
||||
status={status}
|
||||
onCancel={onCancel}
|
||||
compose
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuotedStatusContainer;
|
|
@ -1,60 +0,0 @@
|
|||
import classNames from 'classnames';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { changeComposeSensitivity } from 'soapbox/actions/compose';
|
||||
|
||||
const messages = defineMessages({
|
||||
marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
|
||||
unmarked: { id: 'compose_form.sensitive.unmarked', defaultMessage: 'Media is not marked as sensitive' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
active: state.getIn(['compose', 'sensitive']),
|
||||
disabled: state.getIn(['compose', 'spoiler']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onClick() {
|
||||
dispatch(changeComposeSensitivity());
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
class SensitiveButton extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
disabled: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { active, disabled, onClick, intl } = this.props;
|
||||
|
||||
return (
|
||||
<div className='compose-form__sensitive-button'>
|
||||
<label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
|
||||
<input
|
||||
name='mark-sensitive'
|
||||
type='checkbox'
|
||||
checked={active}
|
||||
onChange={onClick}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
<span className={classNames('checkbox', { active })} />
|
||||
|
||||
<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));
|
|
@ -115,7 +115,7 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
|
|||
</div>
|
||||
);
|
||||
} else {
|
||||
quote = <QuotedStatus statusId={status.quote} />;
|
||||
quote = <QuotedStatus statusId={status.quote as string} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,17 +0,0 @@
|
|||
import { connect } from 'react-redux';
|
||||
|
||||
import { makeGetStatus } from 'soapbox/selectors';
|
||||
|
||||
import QuotedStatus from '../components/quoted_status';
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = (state, { statusId }) => ({
|
||||
status: getStatus(state, { id: statusId }),
|
||||
});
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
export default connect(makeMapStateToProps)(QuotedStatus);
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
|
||||
import QuotedStatus from 'soapbox/components/quoted-status';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { makeGetStatus } from 'soapbox/selectors';
|
||||
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
interface IQuotedStatusContainer {
|
||||
/** Status ID to the quoted status. */
|
||||
statusId: string,
|
||||
}
|
||||
|
||||
const QuotedStatusContainer: React.FC<IQuotedStatusContainer> = ({ statusId }) => {
|
||||
const status = useAppSelector(state => getStatus(state, { id: statusId }));
|
||||
|
||||
if (!status) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<QuotedStatus
|
||||
status={status}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuotedStatusContainer;
|
|
@ -50,13 +50,14 @@ import {
|
|||
} from 'soapbox/actions/statuses';
|
||||
import MissingIndicator from 'soapbox/components/missing_indicator';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import { textForScreenReader, defaultMediaVisibility } from 'soapbox/components/status';
|
||||
import { textForScreenReader } from 'soapbox/components/status';
|
||||
import SubNavigation from 'soapbox/components/sub_navigation';
|
||||
import Tombstone from 'soapbox/components/tombstone';
|
||||
import { Column, Stack } from 'soapbox/components/ui';
|
||||
import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
|
||||
import PendingStatus from 'soapbox/features/ui/components/pending_status';
|
||||
import { makeGetStatus } from 'soapbox/selectors';
|
||||
import { defaultMediaVisibility } from 'soapbox/utils/status';
|
||||
|
||||
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
|
||||
|
||||
|
|
|
@ -83,7 +83,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
|
|||
|
||||
{status.poll && <PollPreview poll={status.poll} />}
|
||||
|
||||
{status.quote && <QuotedStatus statusId={status.quote} />}
|
||||
{status.quote && <QuotedStatus statusId={status.quote as string} />}
|
||||
</div>
|
||||
|
||||
{/* TODO */}
|
||||
|
|
|
@ -2,7 +2,10 @@ import { fromJS } from 'immutable';
|
|||
|
||||
import { normalizeStatus } from 'soapbox/normalizers/status';
|
||||
|
||||
import { hasIntegerMediaIds } from '../status';
|
||||
import {
|
||||
hasIntegerMediaIds,
|
||||
defaultMediaVisibility,
|
||||
} from '../status';
|
||||
|
||||
describe('hasIntegerMediaIds()', () => {
|
||||
it('returns true for a Pleroma deleted status', () => {
|
||||
|
@ -10,3 +13,24 @@ describe('hasIntegerMediaIds()', () => {
|
|||
expect(hasIntegerMediaIds(status)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('defaultMediaVisibility()', () => {
|
||||
it('returns false with no status', () => {
|
||||
expect(defaultMediaVisibility(undefined, 'default')).toBe(false);
|
||||
});
|
||||
|
||||
it('hides sensitive media by default', () => {
|
||||
const status = normalizeStatus({ sensitive: true });
|
||||
expect(defaultMediaVisibility(status, 'default')).toBe(false);
|
||||
});
|
||||
|
||||
it('hides media when displayMedia is hide_all', () => {
|
||||
const status = normalizeStatus({});
|
||||
expect(defaultMediaVisibility(status, 'hide_all')).toBe(false);
|
||||
});
|
||||
|
||||
it('shows sensitive media when displayMedia is show_all', () => {
|
||||
const status = normalizeStatus({ sensitive: true });
|
||||
expect(defaultMediaVisibility(status, 'show_all')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -2,6 +2,17 @@ import { isIntegerId } from 'soapbox/utils/numbers';
|
|||
|
||||
import type { Status as StatusEntity } from 'soapbox/types/entities';
|
||||
|
||||
/** Get the initial visibility of media attachments from user settings. */
|
||||
export const defaultMediaVisibility = (status: StatusEntity | undefined, displayMedia: string): boolean => {
|
||||
if (!status) return false;
|
||||
|
||||
if (status.reblog && typeof status.reblog === 'object') {
|
||||
status = status.reblog;
|
||||
}
|
||||
|
||||
return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
|
||||
};
|
||||
|
||||
/** Grab the first external link from a status. */
|
||||
export const getFirstExternalLink = (status: StatusEntity): HTMLAnchorElement | null => {
|
||||
try {
|
||||
|
|
Ładowanie…
Reference in New Issue