diff --git a/ui/component/claimMenuList/index.js b/ui/component/claimMenuList/index.js index c8e10a2e3..6b9b5e40e 100644 --- a/ui/component/claimMenuList/index.js +++ b/ui/component/claimMenuList/index.js @@ -3,10 +3,12 @@ import { selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims'; import { doCollectionEdit, doFetchItemsInCollection } from 'redux/actions/collections'; import { doEditForChannel } from 'redux/actions/publish'; import { + makeSelectCollectionForId, makeSelectCollectionForIdHasClaimUrl, makeSelectCollectionIsMine, makeSelectEditedCollectionForId, makeSelectUrlsForCollectionId, + selectLastUsedCollection, } from 'redux/selectors/collections'; import { makeSelectFileInfoForUri } from 'redux/selectors/file_info'; import * as COLLECTIONS_CONSTS from 'constants/collections'; @@ -44,6 +46,8 @@ const select = (state, props) => { const shuffleList = selectListShuffle(state); const shuffle = shuffleList && shuffleList.collectionId === collectionId && shuffleList.newUrls; const playNextUri = shuffle && shuffle[0]; + const lastUsedCollectionId = selectLastUsedCollection(state); + const lastUsedCollection = makeSelectCollectionForId(lastUsedCollectionId)(state); return { claim, @@ -72,6 +76,14 @@ const select = (state, props) => { isAuthenticated: Boolean(selectUserVerifiedEmail(state)), resolvedList: makeSelectUrlsForCollectionId(collectionId)(state), playNextUri, + lastUsedCollection, + hasClaimInLastUsedCollection: makeSelectCollectionForIdHasClaimUrl( + lastUsedCollectionId, + contentPermanentUri + )(state), + lastUsedCollectionIsNotBuiltin: + lastUsedCollectionId !== COLLECTIONS_CONSTS.WATCH_LATER_ID && + lastUsedCollectionId !== COLLECTIONS_CONSTS.FAVORITES_ID, }; }; diff --git a/ui/component/claimMenuList/view.jsx b/ui/component/claimMenuList/view.jsx index 380cdc0df..29f21ebc0 100644 --- a/ui/component/claimMenuList/view.jsx +++ b/ui/component/claimMenuList/view.jsx @@ -67,6 +67,9 @@ type Props = { resolvedList: boolean, fetchCollectionItems: (string) => void, doToggleShuffleList: (string) => void, + lastUsedCollection: ?Collection, + hasClaimInLastUsedCollection: boolean, + lastUsedCollectionIsNotBuiltin: boolean, }; function ClaimMenuList(props: Props) { @@ -108,6 +111,9 @@ function ClaimMenuList(props: Props) { resolvedList, fetchCollectionItems, doToggleShuffleList, + lastUsedCollection, + hasClaimInLastUsedCollection, + lastUsedCollectionIsNotBuiltin, } = props; const [doShuffle, setDoShuffle] = React.useState(false); const incognitoClaim = contentChannelUri && !contentChannelUri.includes('@'); @@ -355,6 +361,22 @@ function ClaimMenuList(props: Props) { {__('Add to Lists')} + {lastUsedCollection && lastUsedCollectionIsNotBuiltin && ( + + 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 7747169a0..6f1d09457 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: params.id, }; }, [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 === id; const newPendingList = Object.assign({}, pendingList); @@ -70,6 +74,7 @@ const collectionsReducer = handleActions( return { ...state, [collectionKey]: newList, + lastUsedCollection: isDeletingLastUsedCollection ? undefined : lastUsedCollection, }; } else { if (newEditList[id]) { @@ -85,6 +90,7 @@ const collectionsReducer = handleActions( edited: newEditList, unpublished: newUnpublishedList, pending: newPendingList, + lastUsedCollection: isDeletingLastUsedCollection ? undefined : lastUsedCollection, }; }, @@ -112,6 +118,7 @@ const collectionsReducer = handleActions( edited: newEditList, unpublished: newUnpublishedList, pending: newPendingList, + lastUsedCollection: claimId, }; }, @@ -123,6 +130,7 @@ const collectionsReducer = handleActions( return { ...state, [collectionKey]: { ...lists, [id]: collection }, + lastUsedCollection: id, }; } @@ -131,12 +139,14 @@ const collectionsReducer = handleActions( return { ...state, edited: { ...lists, [id]: collection }, + lastUsedCollection: id, }; } const { unpublished: lists } = state; return { ...state, unpublished: { ...lists, [id]: collection }, + lastUsedCollection: id, }; }, diff --git a/ui/redux/selectors/collections.js b/ui/redux/selectors/collections.js index d35f41ded..1c6d5306f 100644 --- a/ui/redux/selectors/collections.js +++ b/ui/redux/selectors/collections.js @@ -15,6 +15,8 @@ export const selectMyUnpublishedCollections = (state: State) => selectState(stat export const selectMyEditedCollections = (state: State) => selectState(state).edited; export const selectPendingCollections = (state: State) => selectState(state).pending; +export const selectLastUsedCollection = createSelector(selectState, (state) => state.lastUsedCollection); + export const makeSelectEditedCollectionForId = (id: string) => createSelector(selectMyEditedCollections, (eLists) => eLists[id]);