[Glitch] Prevent logged out users from accessing collection & list creation routes

Port e00d16474e51111f0a89c81ae976d08a2082d6ec to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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';

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';
 

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<{
       <div className='scrollable'>
         {isLoading ? (
           <LoadingIndicator />
+        ) : !signedIn ? (
+          <NotSignedInIndicator />
         ) : canCreateMoreCollections ? (
           <Switch>
             <Route

app/javascript/flavours/glitch/features/collections/index.tsx

@@ -4,18 +4,18 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
 
 import { Helmet } from '@unhead/react/helmet';
 
-import { TabLink, TabList } from '@/flavours/glitch/components/tab_list';
 import { Column } from 'flavours/glitch/components/column';
 import { ColumnHeader } from 'flavours/glitch/components/column_header';
 import { DisplayNameSimple } from 'flavours/glitch/components/display_name/simple';
 import { Scrollable } from 'flavours/glitch/components/scrollable_list/components';
+import { TabLink, TabList } from 'flavours/glitch/components/tab_list';
 import { useAccount } from 'flavours/glitch/hooks/useAccount';
 import {
   useAccountId,
   useCurrentAccountId,
 } from 'flavours/glitch/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';
 
@@ -92,7 +92,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`}

app/javascript/flavours/glitch/features/collections/overview/created_by_account.tsx

@@ -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 'flavours/glitch/components/display_name';
 import { EmptyState } from 'flavours/glitch/components/empty_state';
 import { Icon } from 'flavours/glitch/components/icon';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import { ItemList } from 'flavours/glitch/components/scrollable_list/components';
+import { useAccount } from 'flavours/glitch/hooks/useAccount';
 import {
   useAccountId,
   useCurrentAccountId,
@@ -61,9 +63,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);
 
@@ -81,24 +84,40 @@ export const CollectionsCreatedByYou: React.FC = () => {
   }
 
   if (collections.length === 0) {
-    return (
+    if (isOwnCollectionPage) {
-      <EmptyState
+      return (
-        title={
+        <EmptyState
-          <FormattedMessage
+          title={
-            id='empty_column.account_featured_self.showcase_accounts'
+            <FormattedMessage
-            defaultMessage='Showcase your favorite accounts'
+              id='empty_column.account_featured_self.showcase_accounts'
-          />
+              defaultMessage='Showcase your favorite accounts'
-        }
+            />
-        message={
+          }
-          <FormattedMessage
+          message={
-            id='empty_column.account_featured_self.showcase_accounts_desc'
+            <FormattedMessage
-            defaultMessage='Collections are curated lists of accounts to help others discover more of the Fediverse.'
+              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>
+          <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 (
@@ -116,7 +135,7 @@ export const CollectionsCreatedByYou: React.FC = () => {
         {showCreateButton && <CreateButton />}
       </div>
       <ItemList>
-        {!canCreateMoreCollections && (
+        {isOwnCollectionPage && !canCreateMoreCollections && (
           <MaxCollectionsCallout className={classes.maxCollectionsError} />
         )}
         {collections.map((item, index) => (

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();

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());
+    if (signedIn) {
-  }, [dispatch]);
+      void dispatch(fetchLists());
+    }
+  }, [signedIn, dispatch]);
 
   const emptyMessage = (
     <>
@@ -112,14 +117,16 @@ const Lists: React.FC<{
         iconComponent={ListAltIcon}
         multiColumn={multiColumn}
         extraButton={
-          <Link
+          signedIn && (
-            to='/lists/new'
+            <Link
-            className='column-header__button'
+              to='/lists/new'
-            title={intl.formatMessage(messages.create)}
+              className='column-header__button'
-            aria-label={intl.formatMessage(messages.create)}
+              title={intl.formatMessage(messages.create)}
-          >
+              aria-label={intl.formatMessage(messages.create)}
-            <Icon id='plus' icon={AddIcon} />
+            >
-          </Link>
+              <Icon id='plus' icon={AddIcon} />
+            </Link>
+          )
         }
       />
 
@@ -128,9 +135,13 @@ const Lists: React.FC<{
         emptyMessage={emptyMessage}
         bindToDocument={!multiColumn}
       >
-        {lists.map((list) => (
+        {signedIn ? (
-          <ListItem key={list.id} id={list.id} title={list.title} />
+          lists.map((list) => (
-        ))}
+            <ListItem key={list.id} id={list.id} title={list.title} />
+          ))
+        ) : (
+          <NotSignedInIndicator />
+        )}
       </ScrollableList>
 
       <Helmet>

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<{
       />
 
       <div className='scrollable'>
-        {isLoading ? <LoadingIndicator /> : <NewList list={list} />}
+        {!signedIn ? (
+          <NotSignedInIndicator />
+        ) : isLoading ? (
+          <LoadingIndicator />
+        ) : (
+          <NewList list={list} />
+        )}
       </div>
 
       <Helmet>