Add last used collection to right click menu.

ui/component/claimMenuList/index.js

@@ -3,10 +3,12 @@ import { selectClaimForUri, selectClaimIsMine } from 'redux/selectors/claims';
 import { doCollectionEdit, doFetchItemsInCollection } from 'redux/actions/collections';
 import { doPrepareEdit } 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';
@@ -43,6 +45,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,
@@ -70,6 +74,14 @@ const select = (state, props) => {
  editedCollection: makeSelectEditedCollectionForId(collectionId)(state),
  resolvedList: makeSelectUrlsForCollectionId(collectionId)(state),
  playNextUri,
+ lastUsedCollection,
+ hasClaimInLastUsedCollection: makeSelectCollectionForIdHasClaimUrl(
+ lastUsedCollectionId,
+ contentPermanentUri
+ )(state),
+ lastUsedCollectionIsNotBuiltin:
+ lastUsedCollectionId !== COLLECTIONS_CONSTS.WATCH_LATER_ID &&
+ lastUsedCollectionId !== COLLECTIONS_CONSTS.FAVORITES_ID,
  };
 };
 

ui/component/claimMenuList/view.jsx

@@ -60,6 +60,9 @@ type Props = {
  resolvedList: boolean,
  fetchCollectionItems: (string) => void,
  doToggleShuffleList: (string) => void,
+ lastUsedCollection: ?Collection,
+ hasClaimInLastUsedCollection: boolean,
+ lastUsedCollectionIsNotBuiltin: boolean,
 };
 
 function ClaimMenuList(props: Props) {
@@ -100,6 +103,9 @@ function ClaimMenuList(props: Props) {
  resolvedList,
  fetchCollectionItems,
  doToggleShuffleList,
+ lastUsedCollection,
+ hasClaimInLastUsedCollection,
+ lastUsedCollectionIsNotBuiltin,
  } = props;
  const [doShuffle, setDoShuffle] = React.useState(false);
  const incognitoClaim = contentChannelUri && !contentChannelUri.includes('@');
@@ -359,6 +365,22 @@ function ClaimMenuList(props: Props) {
  {__('Add to Lists')}
  </div>
  </MenuItem>
+ {lastUsedCollection && lastUsedCollectionIsNotBuiltin && (
+ <MenuItem
+ className="comment__menu-option"
+ onSelect={() =>
+ handleAdd(hasClaimInLastUsedCollection, lastUsedCollection.name, lastUsedCollection.id)
+ }
+ >
+ <div className="menu__link">
+ {!hasClaimInLastUsedCollection && <Icon aria-hidden icon={ICONS.ADD} />}
+ {hasClaimInLastUsedCollection && <Icon aria-hidden icon={ICONS.DELETE} />}
+ {!hasClaimInLastUsedCollection &&
+ __('Add to %collection%', { collection: lastUsedCollection.name })}
+ {hasClaimInLastUsedCollection && __('In %collection%', { collection: lastUsedCollection.name })}
+ </div>
+ </MenuItem>
+ )}
  <hr className="menu__separator" />
  </>
  )

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,
  };
  },
 

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