ProfilePage: fix tabs (fixes #927), redirect wrong case username

This commit is contained in:
Alex Gleason 2022-05-04 13:08:49 -05:00
parent 47d1a8e5d6
commit c00b5f7476
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7

View file

@ -27,23 +27,22 @@ interface IProfilePage {
}, },
} }
/** Page to display a user's profile. */
const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => { const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
const history = useHistory(); const history = useHistory();
const username = params?.username || '';
const { accountId, account, accountUsername, realAccount } = useAppSelector(state => { const { accountId, account, realAccount } = useAppSelector(state => {
const username = params?.username || '';
const { accounts } = state; const { accounts } = state;
const accountFetchError = (((state.accounts.getIn([-1, 'username']) || '') as string).toLowerCase() === username.toLowerCase()); const accountFetchError = (((state.accounts.getIn([-1, 'username']) || '') as string).toLowerCase() === username.toLowerCase());
let accountId: string | -1 | null = -1; let accountId: string | -1 | null = -1;
let account = null; let account = null;
let accountUsername = username;
if (accountFetchError) { if (accountFetchError) {
accountId = null; accountId = null;
} else { } else {
account = findAccountByUsername(state, username); account = findAccountByUsername(state, username);
accountId = account ? account.id : -1; accountId = account ? account.id : -1;
accountUsername = account ? account.acct : '';
} }
let realAccount; let realAccount;
@ -57,7 +56,6 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
return { return {
account: typeof accountId === 'string' ? getAccount(state, accountId) : account, account: typeof accountId === 'string' ? getAccount(state, accountId) : account,
accountId, accountId,
accountUsername,
realAccount, realAccount,
}; };
}); });
@ -66,24 +64,30 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
const features = useFeatures(); const features = useFeatures();
const { displayFqn } = useSoapboxConfig(); const { displayFqn } = useSoapboxConfig();
// Redirect from a user ID
if (realAccount) { if (realAccount) {
return <Redirect to={`/@${realAccount.acct}`} />; return <Redirect to={`/@${realAccount.acct}`} />;
} }
// Fix case of username
if (account && account.acct !== username) {
return <Redirect to={`/@${account.acct}`} />;
}
const tabItems = [ const tabItems = [
{ {
text: <FormattedMessage id='account.posts' defaultMessage='Posts' />, text: <FormattedMessage id='account.posts' defaultMessage='Posts' />,
to: `/@${accountUsername}`, to: `/@${username}`,
name: 'profile', name: 'profile',
}, },
{ {
text: <FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' />, text: <FormattedMessage id='account.posts_with_replies' defaultMessage='Posts and replies' />,
to: `/@${accountUsername}/with_replies`, to: `/@${username}/with_replies`,
name: 'replies', name: 'replies',
}, },
{ {
text: <FormattedMessage id='account.media' defaultMessage='Media' />, text: <FormattedMessage id='account.media' defaultMessage='Media' />,
to: `/@${accountUsername}/media`, to: `/@${username}/media`,
name: 'media', name: 'media',
}, },
]; ];
@ -100,14 +104,14 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
} }
let activeItem; let activeItem;
const pathname = history.location.pathname.replace(`@${accountUsername}/`, ''); const pathname = history.location.pathname.replace(`@${username}/`, '');
if (pathname.includes('with_replies')) { if (pathname.includes('with_replies')) {
activeItem = 'replies'; activeItem = 'replies';
} else if (pathname.includes('media')) { } else if (pathname.includes('media')) {
activeItem = 'media'; activeItem = 'media';
} else if (pathname.includes('favorites')) { } else if (pathname.includes('favorites')) {
activeItem = 'likes'; activeItem = 'likes';
} else if (pathname === `/@${accountUsername}`) { } else {
activeItem = 'profile'; activeItem = 'profile';
} }
@ -117,13 +121,13 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
<Column label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}> <Column label={account ? `@${getAcct(account, displayFqn)}` : ''} withHeader={false}>
<div className='space-y-4'> <div className='space-y-4'>
{/* @ts-ignore */} {/* @ts-ignore */}
<HeaderContainer accountId={accountId} username={accountUsername} /> <HeaderContainer accountId={accountId} username={username} />
<BundleContainer fetchComponent={ProfileInfoPanel}> <BundleContainer fetchComponent={ProfileInfoPanel}>
{Component => <Component username={accountUsername} account={account} />} {Component => <Component username={username} account={account} />}
</BundleContainer> </BundleContainer>
{account && activeItem && ( {account && (
<Tabs items={tabItems} activeItem={activeItem} /> <Tabs items={tabItems} activeItem={activeItem} />
)} )}