Prevent logged out users from accessing collection & list creation routes (#39282)
This commit is contained in:
parent
ecc823fc2e
commit
e00d16474e
@ -29,7 +29,7 @@ import { useAppDispatch, useAppSelector } from '@/mastodon/store';
|
||||
import AddIcon from '@/material-icons/400-24px/add.svg?react';
|
||||
|
||||
import { CollectionListItem } from '../collections/components/collection_list_item';
|
||||
import { useCollectionsCreatedBy } from '../collections/overview/created_by_you';
|
||||
import { useCollectionsCreatedBy } from '../collections/overview/created_by_account';
|
||||
|
||||
import { EmptyMessage } from './components/empty_message';
|
||||
import { Subheading, SubheadingLink } from './components/subheading';
|
||||
|
||||
@ -15,7 +15,7 @@ import { IconButton } from 'mastodon/components/icon_button';
|
||||
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||
|
||||
import { MAX_COLLECTION_ACCOUNT_COUNT } from '../collections/editor/accounts';
|
||||
import { useCollectionsCreatedBy } from '../collections/overview/created_by_you';
|
||||
import { useCollectionsCreatedBy } from '../collections/overview/created_by_account';
|
||||
|
||||
import { CollectionToggle } from './collection_toggle';
|
||||
|
||||
|
||||
@ -13,20 +13,21 @@ import {
|
||||
|
||||
import { Helmet } from '@unhead/react/helmet';
|
||||
|
||||
import { Callout } from '@/mastodon/components/callout';
|
||||
import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
|
||||
import { initialState } from '@/mastodon/initial_state';
|
||||
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
|
||||
import { Callout } from 'mastodon/components/callout';
|
||||
import { Column } from 'mastodon/components/column';
|
||||
import { ColumnHeader } from 'mastodon/components/column_header';
|
||||
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
|
||||
import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
|
||||
import { useIdentity } from 'mastodon/identity_context';
|
||||
import { initialState } from 'mastodon/initial_state';
|
||||
import {
|
||||
collectionEditorActions,
|
||||
fetchCollection,
|
||||
} from 'mastodon/reducers/slices/collections';
|
||||
import { useAppDispatch, useAppSelector } from 'mastodon/store';
|
||||
|
||||
import { useCollectionsCreatedBy } from '../overview/created_by_you';
|
||||
import { useCollectionsCreatedBy } from '../overview/created_by_account';
|
||||
|
||||
import { CollectionAccounts } from './accounts';
|
||||
import { CollectionDetails } from './details';
|
||||
@ -75,7 +76,7 @@ export const CollectionEditorPage: React.FC<{
|
||||
}> = ({ multiColumn }) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const accountId = useCurrentAccountId();
|
||||
const { accountId, signedIn } = useIdentity();
|
||||
const { id = null } = useParams<{ id?: string }>();
|
||||
const { path } = useRouteMatch();
|
||||
const collection = useAppSelector((state) =>
|
||||
@ -94,13 +95,13 @@ export const CollectionEditorPage: React.FC<{
|
||||
(!isEditMode && collectionListStatus === 'loading');
|
||||
|
||||
const canCreateMoreCollections =
|
||||
isEditMode || collectionList.length < userCollectionLimit;
|
||||
signedIn && (isEditMode || collectionList.length < userCollectionLimit);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
if (id && signedIn) {
|
||||
void dispatch(fetchCollection({ collectionId: id }));
|
||||
}
|
||||
}, [dispatch, id]);
|
||||
}, [dispatch, id, signedIn]);
|
||||
|
||||
useEffect(() => {
|
||||
if (id !== editorStateId) {
|
||||
@ -129,6 +130,8 @@ export const CollectionEditorPage: React.FC<{
|
||||
<div className='scrollable'>
|
||||
{isLoading ? (
|
||||
<LoadingIndicator />
|
||||
) : !signedIn ? (
|
||||
<NotSignedInIndicator />
|
||||
) : canCreateMoreCollections ? (
|
||||
<Switch>
|
||||
<Route
|
||||
|
||||
@ -4,15 +4,15 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
|
||||
|
||||
import { Helmet } from '@unhead/react/helmet';
|
||||
|
||||
import { TabLink, TabList } from '@/mastodon/components/tab_list';
|
||||
import { Column } from 'mastodon/components/column';
|
||||
import { ColumnHeader } from 'mastodon/components/column_header';
|
||||
import { DisplayNameSimple } from 'mastodon/components/display_name/simple';
|
||||
import { Scrollable } from 'mastodon/components/scrollable_list/components';
|
||||
import { TabLink, TabList } from 'mastodon/components/tab_list';
|
||||
import { useAccount } from 'mastodon/hooks/useAccount';
|
||||
import { useAccountId, useCurrentAccountId } from 'mastodon/hooks/useAccountId';
|
||||
|
||||
import { CollectionsCreatedByYou } from './overview/created_by_you';
|
||||
import { CollectionsCreatedByAccount } from './overview/created_by_account';
|
||||
import { CollectionsFeaturingYou } from './overview/featuring_you';
|
||||
import classes from './styles.module.scss';
|
||||
|
||||
@ -89,7 +89,7 @@ export const Collections: React.FC<{
|
||||
</TabList>
|
||||
</header>
|
||||
<Switch>
|
||||
<Route exact path={path} component={CollectionsCreatedByYou} />
|
||||
<Route exact path={path} component={CollectionsCreatedByAccount} />
|
||||
<Route
|
||||
exact
|
||||
path={`${path}/featuring-you`}
|
||||
|
||||
@ -5,10 +5,12 @@ import { FormattedMessage } from 'react-intl';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import AddIcon from '@/material-icons/400-24px/add.svg?react';
|
||||
import { DisplayName } from 'mastodon/components/display_name';
|
||||
import { EmptyState } from 'mastodon/components/empty_state';
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
|
||||
import { ItemList } from 'mastodon/components/scrollable_list/components';
|
||||
import { useAccount } from 'mastodon/hooks/useAccount';
|
||||
import { useAccountId, useCurrentAccountId } from 'mastodon/hooks/useAccountId';
|
||||
import {
|
||||
fetchCollectionsCreatedByAccount,
|
||||
@ -58,9 +60,10 @@ export function useCollectionsCreatedBy(accountId: string | null | undefined) {
|
||||
);
|
||||
}
|
||||
|
||||
export const CollectionsCreatedByYou: React.FC = () => {
|
||||
export const CollectionsCreatedByAccount: React.FC = () => {
|
||||
const me = useCurrentAccountId();
|
||||
const accountId = useAccountId();
|
||||
const account = useAccount(accountId);
|
||||
|
||||
const { collections, status } = useCollectionsCreatedBy(accountId);
|
||||
|
||||
@ -78,24 +81,40 @@ export const CollectionsCreatedByYou: React.FC = () => {
|
||||
}
|
||||
|
||||
if (collections.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='empty_column.account_featured_self.showcase_accounts'
|
||||
defaultMessage='Showcase your favorite accounts'
|
||||
/>
|
||||
}
|
||||
message={
|
||||
<FormattedMessage
|
||||
id='empty_column.account_featured_self.showcase_accounts_desc'
|
||||
defaultMessage='Collections are curated lists of accounts to help others discover more of the Fediverse.'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<CreateButton />
|
||||
</EmptyState>
|
||||
);
|
||||
if (isOwnCollectionPage) {
|
||||
return (
|
||||
<EmptyState
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='empty_column.account_featured_self.showcase_accounts'
|
||||
defaultMessage='Showcase your favorite accounts'
|
||||
/>
|
||||
}
|
||||
message={
|
||||
<FormattedMessage
|
||||
id='empty_column.account_featured_self.showcase_accounts_desc'
|
||||
defaultMessage='Collections are curated lists of accounts to help others discover more of the Fediverse.'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<CreateButton />
|
||||
</EmptyState>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<EmptyState
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='empty_column.collections'
|
||||
defaultMessage='{acct} has not created any collections yet.'
|
||||
values={{
|
||||
acct: <DisplayName variant='simple' account={account} />,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
@ -113,7 +132,7 @@ export const CollectionsCreatedByYou: React.FC = () => {
|
||||
{showCreateButton && <CreateButton />}
|
||||
</div>
|
||||
<ItemList>
|
||||
{!canCreateMoreCollections && (
|
||||
{isOwnCollectionPage && !canCreateMoreCollections && (
|
||||
<MaxCollectionsCallout className={classes.maxCollectionsError} />
|
||||
)}
|
||||
{collections.map((item, index) => (
|
||||
@ -16,7 +16,7 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
|
||||
import { CollectionListItem } from '../components/collection_list_item';
|
||||
import classes from '../styles.module.scss';
|
||||
|
||||
import { CollectionListError } from './created_by_you';
|
||||
import { CollectionListError } from './created_by_account';
|
||||
|
||||
function useCollectionsFeaturing(accountId: string | null | undefined) {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
@ -6,6 +6,8 @@ import { Link } from 'react-router-dom';
|
||||
|
||||
import { Helmet } from '@unhead/react/helmet';
|
||||
|
||||
import { NotSignedInIndicator } from '@/mastodon/components/not_signed_in_indicator';
|
||||
import { useIdentity } from '@/mastodon/identity_context';
|
||||
import AddIcon from '@/material-icons/400-24px/add.svg?react';
|
||||
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
|
||||
import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
|
||||
@ -78,10 +80,13 @@ const Lists: React.FC<{
|
||||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const lists = useAppSelector((state) => getOrderedLists(state));
|
||||
const { signedIn } = useIdentity();
|
||||
|
||||
useEffect(() => {
|
||||
void dispatch(fetchLists());
|
||||
}, [dispatch]);
|
||||
if (signedIn) {
|
||||
void dispatch(fetchLists());
|
||||
}
|
||||
}, [signedIn, dispatch]);
|
||||
|
||||
const emptyMessage = (
|
||||
<>
|
||||
@ -112,14 +117,16 @@ const Lists: React.FC<{
|
||||
iconComponent={ListAltIcon}
|
||||
multiColumn={multiColumn}
|
||||
extraButton={
|
||||
<Link
|
||||
to='/lists/new'
|
||||
className='column-header__button'
|
||||
title={intl.formatMessage(messages.create)}
|
||||
aria-label={intl.formatMessage(messages.create)}
|
||||
>
|
||||
<Icon id='plus' icon={AddIcon} />
|
||||
</Link>
|
||||
signedIn && (
|
||||
<Link
|
||||
to='/lists/new'
|
||||
className='column-header__button'
|
||||
title={intl.formatMessage(messages.create)}
|
||||
aria-label={intl.formatMessage(messages.create)}
|
||||
>
|
||||
<Icon id='plus' icon={AddIcon} />
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
@ -128,9 +135,13 @@ const Lists: React.FC<{
|
||||
emptyMessage={emptyMessage}
|
||||
bindToDocument={!multiColumn}
|
||||
>
|
||||
{lists.map((list) => (
|
||||
<ListItem key={list.id} id={list.id} title={list.title} />
|
||||
))}
|
||||
{signedIn ? (
|
||||
lists.map((list) => (
|
||||
<ListItem key={list.id} id={list.id} title={list.title} />
|
||||
))
|
||||
) : (
|
||||
<NotSignedInIndicator />
|
||||
)}
|
||||
</ScrollableList>
|
||||
|
||||
<Helmet>
|
||||
|
||||
@ -8,6 +8,8 @@ import { isFulfilled } from '@reduxjs/toolkit';
|
||||
|
||||
import { Helmet } from '@unhead/react/helmet';
|
||||
|
||||
import { NotSignedInIndicator } from '@/mastodon/components/not_signed_in_indicator';
|
||||
import { useIdentity } from '@/mastodon/identity_context';
|
||||
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
|
||||
import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
|
||||
import { fetchList } from 'mastodon/actions/lists';
|
||||
@ -250,16 +252,17 @@ const NewListWrapper: React.FC<{
|
||||
}> = ({ multiColumn }) => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
const { signedIn } = useIdentity();
|
||||
const { id } = useParams<{ id?: string }>();
|
||||
const list = useAppSelector((state) =>
|
||||
id ? state.lists.get(id) : undefined,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
if (signedIn && id) {
|
||||
dispatch(fetchList(id));
|
||||
}
|
||||
}, [dispatch, id]);
|
||||
}, [dispatch, signedIn, id]);
|
||||
|
||||
const isLoading = id && !list;
|
||||
|
||||
@ -277,7 +280,13 @@ const NewListWrapper: React.FC<{
|
||||
/>
|
||||
|
||||
<div className='scrollable'>
|
||||
{isLoading ? <LoadingIndicator /> : <NewList list={list} />}
|
||||
{!signedIn ? (
|
||||
<NotSignedInIndicator />
|
||||
) : isLoading ? (
|
||||
<LoadingIndicator />
|
||||
) : (
|
||||
<NewList list={list} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Helmet>
|
||||
|
||||
@ -646,6 +646,7 @@
|
||||
"empty_column.account_unavailable": "Profile unavailable",
|
||||
"empty_column.blocks": "You haven't blocked any users yet.",
|
||||
"empty_column.bookmarked_statuses": "You don't have any bookmarked posts yet. When you bookmark one, it will show up here.",
|
||||
"empty_column.collections": "{acct} has not created any collections yet.",
|
||||
"empty_column.collections.featured_in": "You have not been added to any collections yet.",
|
||||
"empty_column.collections.featured_in_undiscoverable": "In order for people to add you to collections, you need to allow featuring in discovery experiences from <link>Preferences > Privacy and reach</link>",
|
||||
"empty_column.community": "The local timeline is empty. Write something publicly to get the ball rolling!",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user