Signed-off-by: marcin mikołajczak <git@mkljczk.pl>environments/review-develop-3zknud/deployments/30
marcin mikołajczak
2 years ago
commit
beef2de673
@ -1,104 +0,0 @@
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import snackbar from 'soapbox/actions/snackbar';
|
||||
|
||||
import api, { getLinks } from '../api';
|
||||
|
||||
export const EXPORT_FOLLOWS_REQUEST = 'EXPORT_FOLLOWS_REQUEST';
|
||||
export const EXPORT_FOLLOWS_SUCCESS = 'EXPORT_FOLLOWS_SUCCESS';
|
||||
export const EXPORT_FOLLOWS_FAIL = 'EXPORT_FOLLOWS_FAIL';
|
||||
|
||||
export const EXPORT_BLOCKS_REQUEST = 'EXPORT_BLOCKS_REQUEST';
|
||||
export const EXPORT_BLOCKS_SUCCESS = 'EXPORT_BLOCKS_SUCCESS';
|
||||
export const EXPORT_BLOCKS_FAIL = 'EXPORT_BLOCKS_FAIL';
|
||||
|
||||
export const EXPORT_MUTES_REQUEST = 'EXPORT_MUTES_REQUEST';
|
||||
export const EXPORT_MUTES_SUCCESS = 'EXPORT_MUTES_SUCCESS';
|
||||
export const EXPORT_MUTES_FAIL = 'EXPORT_MUTES_FAIL';
|
||||
|
||||
const messages = defineMessages({
|
||||
blocksSuccess: { id: 'export_data.success.blocks', defaultMessage: 'Blocks exported successfully' },
|
||||
followersSuccess: { id: 'export_data.success.followers', defaultMessage: 'Followers exported successfully' },
|
||||
mutesSuccess: { id: 'export_data.success.mutes', defaultMessage: 'Mutes exported successfully' },
|
||||
});
|
||||
|
||||
function fileExport(content, fileName) {
|
||||
const fileToDownload = document.createElement('a');
|
||||
|
||||
fileToDownload.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
|
||||
fileToDownload.setAttribute('download', fileName);
|
||||
fileToDownload.style.display = 'none';
|
||||
document.body.appendChild(fileToDownload);
|
||||
fileToDownload.click();
|
||||
document.body.removeChild(fileToDownload);
|
||||
}
|
||||
|
||||
function listAccounts(state) {
|
||||
return async apiResponse => {
|
||||
const followings = apiResponse.data;
|
||||
let accounts = [];
|
||||
let next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
|
||||
while (next) {
|
||||
apiResponse = await api(state).get(next.uri);
|
||||
next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
|
||||
Array.prototype.push.apply(followings, apiResponse.data);
|
||||
}
|
||||
|
||||
accounts = followings.map(account => account.fqn);
|
||||
return [... new Set(accounts)];
|
||||
};
|
||||
}
|
||||
|
||||
export function exportFollows(intl) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch({ type: EXPORT_FOLLOWS_REQUEST });
|
||||
const me = getState().get('me');
|
||||
return api(getState)
|
||||
.get(`/api/v1/accounts/${me}/following?limit=40`)
|
||||
.then(listAccounts(getState))
|
||||
.then((followings) => {
|
||||
followings = followings.map(fqn => fqn + ',true');
|
||||
followings.unshift('Account address,Show boosts');
|
||||
fileExport(followings.join('\n'), 'export_followings.csv');
|
||||
|
||||
dispatch(snackbar.success(intl.formatMessage(messages.followersSuccess)));
|
||||
dispatch({ type: EXPORT_FOLLOWS_SUCCESS });
|
||||
}).catch(error => {
|
||||
dispatch({ type: EXPORT_FOLLOWS_FAIL, error });
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function exportBlocks(intl) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch({ type: EXPORT_BLOCKS_REQUEST });
|
||||
return api(getState)
|
||||
.get('/api/v1/blocks?limit=40')
|
||||
.then(listAccounts(getState))
|
||||
.then((blocks) => {
|
||||
fileExport(blocks.join('\n'), 'export_block.csv');
|
||||
|
||||
dispatch(snackbar.success(intl.formatMessage(messages.blocksSuccess)));
|
||||
dispatch({ type: EXPORT_BLOCKS_SUCCESS });
|
||||
}).catch(error => {
|
||||
dispatch({ type: EXPORT_BLOCKS_FAIL, error });
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function exportMutes(intl) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch({ type: EXPORT_MUTES_REQUEST });
|
||||
return api(getState)
|
||||
.get('/api/v1/mutes?limit=40')
|
||||
.then(listAccounts(getState))
|
||||
.then((mutes) => {
|
||||
fileExport(mutes.join('\n'), 'export_mutes.csv');
|
||||
|
||||
dispatch(snackbar.success(intl.formatMessage(messages.mutesSuccess)));
|
||||
dispatch({ type: EXPORT_MUTES_SUCCESS });
|
||||
}).catch(error => {
|
||||
dispatch({ type: EXPORT_MUTES_FAIL, error });
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
import api, { getLinks } from '../api';
|
||||
|
||||
import snackbar from './snackbar';
|
||||
|
||||
import type { SnackbarAction } from './snackbar';
|
||||
import type { AxiosResponse } from 'axios';
|
||||
import type { RootState } from 'soapbox/store';
|
||||
|
||||
export const EXPORT_FOLLOWS_REQUEST = 'EXPORT_FOLLOWS_REQUEST';
|
||||
export const EXPORT_FOLLOWS_SUCCESS = 'EXPORT_FOLLOWS_SUCCESS';
|
||||
export const EXPORT_FOLLOWS_FAIL = 'EXPORT_FOLLOWS_FAIL';
|
||||
|
||||
export const EXPORT_BLOCKS_REQUEST = 'EXPORT_BLOCKS_REQUEST';
|
||||
export const EXPORT_BLOCKS_SUCCESS = 'EXPORT_BLOCKS_SUCCESS';
|
||||
export const EXPORT_BLOCKS_FAIL = 'EXPORT_BLOCKS_FAIL';
|
||||
|
||||
export const EXPORT_MUTES_REQUEST = 'EXPORT_MUTES_REQUEST';
|
||||
export const EXPORT_MUTES_SUCCESS = 'EXPORT_MUTES_SUCCESS';
|
||||
export const EXPORT_MUTES_FAIL = 'EXPORT_MUTES_FAIL';
|
||||
|
||||
const messages = defineMessages({
|
||||
blocksSuccess: { id: 'export_data.success.blocks', defaultMessage: 'Blocks exported successfully' },
|
||||
followersSuccess: { id: 'export_data.success.followers', defaultMessage: 'Followers exported successfully' },
|
||||
mutesSuccess: { id: 'export_data.success.mutes', defaultMessage: 'Mutes exported successfully' },
|
||||
});
|
||||
|
||||
type ExportDataActions = {
|
||||
type: typeof EXPORT_FOLLOWS_REQUEST
|
||||
| typeof EXPORT_FOLLOWS_SUCCESS
|
||||
| typeof EXPORT_FOLLOWS_FAIL
|
||||
| typeof EXPORT_BLOCKS_REQUEST
|
||||
| typeof EXPORT_BLOCKS_SUCCESS
|
||||
| typeof EXPORT_BLOCKS_FAIL
|
||||
| typeof EXPORT_MUTES_REQUEST
|
||||
| typeof EXPORT_MUTES_SUCCESS
|
||||
| typeof EXPORT_MUTES_FAIL,
|
||||
error?: any,
|
||||
} | SnackbarAction
|
||||
|
||||
function fileExport(content: string, fileName: string) {
|
||||
const fileToDownload = document.createElement('a');
|
||||
|
||||
fileToDownload.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
|
||||
fileToDownload.setAttribute('download', fileName);
|
||||
fileToDownload.style.display = 'none';
|
||||
document.body.appendChild(fileToDownload);
|
||||
fileToDownload.click();
|
||||
document.body.removeChild(fileToDownload);
|
||||
}
|
||||
|
||||
const listAccounts = (getState: () => RootState) => async(apiResponse: AxiosResponse<any, any>) => {
|
||||
const followings = apiResponse.data;
|
||||
let accounts = [];
|
||||
let next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
|
||||
while (next) {
|
||||
apiResponse = await api(getState).get(next.uri);
|
||||
next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
|
||||
Array.prototype.push.apply(followings, apiResponse.data);
|
||||
}
|
||||
|
||||
accounts = followings.map((account: { fqn: string }) => account.fqn);
|
||||
return Array.from(new Set(accounts));
|
||||
};
|
||||
|
||||
export const exportFollows = () => (dispatch: React.Dispatch<ExportDataActions>, getState: () => RootState) => {
|
||||
dispatch({ type: EXPORT_FOLLOWS_REQUEST });
|
||||
const me = getState().me;
|
||||
return api(getState)
|
||||
.get(`/api/v1/accounts/${me}/following?limit=40`)
|
||||
.then(listAccounts(getState))
|
||||
.then((followings) => {
|
||||
followings = followings.map(fqn => fqn + ',true');
|
||||
followings.unshift('Account address,Show boosts');
|
||||
fileExport(followings.join('\n'), 'export_followings.csv');
|
||||
|
||||
dispatch(snackbar.success(messages.followersSuccess));
|
||||
dispatch({ type: EXPORT_FOLLOWS_SUCCESS });
|
||||
}).catch(error => {
|
||||
dispatch({ type: EXPORT_FOLLOWS_FAIL, error });
|
||||
});
|
||||
};
|
||||
|
||||
export const exportBlocks = () => (dispatch: React.Dispatch<ExportDataActions>, getState: () => RootState) => {
|
||||
dispatch({ type: EXPORT_BLOCKS_REQUEST });
|
||||
return api(getState)
|
||||
.get('/api/v1/blocks?limit=40')
|
||||
.then(listAccounts(getState))
|
||||
.then((blocks) => {
|
||||
fileExport(blocks.join('\n'), 'export_block.csv');
|
||||
|
||||
dispatch(snackbar.success(messages.blocksSuccess));
|
||||
dispatch({ type: EXPORT_BLOCKS_SUCCESS });
|
||||
}).catch(error => {
|
||||
dispatch({ type: EXPORT_BLOCKS_FAIL, error });
|
||||
});
|
||||
};
|
||||
|
||||
export const exportMutes = () => (dispatch: React.Dispatch<ExportDataActions>, getState: () => RootState) => {
|
||||
dispatch({ type: EXPORT_MUTES_REQUEST });
|
||||
return api(getState)
|
||||
.get('/api/v1/mutes?limit=40')
|
||||
.then(listAccounts(getState))
|
||||
.then((mutes) => {
|
||||
fileExport(mutes.join('\n'), 'export_mutes.csv');
|
||||
|
||||
dispatch(snackbar.success(messages.mutesSuccess));
|
||||
dispatch({ type: EXPORT_MUTES_SUCCESS });
|
||||
}).catch(error => {
|
||||
dispatch({ type: EXPORT_MUTES_FAIL, error });
|
||||
});
|
||||
};
|
||||
@ -1,28 +0,0 @@
|
||||
import { ALERT_SHOW } from './alerts';
|
||||
|
||||
export const show = (severity, message, actionLabel, actionLink) => ({
|
||||
type: ALERT_SHOW,
|
||||
message,
|
||||
actionLabel,
|
||||
actionLink,
|
||||
severity,
|
||||
});
|
||||
|
||||
export function info(message, actionLabel, actionLink) {
|
||||
return show('info', message, actionLabel, actionLink);
|
||||
}
|
||||
|
||||
export function success(message, actionLabel, actionLink) {
|
||||
return show('success', message, actionLabel, actionLink);
|
||||
}
|
||||
|
||||
export function error(message, actionLabel, actionLink) {
|
||||
return show('error', message, actionLabel, actionLink);
|
||||
}
|
||||
|
||||
export default {
|
||||
info,
|
||||
success,
|
||||
error,
|
||||
show,
|
||||
};
|
||||
@ -0,0 +1,39 @@
|
||||
import { ALERT_SHOW } from './alerts';
|
||||
|
||||
import type { MessageDescriptor } from 'react-intl';
|
||||
|
||||
type SnackbarActionSeverity = 'info' | 'success' | 'error'
|
||||
|
||||
type SnackbarMessage = string | MessageDescriptor
|
||||
|
||||
export type SnackbarAction = {
|
||||
type: typeof ALERT_SHOW
|
||||
message: SnackbarMessage
|
||||
actionLabel?: string
|
||||
actionLink?: string
|
||||
severity: SnackbarActionSeverity
|
||||
}
|
||||
|
||||
export const show = (severity: SnackbarActionSeverity, message: SnackbarMessage, actionLabel?: string, actionLink?: string): SnackbarAction => ({
|
||||
type: ALERT_SHOW,
|
||||
message,
|
||||
actionLabel,
|
||||
actionLink,
|
||||
severity,
|
||||
});
|
||||
|
||||
export const info = (message: SnackbarMessage, actionLabel?: string, actionLink?: string) =>
|
||||
show('info', message, actionLabel, actionLink);
|
||||
|
||||
export const success = (message: SnackbarMessage, actionLabel?: string, actionLink?: string) =>
|
||||
show('success', message, actionLabel, actionLink);
|
||||
|
||||
export const error = (message: SnackbarMessage, actionLabel?: string, actionLink?: string) =>
|
||||
show('error', message, actionLabel, actionLink);
|
||||
|
||||
export default {
|
||||
info,
|
||||
success,
|
||||
error,
|
||||
show,
|
||||
};
|
||||
@ -0,0 +1,67 @@
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from '../../jest/test-helpers';
|
||||
import { normalizeAccount } from '../../normalizers';
|
||||
import Account from '../account';
|
||||
|
||||
describe('<Account />', () => {
|
||||
it('renders account name and username', () => {
|
||||
const account = normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'justin-username',
|
||||
display_name: 'Justin L',
|
||||
avatar: 'test.jpg',
|
||||
});
|
||||
|
||||
const store = {
|
||||
accounts: ImmutableMap({
|
||||
'1': account,
|
||||
}),
|
||||
};
|
||||
|
||||
render(<Account account={account} />, null, store);
|
||||
expect(screen.getByTestId('account')).toHaveTextContent('Justin L');
|
||||
expect(screen.getByTestId('account')).toHaveTextContent(/justin-username/i);
|
||||
});
|
||||
|
||||
describe('verification badge', () => {
|
||||
it('renders verification badge', () => {
|
||||
const account = normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'justin-username',
|
||||
display_name: 'Justin L',
|
||||
avatar: 'test.jpg',
|
||||
verified: true,
|
||||
});
|
||||
|
||||
const store = {
|
||||
accounts: ImmutableMap({
|
||||
'1': account,
|
||||
}),
|
||||
};
|
||||
|
||||
render(<Account account={account} />, null, store);
|
||||
expect(screen.getByTestId('verified-badge')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not render verification badge', () => {
|
||||
const account = normalizeAccount({
|
||||
id: '1',
|
||||
acct: 'justin-username',
|
||||
display_name: 'Justin L',
|
||||
avatar: 'test.jpg',
|
||||
verified: false,
|
||||
});
|
||||
|
||||
const store = {
|
||||
accounts: ImmutableMap({
|
||||
'1': account,
|
||||
}),
|
||||
};
|
||||
|
||||
render(<Account account={account} />, null, store);
|
||||
expect(screen.queryAllByTestId('verified-badge')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from '../../jest/test-helpers';
|
||||
import ColumnBackButton from '../column_back_button';
|
||||
|
||||
describe('<ColumnBackButton />', () => {
|
||||
it('renders correctly', () => {
|
||||
render(<ColumnBackButton />);
|
||||
|
||||
expect(screen.getByRole('button')).toHaveTextContent('Back');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import Bundle from 'soapbox/features/ui/components/bundle';
|
||||
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
import type { List as ImmutableList } from 'immutable';
|
||||
|
||||
interface IAttachmentThumbs {
|
||||
media: ImmutableList<Immutable.Record<any>>
|
||||
onClick?(): void
|
||||
sensitive?: boolean
|
||||
}
|
||||
|
||||
const AttachmentThumbs = (props: IAttachmentThumbs) => {
|
||||
const { media, onClick, sensitive } = props;
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const renderLoading = () => <div className='media-gallery--compact' />;
|
||||
const onOpenMedia = (media: Immutable.Record<any>, index: number) => dispatch(openModal('MEDIA', { media, index }));
|
||||
|
||||
return (
|
||||
<div className='attachment-thumbs'>
|
||||
<Bundle fetchComponent={MediaGallery} loading={renderLoading}>
|
||||
{(Component: any) => (
|
||||
<Component
|
||||
media={media}
|
||||
onOpenMedia={onOpenMedia}
|
||||
height={50}
|
||||
compact
|
||||
sensitive={sensitive}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
|
||||
{onClick && (
|
||||
<div className='attachment-thumbs__clickable-region' onClick={onClick} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AttachmentThumbs;
|
||||
@ -1,52 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import Bundle from 'soapbox/features/ui/components/bundle';
|
||||
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
|
||||
|
||||
export default @connect()
|
||||
class AttachmentThumbs extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
media: ImmutablePropTypes.list.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
sensitive: PropTypes.bool,
|
||||
};
|
||||
|
||||
renderLoading() {
|
||||
return <div className='media-gallery--compact' />;
|
||||
}
|
||||
|
||||
onOpenMedia = (media, index) => {
|
||||
this.props.dispatch(openModal('MEDIA', { media, index }));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { media, onClick, sensitive } = this.props;
|
||||
|
||||
return (
|
||||
<div className='attachment-thumbs'>
|
||||
<Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
|
||||
{Component => (
|
||||
<Component
|
||||
media={media}
|
||||
onOpenMedia={this.onOpenMedia}
|
||||
height={50}
|
||||
compact
|
||||
sensitive={sensitive}
|
||||
/>
|
||||
)}
|
||||
</Bundle>
|
||||
{onClick && (
|
||||
<div className='attachment-thumbs__clickable-region' onClick={onClick} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import Icon from 'soapbox/components/icon';
|
||||
|
||||
export default @withRouter
|
||||
class ColumnBackButton extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
to: PropTypes.string,
|
||||
history: PropTypes.object,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
const { to } = this.props;
|
||||
|
||||
if (window.history?.length === 1) {
|
||||
this.props.history.push(to ? to : '/');
|
||||
} else {
|
||||
this.props.history.goBack();
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyUp = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
this.handleClick();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button onClick={this.handleClick} onKeyUp={this.handleKeyUp} className='column-back-button'>
|
||||
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
|
||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
|
||||
import { useSoapboxConfig } from 'soapbox/hooks';
|
||||
|
||||
import { getAcct } from '../utils/accounts';
|
||||
|
||||
import Icon from './icon';
|
||||
import RelativeTimestamp from './relative_timestamp';
|
||||
import VerificationBadge from './verification_badge';
|
||||
|
||||
import type { Account } from 'soapbox/types/entities';
|
||||
|
||||
interface IDisplayName {
|
||||
account: Account
|
||||
withDate?: boolean
|
||||
}
|
||||
|
||||
const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = false }) => {
|
||||
const { displayFqn = false } = useSoapboxConfig();
|
||||
const { created_at: createdAt, verified } = account;
|
||||
|
||||
const joinedAt = createdAt ? (
|
||||
<div className='account__joined-at'>
|
||||
<Icon src={require('@tabler/icons/icons/clock.svg')} />
|
||||
<RelativeTimestamp timestamp={createdAt} />
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const displayName = (
|
||||
<span className='display-name__name'>
|
||||
<bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
|
||||
{verified && <VerificationBadge />}
|
||||
{withDate && joinedAt}
|
||||
</span>
|
||||
);
|
||||
|
||||
const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
|
||||
|
||||
return (
|
||||
<span className='display-name' data-testid='display-name'>
|
||||
<HoverRefWrapper accountId={account.get('id')} inline>
|
||||
{displayName}
|
||||
</HoverRefWrapper>
|
||||
{suffix}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default DisplayName;
|
||||
@ -1,85 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
|
||||
import { displayFqn } from 'soapbox/utils/state';
|
||||
|
||||
import { getAcct } from '../utils/accounts';
|
||||
|
||||
import Icon from './icon';
|
||||
import RelativeTimestamp from './relative_timestamp';
|
||||
import VerificationBadge from './verification_badge';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
displayFqn: displayFqn(state),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class DisplayName extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.record.isRequired,
|
||||
displayFqn: PropTypes.bool,
|
||||
others: ImmutablePropTypes.list,
|
||||
children: PropTypes.node,
|
||||
withDate: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
withDate: false,
|
||||
}
|
||||
|
||||
render() {
|
||||
const { account, displayFqn, others, children, withDate } = this.props;
|
||||
|
||||
let displayName, suffix;
|
||||
const verified = account.get('verified');
|
||||
|
||||
const createdAt = account.get('created_at');
|
||||
|
||||
const joinedAt = createdAt ? (
|
||||
<div className='account__joined-at'>
|
||||
<Icon src={require('@tabler/icons/icons/clock.svg')} />
|
||||
<RelativeTimestamp timestamp={createdAt} />
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
if (others?.size > 1) {
|
||||
displayName = others.take(2).map(a => (
|
||||
<span className='display-name__name' key={a.get('id')}>
|
||||
<bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>
|
||||
{verified && <VerificationBadge />}
|
||||
{withDate && joinedAt}
|
||||
</span>
|
||||
)).reduce((prev, cur) => [prev, ', ', cur]);
|
||||
|
||||
if (others.size - 2 > 0) {
|
||||
suffix = `+${others.size - 2}`;
|
||||
}
|
||||
} else {
|
||||
displayName = (
|
||||
<span className='display-name__name'>
|
||||
<bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
|
||||
{verified && <VerificationBadge />}
|
||||
{withDate && joinedAt}
|
||||
</span>
|
||||
);
|
||||
suffix = <span className='display-name__account'>@{getAcct(account, displayFqn)}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className='display-name' data-testid='display-name'>
|
||||
<HoverRefWrapper accountId={account.get('id')} inline>
|
||||
{displayName}
|
||||
</HoverRefWrapper>
|
||||
{suffix}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
|
||||
|
||||
export default @connect()
|
||||
@injectIntl
|
||||
class CSVExporter extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
action: PropTypes.func.isRequired,
|
||||
messages: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
isLoading: false,
|
||||
}
|
||||
|
||||
handleClick = (event) => {
|
||||
const { dispatch, action, intl } = this.props;
|
||||
|
||||
this.setState({ isLoading: true });
|
||||
dispatch(action(intl)).then(() => {
|
||||
this.setState({ isLoading: false });
|
||||
}).catch((error) => {
|
||||
this.setState({ isLoading: false });
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, messages } = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form>
|
||||
<Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
|
||||
<Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' onClick={this.handleClick}>
|
||||
{intl.formatMessage(messages.submit)}
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { MessageDescriptor, useIntl } from 'react-intl';
|
||||
|
||||
import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
import { AppDispatch } from 'soapbox/store';
|
||||
|
||||
interface ICSVExporter {
|
||||
messages: {
|
||||
input_label: MessageDescriptor,
|
||||
input_hint: MessageDescriptor,
|
||||
submit: MessageDescriptor,
|
||||
},
|
||||
action: () => (dispatch: AppDispatch, getState: any) => Promise<void>,
|
||||
}
|
||||
|
||||
const CSVExporter: React.FC<ICSVExporter> = ({ messages, action }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const handleClick: React.MouseEventHandler = (event) => {
|
||||
setIsLoading(true);
|
||||
dispatch(action()).then(() => {
|
||||
setIsLoading(false);
|
||||
}).catch(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
|
||||
<Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
|
||||
|
||||
<FormActions>
|
||||
<Button theme='primary' onClick={handleClick} disabled={isLoading}>
|
||||
{intl.formatMessage(messages.submit)}
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CSVExporter;
|
||||
@ -1,71 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
|
||||
|
||||
export default @connect()
|
||||
@injectIntl
|
||||
class CSVImporter extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
action: PropTypes.func.isRequired,
|
||||
messages: PropTypes.object.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
file: null,
|
||||
isLoading: false,
|
||||
}
|
||||
|
||||
handleSubmit = (event) => {
|
||||
const { dispatch, action, intl } = this.props;
|
||||
|
||||
const params = new FormData();
|
||||
params.append('list', this.state.file);
|
||||
|
||||
this.setState({ isLoading: true });
|
||||
dispatch(action(intl, params)).then(() => {
|
||||
this.setState({ isLoading: false });
|
||||
}).catch((error) => {
|
||||
this.setState({ isLoading: false });
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleFileChange = e => {
|
||||
const [file] = e.target.files || [];
|
||||
this.setState({ file });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, messages } = this.props;
|
||||
|
||||
return (
|
||||
<Form onSubmit={this.handleSubmit} disabled={this.state.isLoading}>
|
||||
<Text size='xl' weight='bold' tag='label'>{intl.formatMessage(messages.input_label)}</Text>
|
||||
<div>
|
||||
<input
|
||||
className='text-black dark:text-white'
|
||||
type='file'
|
||||
accept={['.csv', 'text/csv']}
|
||||
onChange={this.handleFileChange}
|
||||
required
|
||||
/>
|
||||
<Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
|
||||
</div>
|
||||
<FormActions>
|
||||
<Button type='submit' theme='primary' disabled={this.state.isLoading}>
|
||||
{intl.formatMessage(messages.submit)}
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { MessageDescriptor, useIntl } from 'react-intl';
|
||||
|
||||
import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
import { AppDispatch } from 'soapbox/store';
|
||||
|
||||
interface ICSVImporter {
|
||||
messages: {
|
||||
input_label: MessageDescriptor,
|
||||
input_hint: MessageDescriptor,
|
||||
submit: MessageDescriptor,
|
||||
},
|
||||
action: (params: FormData) => (dispatch: AppDispatch, getState: any) => Promise<void>,
|
||||
}
|
||||
|
||||
const CSVImporter: React.FC<ICSVImporter> = ({ messages, action }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [file, setFile] = useState<File | null | undefined>(null);
|
||||
|
||||
|
||||
const handleSubmit: React.FormEventHandler = (event) => {
|
||||
const params = new FormData();
|
||||
params.append('list', file!);
|
||||
|
||||
setIsLoading(true);
|
||||
dispatch(action(params)).then(() => {
|
||||
setIsLoading(false);
|
||||
}).catch(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = e => {
|
||||
const file = e.target.files?.item(0);
|
||||
setFile(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Text size='xl' weight='bold' tag='label'>{intl.formatMessage(messages.input_label)}</Text>
|
||||
<FormGroup
|
||||
hintText={<Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>}
|
||||
>
|
||||
<FileInput
|
||||
accept='.csv,text/csv'
|
||||
onChange={handleFileChange}
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormActions>
|
||||
<Button type='submit' theme='primary' disabled={isLoading}>
|
||||
{intl.formatMessage(messages.submit)}
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default CSVImporter;
|
||||
@ -0,0 +1,233 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import OtpInput from 'react-otp-input';
|
||||
|
||||
import { verifyCredentials } from 'soapbox/actions/auth';
|
||||
import { closeModal } from 'soapbox/actions/modals';
|
||||
import snackbar from 'soapbox/actions/snackbar';
|
||||
import { reConfirmPhoneVerification, reRequestPhoneVerification } from 'soapbox/actions/verification';
|
||||
import { FormGroup, Input, Modal, Stack, Text } from 'soapbox/components/ui';
|
||||
import { validPhoneNumberRegex } from 'soapbox/features/verification/steps/sms-verification';
|
||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
||||
import { getAccessToken } from 'soapbox/utils/auth';
|
||||
import { formatPhoneNumber } from 'soapbox/utils/phone';
|
||||
|
||||
interface IVerifySmsModal {
|
||||
onClose: (type: string) => void,
|
||||
}
|
||||
|
||||
enum Statuses {
|
||||
IDLE = 'IDLE',
|
||||
READY = 'READY',
|
||||
REQUESTED = 'REQUESTED',
|
||||
FAIL = 'FAIL',
|
||||
SUCCESS = 'SUCCESS',
|
||||
}
|
||||
|
||||
const VerifySmsModal: React.FC<IVerifySmsModal> = ({ onClose }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const accessToken = useAppSelector((state) => getAccessToken(state));
|
||||
const title = useAppSelector((state) => state.instance.title);
|
||||
const isLoading = useAppSelector((state) => state.verification.get('isLoading') as boolean);
|
||||
|
||||
const [status, setStatus] = useState<Statuses>(Statuses.IDLE);
|
||||
const [phone, setPhone] = useState<string>('');
|
||||
const [verificationCode, setVerificationCode] = useState('');
|
||||
const [requestedAnother, setAlreadyRequestedAnother] = useState(false);
|
||||
|
||||
const isValid = validPhoneNumberRegex.test(phone);
|
||||
|
||||
const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const formattedPhone = formatPhoneNumber(event.target.value);
|
||||
|
||||
setPhone(formattedPhone);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = (event: React.MouseEvent) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!isValid) {
|
||||
setStatus(Statuses.IDLE);
|
||||
dispatch(
|
||||
snackbar.error(
|
||||
intl.formatMessage({
|
||||
id: 'sms_verification.invalid',
|
||||
defaultMessage: 'Please enter a valid phone number.',
|
||||
}),
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(reRequestPhoneVerification(phone)).then(() => {
|
||||
dispatch(
|
||||
snackbar.success(
|
||||
intl.formatMessage({
|
||||
id: 'sms_verification.success',
|
||||
defaultMessage: 'A verification code has been sent to your phone number.',
|
||||
}),
|
||||
),
|
||||
);
|
||||
})
|
||||
.finally(() => setStatus(Statuses.REQUESTED))
|
||||
.catch(() => {
|
||||
dispatch(
|
||||
snackbar.error(
|
||||
intl.formatMessage({
|
||||
id: 'sms_verification.fail',
|
||||
defaultMessage: 'Failed to send SMS message to your phone number.',
|
||||
}),
|
||||
),
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const resendVerificationCode = (event?: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAlreadyRequestedAnother(true);
|
||||
handleSubmit(event as React.MouseEvent<HTMLButtonElement>);
|
||||
};
|
||||
|
||||
const onConfirmationClick = (event: any) => {
|
||||
switch (status) {
|
||||
case Statuses.IDLE:
|
||||
setStatus(Statuses.READY);
|
||||
break;
|
||||
case Statuses.READY:
|
||||
handleSubmit(event);
|
||||
break;
|
||||
case Statuses.REQUESTED:
|
||||
submitVerification();
|
||||
break;
|
||||
default: break;
|
||||
}
|
||||
};
|
||||
|
||||
const confirmationText = useMemo(() => {
|
||||
switch (status) {
|
||||
case Statuses.IDLE:
|
||||
return intl.formatMessage({
|
||||
id: 'sms_verification.modal.verify_sms',
|
||||
defaultMessage: 'Verify SMS',
|
||||
});
|
||||
case Statuses.READY:
|
||||
return intl.formatMessage({
|
||||
id: 'sms_verification.modal.verify_number',
|
||||
defaultMessage: 'Verify phone number',
|
||||
});
|
||||
case Statuses.REQUESTED:
|
||||
return intl.formatMessage({
|
||||
id: 'sms_verification.modal.verify_code',
|
||||
defaultMessage: 'Verify code',
|
||||
});
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
const renderModalBody = () => {
|
||||
switch (status) {
|
||||
case Statuses.IDLE:
|
||||
return (
|
||||
<Text theme='muted'>
|
||||
{intl.formatMessage({
|
||||
id: 'sms_verification.modal.verify_help_text',
|
||||
defaultMessage: 'Verify your phone number to start using {instance}.',
|
||||
}, {
|
||||
instance: title,
|
||||
})}
|
||||
</Text>
|
||||
);
|
||||
case Statuses.READY:
|
||||
return (
|
||||
<FormGroup labelText='Phone Number'>
|
||||
<Input
|
||||
type='text'
|
||||
value={phone}
|
||||
onChange={onChange}
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
case Statuses.REQUESTED:
|
||||
return (
|
||||
<>
|
||||
<Text theme='muted' size='sm' align='center'>
|
||||
{intl.formatMessage({
|
||||
id: 'sms_verification.modal.enter_code',
|
||||
defaultMessage: 'We sent you a 6-digit code via SMS. Enter it below.',
|
||||
})}
|
||||
</Text>
|
||||
|
||||
<OtpInput
|
||||
value={verificationCode}
|
||||
onChange={setVerificationCode}
|
||||
numInputs={6}
|
||||
isInputNum
|
||||
shouldAutoFocus
|
||||
isDisabled={isLoading}
|
||||
containerStyle='flex justify-center mt-2 space-x-4'
|
||||
inputStyle='w-10i border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500'
|
||||
/>
|
||||
</>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const submitVerification = () => {
|
||||
// TODO: handle proper validation from Pepe -- expired vs invalid
|
||||
dispatch(reConfirmPhoneVerification(verificationCode))
|
||||
.then(() => {
|
||||
setStatus(Statuses.SUCCESS);
|
||||
// eslint-disable-next-line promise/catch-or-return
|
||||
dispatch(verifyCredentials(accessToken))
|
||||
.then(() => dispatch(closeModal('VERIFY_SMS')));
|
||||
|
||||
})
|
||||
.catch(() => dispatch(
|
||||
snackbar.error(
|
||||
intl.formatMessage({
|
||||
id: 'sms_verification.invalid',
|
||||
defaultMessage: 'Your SMS token has expired.',
|
||||
}),
|
||||
),
|
||||
));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (verificationCode.length === 6) {
|
||||
submitVerification();
|
||||
}
|
||||
}, [verificationCode]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
intl.formatMessage({
|
||||
id: 'sms_verification.modal.verify_title',
|
||||
defaultMessage: 'Verify your phone number',
|
||||
})
|
||||
}
|
||||
onClose={() => onClose('VERIFY_SMS')}
|
||||
cancelAction={status === Statuses.IDLE ? () => onClose('VERIFY_SMS') : undefined}
|
||||
cancelText='Skip for now'
|
||||
confirmationAction={onConfirmationClick}
|
||||
confirmationText={confirmationText}
|
||||
secondaryAction={status === Statuses.REQUESTED ? resendVerificationCode : undefined}
|
||||
secondaryText={status === Statuses.REQUESTED ? intl.formatMessage({
|
||||
id: 'sms_verification.modal.resend_code',
|
||||
defaultMessage: 'Resend verification code?',
|
||||
}) : undefined}
|
||||
secondaryDisabled={requestedAnother}
|
||||
>
|
||||
<Stack space={4}>
|
||||
{renderModalBody()}
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default VerifySmsModal;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue