Mastodon/app/javascript/flavours/glitch/components/limited_account_hint.tsx

import { useCallback } from 'react';

import { FormattedMessage } from 'react-intl';

import { revealAccount } from '@/flavours/glitch/actions/accounts_typed';
import { domain } from '@/flavours/glitch/initial_state';
import { useAppDispatch } from '@/flavours/glitch/store';

import { Button } from './button';

export const LimitedAccountHint: React.FC<{ accountId: string }> = ({
  accountId,
}) => {
  const dispatch = useAppDispatch();
  const reveal = useCallback(() => {
    dispatch(revealAccount({ id: accountId }));
  }, [dispatch, accountId]);

  return (
    <div className='limited-account-hint'>
      <p>
        <FormattedMessage
          id='limited_account_hint.title'
          defaultMessage='This profile has been hidden by the moderators of {domain}.'
          values={{ domain }}
        />
      </p>
      <Button onClick={reveal}>
        <FormattedMessage
          id='limited_account_hint.action'
          defaultMessage='Show profile anyway'
        />
      </Button>
    </div>
  );
};