Merge remote-tracking branch 'origin/next' into next-colors

app/soapbox/components/account.tsx

@@ -119,7 +119,7 @@ const Account = ({
     );
   }
 
-  const LinkEl = showProfileHoverCard ? Link : 'div';
+  const LinkEl: any = showProfileHoverCard ? Link : 'div';
 
   return (
     <div className='flex-shrink-0 group block w-full overflow-hidden' ref={overflowRef}>
@@ -132,7 +132,7 @@ const Account = ({
             <LinkEl
               to={`/@${account.get('acct')}`}
               title={account.get('acct')}
-              onClick={(event) => event.stopPropagation()}
+              onClick={(event: React.MouseEvent) => event.stopPropagation()}
             >
               <Avatar src={account.get('avatar')} size={avatarSize} />
             </LinkEl>
@@ -146,7 +146,7 @@ const Account = ({
               <LinkEl
                 to={`/@${account.get('acct')}`}
                 title={account.get('acct')}
-                onClick={(event) => event.stopPropagation()}
+                onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
                 <div className='flex items-center space-x-1 flex-grow' style={style}>
                   <Text

app/soapbox/components/media_gallery.js

@@ -17,6 +17,7 @@ import { isIOS } from '../is_mobile';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 
 import IconButton from './icon_button';
+import { Button, Text } from './ui';
 
 const ATTACHMENT_LIMIT = 4;
 const MAX_FILENAME_LENGTH = 45;
@@ -602,10 +603,19 @@ class MediaGallery extends React.PureComponent {
                 onClick={this.handleOpen}
               />
             ) : (
-              <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
-                <span className='spoiler-button__overlay__label'>
-                  {warning}
-                </span>
+              <button type='button' onClick={this.handleOpen} className='bg-transparent w-full h-full border-0'>
+                <div className='p-4 rounded-xl shadow-xl backdrop-blur-sm bg-white/75 text-center inline-block space-y-4 max-w-[280px]'>
+                  <div className='space-y-1'>
+                    <Text weight='semibold'>{warning}</Text>
+                    <Text size='sm'>
+                      {intl.formatMessage({ id: 'status.sensitive_warning.subtitle', defaultMessage: 'This content may not be suitable for all audiences.' })}
+                    </Text>
+                  </div>
+
+                  <Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/icons/eye.svg')}>
+                    {intl.formatMessage({ id: 'status.sensitive_warning.action', defaultMessage: 'Show content' })}
+                  </Button>
+                </div>
               </button>
             )
           )}

app/soapbox/components/profile_hover_card.js

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { useIntl } from 'react-intl';
 import { usePopper } from 'react-popper';
 import { useSelector, useDispatch } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import {
@@ -52,8 +52,9 @@ const handleMouseLeave = (dispatch) => {
   };
 };
 
-export const ProfileHoverCard = ({ history, visible }) => {
+export const ProfileHoverCard = ({ visible }) => {
   const dispatch = useDispatch();
+  const history = useHistory();
   const intl = useIntl();
 
   const [popperElement, setPopperElement] = useState(null);
@@ -134,11 +135,10 @@ ProfileHoverCard.propTypes = {
   visible: PropTypes.bool,
   accountId: PropTypes.string,
   account: ImmutablePropTypes.map,
-  history: PropTypes.object.isRequired,
 };
 
 ProfileHoverCard.defaultProps = {
   visible: true,
 };
 
-export default withRouter(ProfileHoverCard);
+export default ProfileHoverCard;

app/soapbox/components/ui/column/column.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import Helmet from 'soapbox/components/helmet';
 
 import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
 
-interface IColumn extends RouteComponentProps {
+interface IColumn {
   backHref?: string,
   label?: string,
   transparent?: boolean,
@@ -13,7 +13,9 @@ interface IColumn extends RouteComponentProps {
 }
 
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, history, transparent = false, withHeader = true } = props;
+  const { backHref, children, label, transparent = false, withHeader = true } = props;
+
+  const history = useHistory();
 
   const handleBackClick = () => {
     if (backHref) {
@@ -57,4 +59,4 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
   );
 });
 
-export default withRouter(Column);
+export default Column;

app/soapbox/components/ui/tabs/tabs.tsx

@@ -7,7 +7,7 @@ import {
 } from '@reach/tabs';
 import classNames from 'classnames';
 import * as React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import './tabs.css';
 
@@ -87,14 +87,16 @@ type Item = {
   action?: () => void,
   name: string
 }
-interface ITabs extends RouteComponentProps<any> {
+interface ITabs {
   items: Item[],
   activeItem: string,
 }
 
-const Tabs = ({ items, activeItem, history }: ITabs) => {
+const Tabs = ({ items, activeItem }: ITabs) => {
   const defaultIndex = items.findIndex(({ name }) => name === activeItem);
 
+  const history = useHistory();
+
   const onChange = (selectedIndex: number) => {
     const item = items[selectedIndex];
 
@@ -130,4 +132,4 @@ const Tabs = ({ items, activeItem, history }: ITabs) => {
   );
 };
 
-export default withRouter(Tabs);
+export default Tabs;

app/soapbox/features/account/components/header.js

@@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import InlineSVG from 'react-inlinesvg';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import Avatar from 'soapbox/components/avatar';
@@ -612,8 +613,7 @@ class Header extends ImmutablePureComponent {
                           return <MenuDivider key={idx} />;
                         } else {
                           const Comp = menuItem.action ? MenuItem : MenuLink;
-                          // TODO: Add `as: Link` once React Router is upgraded.
-                          const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, target: menuItem.newTab ? '_blank' : '_self' };
+                          const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link, target: menuItem.newTab ? '_blank' : '_self' };
 
                           return (
                             <Comp key={idx} {...itemProps} className='group'>

app/soapbox/features/compose/components/search.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import InlineSVG from 'react-inlinesvg';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
 import { useAppSelector } from 'soapbox/hooks';
@@ -32,7 +32,7 @@ function redirectToAccount(accountId: number, routerHistory: any) {
   };
 }
 
-interface ISearch extends RouteComponentProps<any> {
+interface ISearch {
   autoFocus?: boolean,
   autoSubmit?: boolean,
   autosuggest?: boolean,
@@ -44,11 +44,11 @@ const Search = (props: ISearch) => {
     autoFocus = false,
     autoSubmit = false,
     autosuggest = false,
-    history,
     openInRoute = false,
   } = props;
 
   const dispatch = useDispatch();
+  const history = useHistory();
   const intl = useIntl();
 
   const value = useAppSelector((state) => state.search.get('value'));
@@ -156,4 +156,4 @@ const Search = (props: ISearch) => {
   );
 };
 
-export default withRouter(Search);
+export default Search;

app/soapbox/features/developers/developers_menu.js

@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
 import { changeSettingImmediate } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
@@ -16,9 +15,10 @@ const messages = defineMessages({
   leave: { id: 'developers.leave', defaultMessage: 'You have left developers' },
 });
 
-const Developers = ({ history }) => {
-  const intl = useIntl();
+const Developers = () => {
   const dispatch = useDispatch();
+  const history = useHistory();
+  const intl = useIntl();
 
   const leaveDevelopers = (e) => {
     e.preventDefault();
@@ -67,8 +67,4 @@ const Developers = ({ history }) => {
   );
 };
 
-Developers.propTypes = {
-  history: PropTypes.object,
-};
-
-export default withRouter(Developers);
+export default Developers;

app/soapbox/features/notifications/components/notification.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import {  FormattedMessage, useIntl } from 'react-intl';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import Icon from '../../../components/icon';
 import Permalink from '../../../components/permalink';
@@ -77,9 +77,11 @@ const buildMessage = (type, account) => {
 };
 
 const Notification = (props) => {
-  const { hidden, history, notification, onMoveUp, onMoveDown } = props;
+  const { hidden, notification, onMoveUp, onMoveDown } = props;
 
+  const history = useHistory();
   const intl = useIntl();
+
   const type = notification.get('type');
   const timestamp = notification.get('created_at');
   const account = notification.get('account');
@@ -226,7 +228,6 @@ const Notification = (props) => {
 
 Notification.propTypes = {
   hidden: PropTypes.bool,
-  history: PropTypes.object.isRequired,
   notification: ImmutablePropTypes.map.isRequired,
   onMoveUp: PropTypes.func.isRequired,
   onMoveDown: PropTypes.func.isRequired,
@@ -241,4 +242,4 @@ Notification.propTypes = {
   siteTitle: PropTypes.string,
 };
 
-export default withRouter(Notification);
+export default Notification;

app/soapbox/features/preferences/index.tsx

@@ -111,11 +111,17 @@ const Preferences = () => {
   return (
     <Form>
       <List>
-        <ListItem label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reTRUTHs' />}>
+        <ListItem
+          label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reTRUTHs' />}
+          hint={<FormattedMessage id='preferences.hints.feed' defaultMessage='In your home feed' />}
+        >
           <SettingToggle settings={settings} settingPath={['home', 'shows', 'reblog']} onChange={onToggleChange} />
         </ListItem>
 
-        <ListItem label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />}>
+        <ListItem
+          label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />}
+          hint={<FormattedMessage id='preferences.hints.feed' defaultMessage='In your home feed' />}
+        >
           <SettingToggle settings={settings} settingPath={['home', 'shows', 'reply']} onChange={onToggleChange} />
         </ListItem>
 

app/soapbox/features/settings/index.js

@@ -1,8 +1,7 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import { fetchMfa } from 'soapbox/actions/mfa';
 
@@ -22,9 +21,11 @@ const messages = defineMessages({
   deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
 });
 
-const Settings = ({ history }) => {
-  const intl = useIntl();
+const Settings = () => {
   const dispatch = useDispatch();
+  const history = useHistory();
+  const intl = useIntl();
+
   const mfa = useSelector((state) => state.getIn(['security', 'mfa']));
   const me = useSelector((state) => state.get('me'));
   const account = useSelector((state) => state.getIn(['accounts', me]));
@@ -92,8 +93,4 @@ const Settings = ({ history }) => {
   );
 };
 
-Settings.propTypes = {
-  history: PropTypes.object,
-};
-
-export default withRouter(Settings);
+export default Settings;

app/soapbox/features/settings/media_display.js

@@ -1,15 +1,13 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, useIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 
 import { getSettings, changeSettingImmediate } from 'soapbox/actions/settings';
 import {
   SimpleForm,
   SelectDropdown,
 } from 'soapbox/features/forms';
+import { useAppSelector } from 'soapbox/hooks';
 
 import List, { ListItem } from '../../components/list';
 import { Card, CardBody, CardHeader, CardTitle } from '../../components/ui';
@@ -21,15 +19,12 @@ const messages = defineMessages({
   display_media_show_all: { id: 'preferences.fields.display_media.show_all', defaultMessage: 'Always show media' },
 });
 
-const mapStateToProps = state => {
-  return {
-    settings: getSettings(state),
-  };
-};
-
-const MediaDisplay = ({ history, settings, dispatch }) => {
+const MediaDisplay = () => {
+  const dispatch = useDispatch();
   const intl = useIntl();
 
+  const settings = useAppSelector((state) => getSettings(state));
+
   const displayMediaOptions = {
     default: intl.formatMessage(messages.display_media_default),
     hide_all: intl.formatMessage(messages.display_media_hide_all),
@@ -65,10 +60,4 @@ const MediaDisplay = ({ history, settings, dispatch }) => {
   );
 };
 
-MediaDisplay.propTypes = {
-  history: PropTypes.object,
-  dispatch: PropTypes.func.isRequired,
-  settings: ImmutablePropTypes.map,
-};
-
-export default withRouter(connect(mapStateToProps)(MediaDisplay));
+export default MediaDisplay;

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -2,6 +2,7 @@ import throttle from 'lodash/throttle';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 import { fetchOwnAccounts } from 'soapbox/actions/auth';
@@ -42,16 +43,13 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const isCurrentAccountStaff = isStaff(currentAccount) || false;
   const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id'))));
 
-  const handleLogOut = (event: React.MouseEvent) => {
-    event.preventDefault();
-
+  const handleLogOut = () => {
     dispatch(logOut(intl));
   };
 
   const handleSwitchAccount = (account: AccountEntity) => {
-    return (event: React.MouseEvent) => {
+    return () => {
       dispatch(switchAccount(account.id));
-      event.preventDefault();
     };
   };
 
@@ -115,7 +113,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
             return <MenuDivider key={idx} />;
           } else {
             const Comp: any = menuItem.action ? MenuItem : MenuLink;
-            const itemProps = menuItem.action ? { onSelect: menuItem.action } : { href: menuItem.to };
+            const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link };
 
             return (
               <Comp key={idx} {...itemProps}>

app/soapbox/features/verification/email_passthru.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { confirmEmailVerification } from 'soapbox/actions/verification';
@@ -95,8 +94,8 @@ const TokenExpired = () => {
 const EmailPassThru = ({ match }) => {
   const { token } = match.params;
 
-  const intl = useIntl();
   const dispatch = useDispatch();
+  const intl = useIntl();
 
   const [status, setStatus] = React.useState(Statuses.IDLE);
 
@@ -160,4 +159,4 @@ EmailPassThru.propTypes = {
   match: PropTypes.object,
 };
 
-export default withRouter(EmailPassThru);
+export default EmailPassThru;

app/soapbox/locales/en.json

@@ -713,6 +713,7 @@
   "preferences.fields.system_font_label": "Use system's default font",
   "preferences.fields.underline_links_label": "Always underline links in posts",
   "preferences.fields.unfollow_modal_label": "Show confirmation dialog before unfollowing someone",
+  "preferences.hints.feed": "In your home feed",
   "preferences.hints.content_type_markdown": "Warning: experimental!",
   "preferences.hints.demetricator": "Decrease social media anxiety by hiding all numbers from the site.",
   "preferences.hints.halloween": "Beware: SPOOKY! Supports light/dark toggle.",