diff --git a/ui/component/claimMenuList/index.js b/ui/component/claimMenuList/index.js index e8dd1c512..468a37254 100644 --- a/ui/component/claimMenuList/index.js +++ b/ui/component/claimMenuList/index.js @@ -7,6 +7,7 @@ import { makeSelectCollectionIsMine, makeSelectEditedCollectionForId, makeSelectUrlsForCollectionId, + selectLastUsedCollection, } from 'redux/selectors/collections'; import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; import * as COLLECTIONS_CONSTS from 'constants/collections'; @@ -43,6 +44,7 @@ const select = (state, props) => { const shuffleList = selectListShuffle(state); const shuffle = shuffleList && shuffleList.collectionId === collectionId && shuffleList.newUrls; const playNextUri = shuffle && shuffle[0]; + const lastUsedCollection = selectLastUsedCollection(state); return { claim, @@ -70,6 +72,9 @@ const select = (state, props) => { editedCollection: makeSelectEditedCollectionForId(collectionId)(state), resolvedList: makeSelectUrlsForCollectionId(collectionId)(state), playNextUri, + lastUsedCollection, + hasClaimInLastUsedCollection: + lastUsedCollection && makeSelectCollectionForIdHasClaimUrl(lastUsedCollection.id, contentPermanentUri)(state), }; }; diff --git a/ui/component/claimMenuList/view.jsx b/ui/component/claimMenuList/view.jsx index c502875f6..8656d6efb 100644 --- a/ui/component/claimMenuList/view.jsx +++ b/ui/component/claimMenuList/view.jsx @@ -60,6 +60,8 @@ type Props = { resolvedList: boolean, fetchCollectionItems: (string) => void, doToggleShuffleList: (string) => void, + lastUsedCollection: ?Collection, + hasClaimInLastUsedCollection: boolean, }; function ClaimMenuList(props: Props) { @@ -100,6 +102,8 @@ function ClaimMenuList(props: Props) { resolvedList, fetchCollectionItems, doToggleShuffleList, + lastUsedCollection, + hasClaimInLastUsedCollection, } = props; const [doShuffle, setDoShuffle] = React.useState(false); const incognitoClaim = contentChannelUri && !contentChannelUri.includes('@'); @@ -359,6 +363,22 @@ function ClaimMenuList(props: Props) { {__('Add to Lists')} + {lastUsedCollection && ( + + handleAdd(hasClaimInLastUsedCollection, lastUsedCollection.name, lastUsedCollection.id) + } + > +
+ {!hasClaimInLastUsedCollection && } + {hasClaimInLastUsedCollection && } + {!hasClaimInLastUsedCollection && + __('Add to %collection%', { collection: lastUsedCollection.name })} + {hasClaimInLastUsedCollection && __('In %collection%', { collection: lastUsedCollection.name })} +
+
+ )}
) diff --git a/ui/redux/reducers/collections.js b/ui/redux/reducers/collections.js index 5fbbe51cc..6b8a08ab0 100644 --- a/ui/redux/reducers/collections.js +++ b/ui/redux/reducers/collections.js @@ -26,6 +26,7 @@ const defaultState: CollectionState = { }, resolved: {}, unpublished: {}, // sync + lastUsedCollection: undefined, edited: {}, pending: {}, saved: [], @@ -53,14 +54,17 @@ const collectionsReducer = handleActions( return { ...state, unpublished: newLists, + lastUsedCollection: newList, }; }, [ACTIONS.COLLECTION_DELETE]: (state, action) => { + const { lastUsedCollection } = state; const { id, collectionKey } = action.data; const { edited: editList, unpublished: unpublishedList, pending: pendingList } = state; const newEditList = Object.assign({}, editList); const newUnpublishedList = Object.assign({}, unpublishedList); + const isDeletingLastUsedCollection = lastUsedCollection && lastUsedCollection.id === id; const newPendingList = Object.assign({}, pendingList); @@ -85,6 +89,7 @@ const collectionsReducer = handleActions( edited: newEditList, unpublished: newUnpublishedList, pending: newPendingList, + lastUsedCollection: isDeletingLastUsedCollection ? undefined : lastUsedCollection, }; }, @@ -137,6 +142,7 @@ const collectionsReducer = handleActions( return { ...state, unpublished: { ...lists, [id]: collection }, + lastUsedCollection: collection, }; }, diff --git a/ui/redux/selectors/collections.js b/ui/redux/selectors/collections.js index 8f9359c35..267376d73 100644 --- a/ui/redux/selectors/collections.js +++ b/ui/redux/selectors/collections.js @@ -17,6 +17,8 @@ export const selectMyEditedCollections = createSelector(selectState, (state) => export const selectPendingCollections = createSelector(selectState, (state) => state.pending); +export const selectLastUsedCollection = createSelector(selectState, (state) => state.lastUsedCollection); + export const makeSelectEditedCollectionForId = (id: string) => createSelector(selectMyEditedCollections, (eLists) => eLists[id]);