From 12ed6889a40d6f98b146f78e4ea9accecfa3d9e9 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 22 Mar 2022 08:28:18 -0400 Subject: [PATCH 1/5] Use React Router Link in MenuLink --- .../features/account/components/header.js | Bin 23595 -> 23565 bytes .../ui/components/profile-dropdown.tsx | 3 ++- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js index 7446898300077bd722cc8a7294ac1ee751c9fbd6..42fcad65d7518f93d058b1314acc1e8e33545c2b 100644 GIT binary patch delta 75 zcmZ3zgRyr90P4O`aFdHrY8MkR!3!3aotdq==c!0782lD*ylh delta 86 zcmeC(!MJ({D}?yF_**GBrlcq&BoR>C6B&W**@H diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx index b2aa85e7a4..f5a0d355c3 100644 --- a/app/soapbox/features/ui/components/profile-dropdown.tsx +++ b/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'; @@ -115,7 +116,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { return ; } 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 ( From 40cc960985fddf1f5e298696443dbcfbdf87d371 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 22 Mar 2022 08:42:26 -0400 Subject: [PATCH 2/5] Use React Router hook for 'history' --- app/soapbox/components/account.tsx | 6 ++-- app/soapbox/components/profile_hover_card.js | Bin 4455 -> 4426 bytes app/soapbox/components/ui/column/column.tsx | 10 +++--- app/soapbox/components/ui/tabs/tabs.tsx | 10 +++--- .../features/compose/components/search.tsx | 8 ++--- .../features/developers/developers_menu.js | Bin 2911 -> 2826 bytes .../notifications/components/notification.js | Bin 6657 -> 6629 bytes app/soapbox/features/settings/index.js | Bin 3915 -> 3833 bytes .../features/settings/media_display.js | Bin 2413 -> 2130 bytes .../features/verification/email_passthru.js | Bin 5904 -> 5845 bytes package.json | 2 +- yarn.lock | 31 +++--------------- 12 files changed, 25 insertions(+), 42 deletions(-) diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index 4fd4d4218e..47dc5d769b 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -119,7 +119,7 @@ const Account = ({ ); } - const LinkEl = showProfileHoverCard ? Link : 'div'; + const LinkEl: any = showProfileHoverCard ? Link : 'div'; return (
@@ -132,7 +132,7 @@ const Account = ({ event.stopPropagation()} + onClick={(event: React.MouseEvent) => event.stopPropagation()} > @@ -146,7 +146,7 @@ const Account = ({ event.stopPropagation()} + onClick={(event: React.MouseEvent) => event.stopPropagation()} >
nB^64uEV*{nn|AOZ@u3P`g5*=}%7{x9Gq6i}3( TmYI|4kzbZt}3k%;J*#qDq~~$JwkmE3u#9R8vrZidiWH z6y+C$R2HNb>*Xh9r6!l?Wflje7M5lfrKU`NBj6*4FiZoeG%YhH)g!+wwa7WKC`Hqn F3jo1!D&7D9 diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx index 08ef17b9a3..59d88ace39 100644 --- a/app/soapbox/components/ui/column/column.tsx +++ b/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 = React.forwardRef((props, ref: React.ForwardedRef): 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 = React.forwardRef((props, ref: React.ForwardedR ); }); -export default withRouter(Column); +export default Column; diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx index bbb43267d5..ad82f7a7a1 100644 --- a/app/soapbox/components/ui/tabs/tabs.tsx +++ b/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 { +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; diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx index 10e1ebc6b9..791aa0dbfc 100644 --- a/app/soapbox/features/compose/components/search.tsx +++ b/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 { +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; diff --git a/app/soapbox/features/developers/developers_menu.js b/app/soapbox/features/developers/developers_menu.js index 919208c84867534bddc5266f4b2bdb52b86b078e..79227fb44e981ad894d0e1b092ad112d7d77b28a 100644 GIT binary patch delta 121 zcmcaF)+IJkm~ZT`aan?2DbwJbF!zaX`!SPx_n y#9&*6YAywsJ}ZQcdihCNsmUceT(#C*T&Wdc=cJ^jC6?xtC?KrWK$xj%%>@9sz+vVNq$k~#t-fslN~tC#WNs$1zQD#q=u&T=~KGCHX~_lTA4-1vB$XaujS8N{drHfh-M8 z>&*)|z4%n1N~{zDit-CWDhpDJ_41RlQj<&cGK+&!3rjPLQd2fR6aUC4g)m#gFTW%+ PEi*Z>Br`ux)0zta=Cd!e diff --git a/app/soapbox/features/settings/index.js b/app/soapbox/features/settings/index.js index 237b385637f841611dd2996ebe320a35718e97df..f78cddad7d763722df5fcff93654de99ea91e8c4 100644 GIT binary patch delta 81 zcmX>t_fvMF%5<*M;#7~!;*$KL%8f^vS=clcZ0!`PCx2$q7SDhPE7&R^)M#j0Prk__ Zy;+p?Cg)@|etxdt)RL0Sy!2vgE&#)898LfL delta 183 zcmew`I+lwVqs zTC{N?GmBugLPlnBNq$kKLanBPt(`*kMiqga;3+~e5RF}-+g2a;KjEM)uC$lro*2&B*$S*2Us8#^VITjQIr{<(4 zm*f{I)GDME<>xA>7w0DyB;{A=XXNK+Z=T24#5B2*ML3rn%0xov8b3ArAPaI5E3LTz=3Gvt delta 501 zcmZXQ!AiqG5Qfoskeoz3=xvZn6G(!Hr-pbCK@^12_64@dwq5CF*WC#kO6n_EdiN!I z^(FK@d<4O4n%YutJ2U_M|Lpg5@O{`|TndHIRzmi2Ni__V;Lwz1?W1WlL;LOY;*RqS zNqWB=f+E!LgKM{PE zzb|fgrn_xUWETn2o-mhah(MbXqAQr#0E%L!(&`DIDI!aUx&=du-MVlpz3Y|YBD9P7 zhjnr`ff3UvRPO!lc#tqH3C1HR+{%6aV>K4Z-lz5YKodr8%JG=wf%))~TvWx@POUZ4 zK=dC=3MO&oxj7wVX&f-!p-&kr(HPnK@c-NcZV~Ct&-afm*W8?%w6lfBbvAEx-O&C8 D+UK*S diff --git a/app/soapbox/features/verification/email_passthru.js b/app/soapbox/features/verification/email_passthru.js index 8bf6fecb9d3f230b3caee34bed20019b574e4380..dac2cc3bda2e4fcd57e7614fb853739b2555f2f7 100644 GIT binary patch delta 39 vcmbQBcU5=7(v4SE@=c!3FEv?^U3T*pen)nG*WAR+oPfmQ;*gA@Qfn>%Jkt(= delta 96 zcmcbrJ3(*4Qk~4)g8ZTqg=&TJ%#w_t{L+%tB86Iow4(f61@)rT#N-m)BCw!tN`CIf pMQivbzhV=b?8dLOxryI}T^gZD!! Date: Tue, 22 Mar 2022 08:58:12 -0400 Subject: [PATCH 3/5] Add hint to clarify Feed settings --- app/soapbox/features/preferences/index.tsx | 10 ++++++++-- app/soapbox/locales/en.json | 1 + 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx index a770fb7768..df0d206394 100644 --- a/app/soapbox/features/preferences/index.tsx +++ b/app/soapbox/features/preferences/index.tsx @@ -111,11 +111,17 @@ const Preferences = () => { return (
- }> + } + hint={} + > - }> + } + hint={} + > diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index b3d3d18ad4..ea087e446c 100644 --- a/app/soapbox/locales/en.json +++ b/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.", From 122ee00f582ed320dad1dc13cc318e6c9795e292 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 22 Mar 2022 11:13:42 -0400 Subject: [PATCH 4/5] Improve design of sensitive media --- app/soapbox/components/media_gallery.js | Bin 20695 -> 21402 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index 2c247df0e4b1988211adc270c584ad6886cb8584..bb293f4168cd902df88beb24da2f0f9f0f4a476d 100644 GIT binary patch delta 611 zcmaix%W4!s6ov^|h*<@ri--&dH>DxfJ&|}JOeTYm`!(Jy}E;B0LqO1@Cw zOCfF3pE8kOOJ^&dsoHU`A(}TO1x%kmg%IoWJk~%5WE2^UGMisRES)1?MpG>oyy0)2 zyck!Dw_Q5B*By^`Zx8=R{mWy3$(p1=nwQ~}dDN6yCE2uXgfnF3t4Z1`y7BDp?x6Pc z0i#y;7Nee|B@_J54nvb zv0+*)!Po#9g0CrvOd&*D5V4D*mV_oppD Date: Tue, 22 Mar 2022 11:41:44 -0400 Subject: [PATCH 5/5] Remove unneeded 'event' when using Reach Menu --- app/soapbox/features/ui/components/profile-dropdown.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx index f5a0d355c3..43f31cfa3c 100644 --- a/app/soapbox/features/ui/components/profile-dropdown.tsx +++ b/app/soapbox/features/ui/components/profile-dropdown.tsx @@ -43,16 +43,13 @@ const ProfileDropdown: React.FC = ({ 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(); }; };