From eb56f1b486a1925f3808af502a0ac17bae021672 Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Fri, 5 Nov 2021 16:11:26 -0400
Subject: [PATCH] carry collection active tab to playlists page

---
 ui/component/collectionsListMine/view.jsx | 33 ++++++++++++-----------
 ui/component/playlistsMine/index.js       | 11 +-------
 ui/component/playlistsMine/view.jsx       | 22 +++++++++++----
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/ui/component/collectionsListMine/view.jsx b/ui/component/collectionsListMine/view.jsx
index abad00e0b..4db77a6b5 100644
--- a/ui/component/collectionsListMine/view.jsx
+++ b/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">
-              {__(`Showing %filtered% results of %total%`, {
-                filtered: filteredLength,
-                total: totalLength,
-              })}
-              {`${searchText ? ' (' + __('filtered') + ') ' : ' '}`}
-              <Button
-                button="link"
-                navigate={`/$/${PAGES.PLAYLISTS}`}
-                label={<span className="claim-grid__title-span">{__('View All Playlists')}</span>}
-              />
-            </p>
-          )}
+          <p className="collection-grid__results-summary">
+            {isTruncated && (
+              <>
+                {__(`Showing %filtered% results of %total%`, {
+                  filtered: filteredLength,
+                  total: totalLength,
+                })}
+                {`${searchText ? ' (' + __('filtered') + ') ' : ' '}`}
+              </>
+            )}
+            <Button
+              button="link"
+              navigate={playlistPageUrl}
+              label={<span className="claim-grid__title-span">{__('View All Playlists')}</span>}
+            />
+          </p>
         </div>
         {Boolean(hasCollections) && (
           <div>
diff --git a/ui/component/playlistsMine/index.js b/ui/component/playlistsMine/index.js
index ae11320d9..e37545c3a 100644
--- a/ui/component/playlistsMine/index.js
+++ b/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),
diff --git a/ui/component/playlistsMine/view.jsx b/ui/component/playlistsMine/view.jsx
index 88cc14fcb..05de71628 100644
--- a/ui/component/playlistsMine/view.jsx
+++ b/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 (