Change "My collections" path to /@username/collections (#38630)
This commit is contained in:
parent
ef4a583f54
commit
d6c0b93c85
@ -73,7 +73,7 @@ const BackButton: React.FC<{
|
||||
};
|
||||
|
||||
export interface Props {
|
||||
title?: string;
|
||||
title?: React.ReactNode;
|
||||
icon?: string;
|
||||
iconComponent?: IconProp;
|
||||
active?: boolean;
|
||||
|
||||
@ -10,11 +10,14 @@ import CollectionsFilledIcon from '@/material-icons/400-24px/category-fill.svg?r
|
||||
import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
|
||||
import { Column } from 'mastodon/components/column';
|
||||
import { ColumnHeader } from 'mastodon/components/column_header';
|
||||
import { DisplayNameSimple } from 'mastodon/components/display_name/simple';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import {
|
||||
ItemList,
|
||||
Scrollable,
|
||||
} from 'mastodon/components/scrollable_list/components';
|
||||
import { useAccount } from 'mastodon/hooks/useAccount';
|
||||
import { useAccountId, useCurrentAccountId } from 'mastodon/hooks/useAccountId';
|
||||
import {
|
||||
fetchAccountCollections,
|
||||
selectAccountCollections,
|
||||
@ -25,7 +28,11 @@ import { CollectionListItem } from './components/collection_list_item';
|
||||
import { messages as editorMessages } from './editor';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.collections', defaultMessage: 'My collections' },
|
||||
headingMe: { id: 'column.my_collections', defaultMessage: 'My collections' },
|
||||
headingOther: {
|
||||
id: 'column.other_collections',
|
||||
defaultMessage: 'Collections by {name}',
|
||||
},
|
||||
});
|
||||
|
||||
export const Collections: React.FC<{
|
||||
@ -33,17 +40,22 @@ export const Collections: React.FC<{
|
||||
}> = ({ multiColumn }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const me = useAppSelector((state) => state.meta.get('me') as string);
|
||||
const me = useCurrentAccountId();
|
||||
const accountId = useAccountId();
|
||||
const account = useAccount(accountId);
|
||||
|
||||
const { collections, status } = useAppSelector((state) =>
|
||||
selectAccountCollections(state, me),
|
||||
selectAccountCollections(state, accountId),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
void dispatch(fetchAccountCollections({ accountId: me }));
|
||||
}, [dispatch, me]);
|
||||
if (accountId) {
|
||||
void dispatch(fetchAccountCollections({ accountId }));
|
||||
}
|
||||
}, [dispatch, accountId]);
|
||||
|
||||
const emptyMessage =
|
||||
status === 'error' ? (
|
||||
status === 'error' || !accountId ? (
|
||||
<FormattedMessage
|
||||
id='collections.error_loading_collections'
|
||||
defaultMessage='There was an error when trying to load your collections.'
|
||||
@ -67,25 +79,36 @@ export const Collections: React.FC<{
|
||||
</>
|
||||
);
|
||||
|
||||
const isOwnCollection = accountId === me;
|
||||
const titleMessage = isOwnCollection
|
||||
? messages.headingMe
|
||||
: messages.headingOther;
|
||||
|
||||
const pageTitle = intl.formatMessage(titleMessage, {
|
||||
name: account?.get('display_name'),
|
||||
});
|
||||
const pageTitleHtml = intl.formatMessage(titleMessage, {
|
||||
name: <DisplayNameSimple account={account} />,
|
||||
});
|
||||
|
||||
return (
|
||||
<Column
|
||||
bindToDocument={!multiColumn}
|
||||
label={intl.formatMessage(messages.heading)}
|
||||
>
|
||||
<Column bindToDocument={!multiColumn} label={pageTitle}>
|
||||
<ColumnHeader
|
||||
title={intl.formatMessage(messages.heading)}
|
||||
title={pageTitleHtml}
|
||||
icon='collections'
|
||||
iconComponent={CollectionsFilledIcon}
|
||||
multiColumn={multiColumn}
|
||||
extraButton={
|
||||
<Link
|
||||
to='/collections/new'
|
||||
className='column-header__button'
|
||||
title={intl.formatMessage(editorMessages.create)}
|
||||
aria-label={intl.formatMessage(editorMessages.create)}
|
||||
>
|
||||
<Icon id='plus' icon={AddIcon} />
|
||||
</Link>
|
||||
isOwnCollection && (
|
||||
<Link
|
||||
to='/collections/new'
|
||||
className='column-header__button'
|
||||
title={intl.formatMessage(editorMessages.create)}
|
||||
aria-label={intl.formatMessage(editorMessages.create)}
|
||||
>
|
||||
<Icon id='plus' icon={AddIcon} />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
@ -105,7 +128,7 @@ export const Collections: React.FC<{
|
||||
</Scrollable>
|
||||
|
||||
<Helmet>
|
||||
<title>{intl.formatMessage(messages.heading)}</title>
|
||||
<title>{pageTitle}</title>
|
||||
<meta name='robots' content='noindex' />
|
||||
</Helmet>
|
||||
</Column>
|
||||
|
||||
@ -10,6 +10,7 @@ import type { Map as ImmutableMap } from 'immutable';
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import { useDrag } from '@use-gesture/react';
|
||||
|
||||
import { useAccount } from '@/mastodon/hooks/useAccount';
|
||||
import AddIcon from '@/material-icons/400-24px/add.svg?react';
|
||||
import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
|
||||
import BookmarksActiveIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
|
||||
@ -212,6 +213,7 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
|
||||
const { signedIn, permissions, disabledAccountId } = useIdentity();
|
||||
const location = useLocation();
|
||||
const showSearch = useBreakpoint('full') && !multiColumn;
|
||||
const account = useAccount(me);
|
||||
|
||||
let banner: React.ReactNode;
|
||||
|
||||
@ -335,7 +337,7 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
|
||||
{areCollectionsEnabled() && (
|
||||
<ColumnLink
|
||||
transparent
|
||||
to='/collections'
|
||||
to={`/@${account?.acct}/collections`}
|
||||
icon='collections'
|
||||
iconComponent={CollectionsIcon}
|
||||
activeIconComponent={CollectionsActiveIcon}
|
||||
|
||||
@ -4,6 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { useHistory } from 'react-router';
|
||||
|
||||
import { useAccount } from '@/mastodon/hooks/useAccount';
|
||||
import { me } from '@/mastodon/initial_state';
|
||||
import { deleteCollection } from 'mastodon/reducers/slices/collections';
|
||||
import { useAppDispatch } from 'mastodon/store';
|
||||
|
||||
@ -34,11 +36,12 @@ export const ConfirmDeleteCollectionModal: React.FC<
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const history = useHistory();
|
||||
const { acct: currentUserName } = useAccount(me) ?? {};
|
||||
|
||||
const onConfirm = useCallback(() => {
|
||||
void dispatch(deleteCollection({ collectionId: id }));
|
||||
history.push('/collections');
|
||||
}, [dispatch, history, id]);
|
||||
history.push(`/@${currentUserName}/collections`);
|
||||
}, [dispatch, history, id, currentUserName]);
|
||||
|
||||
return (
|
||||
<ConfirmationModal
|
||||
|
||||
@ -232,6 +232,13 @@ class SwitchingColumnsArea extends PureComponent {
|
||||
|
||||
<WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
|
||||
<WrappedRoute path={['/@:acct/featured', '/accounts/:id/featured']} component={AccountFeatured} content={children} />
|
||||
{areCollectionsEnabled() &&
|
||||
[
|
||||
<WrappedRoute path={['/@:acct/collections']} component={Collections} content={children} key='collections-list' />,
|
||||
<WrappedRoute path={['/collections/new', '/collections/:id/edit']} component={CollectionsEditor} content={children} key='collections-editor' />,
|
||||
<WrappedRoute path='/collections/:id' component={CollectionDetail} content={children} key='collections-detail' />,
|
||||
]
|
||||
}
|
||||
<WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
|
||||
<WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
|
||||
<WrappedRoute path={['/accounts/:id/followers', '/users/:acct/followers', '/@:acct/followers']} component={Followers} content={children} />
|
||||
@ -255,13 +262,6 @@ class SwitchingColumnsArea extends PureComponent {
|
||||
<WrappedRoute path='/followed_tags' component={FollowedTags} content={children} />
|
||||
<WrappedRoute path='/mutes' component={Mutes} content={children} />
|
||||
<WrappedRoute path='/lists' component={Lists} content={children} />
|
||||
{areCollectionsEnabled() &&
|
||||
[
|
||||
<WrappedRoute path={['/collections/new', '/collections/:id/edit']} component={CollectionsEditor} content={children} key='collections-editor' />,
|
||||
<WrappedRoute path='/collections/:id' component={CollectionDetail} content={children} key='collections-detail' />,
|
||||
<WrappedRoute path='/collections' component={Collections} content={children} key='collections-list' />
|
||||
]
|
||||
}
|
||||
<Route component={BundleColumnError} />
|
||||
</WrappedSwitch>
|
||||
</ColumnsArea>
|
||||
|
||||
@ -417,7 +417,6 @@
|
||||
"column.about": "About",
|
||||
"column.blocks": "Blocked users",
|
||||
"column.bookmarks": "Bookmarks",
|
||||
"column.collections": "My collections",
|
||||
"column.community": "Local timeline",
|
||||
"column.create_list": "Create list",
|
||||
"column.direct": "Private mentions",
|
||||
@ -433,7 +432,9 @@
|
||||
"column.list_members": "Manage list members",
|
||||
"column.lists": "Lists",
|
||||
"column.mutes": "Muted users",
|
||||
"column.my_collections": "My collections",
|
||||
"column.notifications": "Notifications",
|
||||
"column.other_collections": "Collections by {name}",
|
||||
"column.pins": "Pinned posts",
|
||||
"column.public": "Federated timeline",
|
||||
"column_back_button.label": "Back",
|
||||
|
||||
@ -311,7 +311,7 @@ interface AccountCollectionQuery {
|
||||
|
||||
export const selectAccountCollections = createAppSelector(
|
||||
[
|
||||
(_, accountId: string | null) => accountId,
|
||||
(_, accountId?: string | null) => accountId,
|
||||
(state) => state.collections.accountCollections,
|
||||
(state) => state.collections.collections,
|
||||
],
|
||||
|
||||
@ -158,6 +158,7 @@ Rails.application.routes.draw do
|
||||
with_options to: 'accounts#show' do
|
||||
get '/@:username', as: :short_account
|
||||
get '/@:username/featured'
|
||||
get '/@:username/collections'
|
||||
get '/@:username/with_replies', as: :short_account_with_replies
|
||||
get '/@:username/media', as: :short_account_media
|
||||
get '/@:username/tagged/:tag', as: :short_account_tag
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user