Add last used collection to right click menu.

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

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')}
                   </div>
                 </MenuItem>
+                {lastUsedCollection && (
+                  <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: 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,
       };
     },
 

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