carry collection active tab to playlists page

ui/component/collectionsListMine/view.jsx

@@ -43,6 +43,7 @@ export default function CollectionsListMine(props: Props) {
   const [filterType, setFilterType] = React.useState(ALL);
   const [searchText, setSearchText] = React.useState('');
 
+  const playlistPageUrl = `/$/${PAGES.PLAYLISTS}?type=${filterType}`;
   let collectionsToShow = [];
   if (filterType === ALL) {
     collectionsToShow = unpublishedCollectionsList.concat(publishedList);
@@ -140,7 +141,7 @@ export default function CollectionsListMine(props: Props) {
             <Button
               className="claim-grid__title"
               button="link"
-              navigate={`/$/${PAGES.PLAYLISTS}`}
+              navigate={playlistPageUrl}
               label={
                 <span className="claim-grid__title-span">
                   {__('Playlists')}
@@ -188,20 +189,22 @@ export default function CollectionsListMine(props: Props) {
               />
             </Form>
           </div>
-          {isTruncated && (
           <p className="collection-grid__results-summary">
+            {isTruncated && (
+              <>
                 {__(`Showing %filtered% results of %total%`, {
                   filtered: filteredLength,
                   total: totalLength,
                 })}
                 {`${searchText ? ' (' + __('filtered') + ') ' : ' '}`}
+              </>
+            )}
             <Button
               button="link"
-                navigate={`/$/${PAGES.PLAYLISTS}`}
+              navigate={playlistPageUrl}
               label={<span className="claim-grid__title-span">{__('View All Playlists')}</span>}
             />
           </p>
-          )}
         </div>
         {Boolean(hasCollections) && (
           <div>

ui/component/playlistsMine/index.js

@@ -7,18 +7,9 @@ import {
 } from 'redux/selectors/collections';
 import { selectFetchingMyCollections } from 'redux/selectors/claims';
 import PlaylistsMine from './view';
-import { PAGE_PARAM, PAGE_SIZE_PARAM } from 'constants/claim';
-const COLLECTIONS_PAGE_SIZE = 12;
-
-const select = (state, props) => {
-  const { search } = props.location;
-  const urlParams = new URLSearchParams(search);
-  const page = Number(urlParams.get(PAGE_PARAM)) || '1';
-  const pageSize = Number(urlParams.get(PAGE_SIZE_PARAM)) || COLLECTIONS_PAGE_SIZE;
 
+const select = (state) => {
   return {
-    page,
-    pageSize,
     publishedCollections: selectMyPublishedPlaylistCollections(state),
     unpublishedCollections: selectMyUnpublishedCollections(state),
     // savedCollections: selectSavedCollections(state),

ui/component/playlistsMine/view.jsx

@@ -10,7 +10,6 @@ import Paginate from 'component/common/paginate';
 import Yrbl from 'component/yrbl';
 import classnames from 'classnames';
 import { FormField, Form } from 'component/common/form';
-import { PAGE_PARAM } from 'constants/claim';
 
 type Props = {
   publishedCollections: CollectionGroup,
@@ -20,12 +19,15 @@ type Props = {
   page: number,
   pageSize: number,
   history: { replace: (string) => void },
+  location: { search: string },
 };
 
 const ALL = 'All';
 const PRIVATE = 'Private';
 const PUBLIC = 'Public';
 const COLLECTION_FILTERS = [ALL, PRIVATE, PUBLIC];
+const FILTER_TYPE_PARAM = 'type';
+const PAGE_PARAM = 'page';
 
 export default function PlaylistsMine(props: Props) {
   const {
@@ -33,15 +35,20 @@ export default function PlaylistsMine(props: Props) {
     unpublishedCollections,
     // savedCollections, these are resolved on startup from sync'd claimIds or urls
     fetchingCollections,
-    page = 0,
-    pageSize,
     history,
+    location,
   } = props;
 
+  const { search } = location;
+  const urlParams = new URLSearchParams(search);
+  const page = Number(urlParams.get(PAGE_PARAM)) || 1;
+  const type = urlParams.get(FILTER_TYPE_PARAM) || ALL;
+  const pageSize = 12;
+
   const unpublishedCollectionsList = (Object.keys(unpublishedCollections || {}): any);
   const publishedList = (Object.keys(publishedCollections || {}): any);
   const hasCollections = unpublishedCollectionsList.length || publishedList.length;
-  const [filterType, setFilterType] = React.useState(ALL);
+  const [filterType, setFilterType] = React.useState(type);
   const [searchText, setSearchText] = React.useState('');
 
   let collectionsToShow = [];
@@ -88,8 +95,13 @@ export default function PlaylistsMine(props: Props) {
   }
 
   function handleFilterType(val) {
+    const newParams = new URLSearchParams();
+    if (val) {
+      newParams.set(FILTER_TYPE_PARAM, val);
+    }
+    newParams.set(PAGE_PARAM, '1');
+    history.replace(`?${newParams.toString()}`);
     setFilterType(val);
-    history.replace(`?${PAGE_PARAM}=1`);
   }
 
   return (