From 580960695cf35a2f13d3c30dc1aa3034b4a89149 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 29 Apr 2022 17:59:30 -0500 Subject: [PATCH] ProfilePage: convert to TSX --- app/soapbox/components/ui/tabs/tabs.tsx | 2 +- app/soapbox/pages/profile_page.js | Bin 5619 -> 0 bytes app/soapbox/pages/profile_page.tsx | 160 ++++++++++++++++++++++++ 3 files changed, 161 insertions(+), 1 deletion(-) delete mode 100644 app/soapbox/pages/profile_page.js create mode 100644 app/soapbox/pages/profile_page.tsx diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx index a0dfe7abbf..dbcbcbe337 100644 --- a/app/soapbox/components/ui/tabs/tabs.tsx +++ b/app/soapbox/components/ui/tabs/tabs.tsx @@ -92,7 +92,7 @@ const AnimatedTab: React.FC = ({ index, ...props }) => { }; type Item = { - text: string, + text: React.ReactNode, title?: string, href?: string, to?: string, diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js deleted file mode 100644 index 68d2a1a66a1b7cb18656b08619f77c63220a9132..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5619 zcmbtYZExE)5dNND!2&~N1Ga=>+ZWeLn-H0H7E*;I^N535ATlRMI~xQE^1L-Z7U|px)ueADtMkMT!>yDaU*ld=t|l5HU92i zEsCO1beXfE9xXTJ?)4P)4%Bvgo0`2BV5?+h&rY}>WTq=8)H$#tr=l*XQY<@XQqo&S z+R)W0FI66juS8ig2&XSqv#fax#V%RKYml3e2d*}kqEW0K?$L|WOcb!uVRgpKyHg=h z+5jpAt(M|3Su?622AMQG@o~r`2l?x@-q4wU*OXZfkd%t@@)=E5MkY(W=^ElQyE=8d zBSQY!h%0d_@?1Pz(30g7Si7oOnMwZ$DO~fMEy}eRuAKuK)GvPEx8=vmJ~|wqinCEX zPpI6Mt1fi`uXbe3%j{&e5>2VzZ9hs@m$c{-=u}FULncJs+j`3s?CkRBgwdu{q^iB@x8!BweyV zm9`W^ZWra~Q{-MmpT~RBr%bIjf7G?8(L>|n{>BNJzM7E8Sq4Q!8z09?oQVg3n@TnU z&(oARq5iADvZ0)YFdbkz3dDfHK_H{3U=h59Xmh5B4QY{q%=8sT6|BNq+2r|P^`3+h4K?q z3LIoFtW}4UBmH*CtR!G!Wh90)8eo997qk<1iU;_bu?0q|4VN*3B(-@{LW2A{N07;ypmR3`5hc>yP4f1aT_COx2i9m6joX`+ zB*%{Cn$IR27!DVT71$;|>1AT0ManBk?u^X$CODp@uJ*^3kV;0x(#XzuX>?(hlVd|l ztxe2`_R*dS2TOa?$>4ke1qDDrf<^8{>wcI_{E%es&1GO0Oia9 z1c#hXLbdx5IAu=L|BRr(!EWDaJ@0+5qguzlheq|lzs~{lY??aO8ODf*^2C(vt`Hll zL0>VQx?qNBhQYxG=AOpe4DH#z2~>O^IR`!9ixfH*w`cP8NUP5Jr3-%pm($q?{NS!A(qOy*5_b`(qdb+ zX*agvxJgTH#6vLk1Hi6M#Y$fW46Y^-C_KD2ggaz&d&?xYTUSraD5Lm2!!sZ1s;JuN z**>g7G1Ma%>$h<(RvNt6i9vCOp?k$fH&Akh$2qyNAz~-?J9xRun~cd(6doLCW4_+N z#npNSQAF+l887W@bU>q_@%|3dQyG5${mW-6+5dF8>X-DBU_W_ z$My#yb8~Hp&*ARbt-`vw){vYoS)RJAz>I=9GINS@18LZ%pf|vzfX8s_>E3T3a5>CP3o7RCy9CeXV3jSdX#kM-c%>4Qk!oYHr7oU1X#re46EYA>v3(-nND*vr(xJl(M^@D9FkOq*(2;inQT*25V0lF=ap zNOcd-`e-S2?mw^$JU!^=bEJ8KFr8bwVI%l)aDz57aQPdDAm;^F>F(E-XqZjU`FWIe zID4(?$733*_~F2Qw}CyV_0LB&556U8xbR!y)P5@rPpCgny@NBiXIM8&IKA!Be?lDr AF8}}l diff --git a/app/soapbox/pages/profile_page.tsx b/app/soapbox/pages/profile_page.tsx new file mode 100644 index 0000000000..68d06388a3 --- /dev/null +++ b/app/soapbox/pages/profile_page.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { Redirect, useHistory } from 'react-router-dom'; + +import LinkFooter from 'soapbox/features/ui/components/link_footer'; +import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; +import { + WhoToFollowPanel, + TrendsPanel, + ProfileInfoPanel, + ProfileMediaPanel, + SignUpPanel, +} from 'soapbox/features/ui/util/async-components'; +import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks'; +import { findAccountByUsername } from 'soapbox/selectors'; +import { getAcct } from 'soapbox/utils/accounts'; + +import { Column, Layout, Tabs } from '../components/ui'; +import HeaderContainer from '../features/account_timeline/containers/header_container'; +import { makeGetAccount } from '../selectors'; + +const getAccount = makeGetAccount(); + +interface IProfilePage { + params?: { + username?: string, + }, +} + +const ProfilePage: React.FC = ({ params, children }) => { + const history = useHistory(); + + const { accountId, account, accountUsername, realAccount } = useAppSelector(state => { + const username = params?.username || ''; + const { accounts } = state; + const accountFetchError = (((state.accounts.getIn([-1, 'username']) || '') as string).toLowerCase() === username.toLowerCase()); + + let accountId: string | -1 | null = -1; + let account = null; + let accountUsername = username; + if (accountFetchError) { + accountId = null; + } else { + account = findAccountByUsername(state, username); + accountId = account ? account.id : -1; + accountUsername = account ? account.acct : ''; + } + + let realAccount; + if (!account) { + const maybeAccount = accounts.get(username); + if (maybeAccount) { + realAccount = maybeAccount; + } + } + + return { + account: typeof accountId === 'string' ? getAccount(state, accountId) : account, + accountId, + accountUsername, + realAccount, + }; + }); + + const me = useAppSelector(state => state.me); + const features = useFeatures(); + const { displayFqn } = useSoapboxConfig(); + + if (realAccount) { + return ; + } + + const tabItems = [ + { + text: , + to: `/@${accountUsername}`, + name: 'profile', + }, + { + text: , + to: `/@${accountUsername}/with_replies`, + name: 'replies', + }, + { + text: , + to: `/@${accountUsername}/media`, + name: 'media', + }, + ]; + + if (account) { + const ownAccount = account.id === me; + if (ownAccount || !account.pleroma.get('hide_favorites', true)) { + tabItems.push({ + text: , + to: `/@${account.acct}/favorites`, + name: 'likes', + }); + } + } + + let activeItem; + const pathname = history.location.pathname.replace(`@${accountUsername}/`, ''); + if (pathname.includes('with_replies')) { + activeItem = 'replies'; + } else if (pathname.includes('media')) { + activeItem = 'media'; + } else if (pathname.includes('favorites')) { + activeItem = 'likes'; + } else if (pathname === `/@${accountUsername}`) { + activeItem = 'profile'; + } + + return ( + <> + + +
+ {/* @ts-ignore */} + + + + {Component => } + + + {account && activeItem && ( + + )} + + {children} +
+ + + + + {!me && ( + + {Component => } + + )} + + {Component => } + + {features.trends && ( + + {Component => } + + )} + {features.suggestions && ( + + {Component => } + + )} + + + + ); +}; + +export default ProfilePage;