diff --git a/app/javascript/flavours/glitch/features/account_featured/index.tsx b/app/javascript/flavours/glitch/features/account_featured/index.tsx index 3a5d2a006e..a79afc14f2 100644 --- a/app/javascript/flavours/glitch/features/account_featured/index.tsx +++ b/app/javascript/flavours/glitch/features/account_featured/index.tsx @@ -29,7 +29,7 @@ import { useAppDispatch, useAppSelector } from '@/flavours/glitch/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'; diff --git a/app/javascript/flavours/glitch/features/collection_adder/index.tsx b/app/javascript/flavours/glitch/features/collection_adder/index.tsx index 7f65cef8c7..f1852180e8 100644 --- a/app/javascript/flavours/glitch/features/collection_adder/index.tsx +++ b/app/javascript/flavours/glitch/features/collection_adder/index.tsx @@ -15,7 +15,7 @@ import { IconButton } from 'flavours/glitch/components/icon_button'; import { useAppDispatch, useAppSelector } from 'flavours/glitch/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'; diff --git a/app/javascript/flavours/glitch/features/collections/editor/index.tsx b/app/javascript/flavours/glitch/features/collections/editor/index.tsx index ed7cba63b7..5dd4e12893 100644 --- a/app/javascript/flavours/glitch/features/collections/editor/index.tsx +++ b/app/javascript/flavours/glitch/features/collections/editor/index.tsx @@ -13,20 +13,21 @@ import { import { Helmet } from '@unhead/react/helmet'; -import { Callout } from '@/flavours/glitch/components/callout'; -import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId'; -import { initialState } from '@/flavours/glitch/initial_state'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; +import { Callout } from 'flavours/glitch/components/callout'; import { Column } from 'flavours/glitch/components/column'; import { ColumnHeader } from 'flavours/glitch/components/column_header'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; +import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator'; +import { useIdentity } from 'flavours/glitch/identity_context'; +import { initialState } from 'flavours/glitch/initial_state'; import { collectionEditorActions, fetchCollection, } from 'flavours/glitch/reducers/slices/collections'; import { useAppDispatch, useAppSelector } from 'flavours/glitch/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<{
{isLoading ? ( + ) : !signedIn ? ( + ) : canCreateMoreCollections ? ( - + { +export const CollectionsCreatedByAccount: React.FC = () => { const me = useCurrentAccountId(); const accountId = useAccountId(); + const account = useAccount(accountId); const { collections, status } = useCollectionsCreatedBy(accountId); @@ -81,24 +84,40 @@ export const CollectionsCreatedByYou: React.FC = () => { } if (collections.length === 0) { - return ( - - } - message={ - - } - > - - - ); + if (isOwnCollectionPage) { + return ( + + } + message={ + + } + > + + + ); + } else { + return ( + , + }} + /> + } + /> + ); + } } return ( @@ -116,7 +135,7 @@ export const CollectionsCreatedByYou: React.FC = () => { {showCreateButton && }
- {!canCreateMoreCollections && ( + {isOwnCollectionPage && !canCreateMoreCollections && ( )} {collections.map((item, index) => ( diff --git a/app/javascript/flavours/glitch/features/collections/overview/featuring_you.tsx b/app/javascript/flavours/glitch/features/collections/overview/featuring_you.tsx index 718c820bdc..2dc197781a 100644 --- a/app/javascript/flavours/glitch/features/collections/overview/featuring_you.tsx +++ b/app/javascript/flavours/glitch/features/collections/overview/featuring_you.tsx @@ -16,7 +16,7 @@ import { useAppSelector, useAppDispatch } from 'flavours/glitch/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(); diff --git a/app/javascript/flavours/glitch/features/lists/index.tsx b/app/javascript/flavours/glitch/features/lists/index.tsx index 197e3cab9b..afb5896da7 100644 --- a/app/javascript/flavours/glitch/features/lists/index.tsx +++ b/app/javascript/flavours/glitch/features/lists/index.tsx @@ -6,6 +6,8 @@ import { Link } from 'react-router-dom'; import { Helmet } from '@unhead/react/helmet'; +import { NotSignedInIndicator } from '@/flavours/glitch/components/not_signed_in_indicator'; +import { useIdentity } from '@/flavours/glitch/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={ - - - + signedIn && ( + + + + ) } /> @@ -128,9 +135,13 @@ const Lists: React.FC<{ emptyMessage={emptyMessage} bindToDocument={!multiColumn} > - {lists.map((list) => ( - - ))} + {signedIn ? ( + lists.map((list) => ( + + )) + ) : ( + + )} diff --git a/app/javascript/flavours/glitch/features/lists/new.tsx b/app/javascript/flavours/glitch/features/lists/new.tsx index 4026e16ff9..a4f8c77048 100644 --- a/app/javascript/flavours/glitch/features/lists/new.tsx +++ b/app/javascript/flavours/glitch/features/lists/new.tsx @@ -8,6 +8,8 @@ import { isFulfilled } from '@reduxjs/toolkit'; import { Helmet } from '@unhead/react/helmet'; +import { NotSignedInIndicator } from '@/flavours/glitch/components/not_signed_in_indicator'; +import { useIdentity } from '@/flavours/glitch/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 'flavours/glitch/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<{ />
- {isLoading ? : } + {!signedIn ? ( + + ) : isLoading ? ( + + ) : ( + + )}