6205 remember last used playlist choice odysee (#967)

* Add last used collection to right click menu.

* Small fix for last used collection when it's a published collection.

* Update last used collection when a collection is pending or published.

* Small refactor to get the last used collection.

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

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')}
                   </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

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