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/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/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/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/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) => {
+  const handleLogOut = () => {
-    event.preventDefault();
-
     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/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.",

package.json

@@ -70,7 +70,7 @@
     "@types/escape-html": "^1.0.1",
     "@types/http-link-header": "^1.0.3",
     "@types/lodash": "^4.14.180",
-    "@types/react-router-dom": "^4.2.6",
+    "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^8.3.4",
     "array-includes": "^3.0.3",
     "autoprefixer": "^10.4.2",

yarn.lock

@@ -1148,13 +1148,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.7.6":
-  version "7.17.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
-  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@7", "@babel/template@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -1989,13 +1982,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/history@*":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-5.0.0.tgz#29f919f0c8e302763798118f45b19cab4a886f14"
-  integrity sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==
-  dependencies:
-    history "*"
-
 "@types/history@^4.7.11":
   version "4.7.11"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
@@ -2119,12 +2105,12 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-router-dom@^4.2.6":
+"@types/react-router-dom@^5.3.3":
-  version "4.3.5"
+  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-  integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==
+  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
   dependencies:
-    "@types/history" "*"
+    "@types/history" "^4.7.11"
     "@types/react" "*"
     "@types/react-router" "*"
 
@@ -5367,13 +5353,6 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-history@*:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
-  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 history@^4.10.1, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"