diff --git a/app/javascript/flavours/glitch/features/collections/detail/index.tsx b/app/javascript/flavours/glitch/features/collections/detail/index.tsx index 36a25f747d..ee4a8a1878 100644 --- a/app/javascript/flavours/glitch/features/collections/detail/index.tsx +++ b/app/javascript/flavours/glitch/features/collections/detail/index.tsx @@ -116,7 +116,7 @@ const RevokeControls: React.FC<{ ); }; -const PendingNote: React.FC = () => { +export const PendingNote: React.FC = () => { return ( void; -}> = ({ accountId, onRemove }) => { +}> = ({ accountId, pending, onRemove }) => { const handleRemoveAccount = useCallback(() => { onRemove(accountId); }, [accountId, onRemove]); @@ -65,7 +69,13 @@ const AddedAccountItem: React.FC<{ [handleRemoveAccount], ); - return ; + return ( + } + renderButton={renderButton} + /> + ); }; const SuggestedAccountItem: React.FC<{ id: string }> = ({ id }) => { @@ -186,22 +196,26 @@ export const CollectionAccounts: React.FC<{ const { id, items: collectionItems } = collection ?? {}; const isEditMode = !!id; - const addedAccountIds = useAppSelector( - (state) => state.collections.editor.accountIds, + const editorItemsFromState = useAppSelector( + (state) => state.collections.editor.items, ); - // In edit mode, we're bypassing state and just return collection items directly, - // since they're edited "live", saving after each addition/deletion - const accountIds = useMemo( + // In edit mode, we're bypassing our Redux state and just work on the + // collection items directly since they're edited "live", saving right + // after each addition/deletion + const editorItems = useMemo( () => - isEditMode ? getCollectionItemIds(collectionItems) : addedAccountIds, - [isEditMode, collectionItems, addedAccountIds], + isEditMode + ? getEditorCollectionItems(collectionItems) + : editorItemsFromState, + [isEditMode, collectionItems, editorItemsFromState], ); + const hasPendingItems = editorItems.some((item) => item.state === 'pending'); const [searchValue, setSearchValue] = useState(''); - const hasAccounts = accountIds.length > 0; - const hasMaxAccounts = accountIds.length === MAX_ACCOUNT_COUNT; + const hasItems = editorItems.length > 0; + const hasMaxItems = editorItems.length === MAX_ACCOUNT_COUNT; const { accounts: suggestedAccounts, @@ -211,7 +225,8 @@ export const CollectionAccounts: React.FC<{ } = useSearchAccounts({ withRelationships: true, // Don't suggest accounts that were already added - filterResults: (account) => !accountIds.includes(account.id), + filterResults: (account) => + !editorItems.find((item) => item.account_id === account.id), }); const relationships = useAppSelector((state) => state.relationships); @@ -239,24 +254,33 @@ export const CollectionAccounts: React.FC<{ (accountId: string) => { dispatch( updateCollectionEditorField({ - field: 'accountIds', - value: accountIds.filter((id) => id !== accountId), + field: 'items', + value: editorItems.filter((item) => item.account_id !== accountId), }), ); }, - [accountIds, dispatch], + [editorItems, dispatch], ); const addAccountItem = useCallback( (item: ApiMutedAccountJSON) => { dispatch( updateCollectionEditorField({ - field: 'accountIds', - value: [...accountIds, item.id], + field: 'items', + value: [ + ...editorItems, + { + account_id: item.id, + state: + item.feature_approval.current_user === 'manual' + ? 'pending' + : 'accepted', + }, + ], }), ); }, - [accountIds, dispatch], + [editorItems, dispatch], ); const instantRemoveAccountItem = useCallback( @@ -322,12 +346,10 @@ export const CollectionAccounts: React.FC<{ e.preventDefault(); if (!id) { - history.push(`/collections/new/details`, { - account_ids: accountIds, - }); + history.push('/collections/new/details'); } }, - [id, history, accountIds], + [id, history], ); const inputId = useId(); @@ -348,16 +370,17 @@ export const CollectionAccounts: React.FC<{ } /> )} + {hasPendingItems && }
- {hasAccounts && ( + {hasItems && ( )} @@ -413,14 +436,15 @@ export const CollectionAccounts: React.FC<{ /> } > - {accountIds.map((accountId, index) => ( + {editorItems.map(({ account_id, state }, index) => (
@@ -429,7 +453,7 @@ export const CollectionAccounts: React.FC<{
- {!isEditMode && hasAccounts && ( + {!isEditMode && hasItems && (