From b188b84080f38f3c360d6e3ac27582eee7597537 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 16 May 2024 14:44:39 -0700
Subject: [PATCH] [QA-1295] Fix mobile-web edit playlist page

---
 .../edit-playlist/mobile/EditPlaylistPage.tsx | 24 ++++++++-----------
 packages/web/src/pages/modals/Modals.tsx      | 22 +++++++----------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx b/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx
index 48f4ae3b636..22a69e5af4f 100644
--- a/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx
+++ b/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx
@@ -78,6 +78,7 @@ const EditPlaylistPage = g(
 
     // Close the page if the route was changed
     useHasChangedRoute(onClose)
+
     const initialMetadata = {
       ...(metadata as Collection),
       artwork: { url: '' }
@@ -88,7 +89,7 @@ const EditPlaylistPage = g(
     )
 
     const [showRemoveTrackDrawer, setShowRemoveTrackDrawer] = useState(false)
-    const onDrawerClose = () => setShowRemoveTrackDrawer(false)
+    const onDrawerClose = useCallback(() => setShowRemoveTrackDrawer(false), [])
 
     // Holds all tracks to be removed on save
     const [removedTracks, setRemovedTracks] = useState<
@@ -228,16 +229,7 @@ const EditPlaylistPage = g(
         }
         refreshLineup()
 
-        const editPlaylistData: any = {
-          playlist_name: formFields.playlist_name,
-          description: formFields.description,
-          artwork: formFields.artwork,
-          tracks: formFields.tracks as any,
-          track_ids: formFields.playlist_contents.track_ids,
-          removedTracks: []
-        }
-
-        editPlaylist(metadata.playlist_id, editPlaylistData)
+        editPlaylist(metadata.playlist_id, formFields)
 
         track({
           eventName: Name.COLLECTION_EDIT,
@@ -315,12 +307,16 @@ const EditPlaylistPage = g(
         tracks.filter((trackIndex) => trackIndex !== removeIdx)
       )
       onDrawerClose()
-    }, [metadata, confirmRemoveTrack, setRemovedTracks, setReorderedTracks])
+    }, [
+      confirmRemoveTrack,
+      metadata?.playlist_contents.track_ids,
+      onDrawerClose
+    ])
 
     const setters = useCallback(
       () => ({
         left: (
-          <TextElement text='Cancel' type={Type.SECONDARY} onClick={close} />
+          <TextElement text='Cancel' type={Type.SECONDARY} onClick={onClose} />
         ),
         center: messages.editPlaylist,
         right: (
@@ -332,7 +328,7 @@ const EditPlaylistPage = g(
           />
         )
       }),
-      [formFields.playlist_name, messages.editPlaylist, onSave]
+      [formFields.playlist_name, messages.editPlaylist, onClose, onSave]
     )
 
     useTemporaryNavContext(setters)
diff --git a/packages/web/src/pages/modals/Modals.tsx b/packages/web/src/pages/modals/Modals.tsx
index 66a3e222a31..5efa625bcc1 100644
--- a/packages/web/src/pages/modals/Modals.tsx
+++ b/packages/web/src/pages/modals/Modals.tsx
@@ -129,16 +129,20 @@ const Modals = () => {
 
   return (
     <>
-      {commonModals.map(([modalName, Modal]) => {
-        return <AppModal key={modalName} name={modalName} modal={Modal} />
-      })}
       <PasswordResetModal />
       <FirstUploadModal />
       <UnloadDialog />
       <CollectibleDetailsModal />
-
-      {!isMobile && (
+      {isMobile ? (
+        <>
+          <ConnectedMobileOverflowModal />
+          <UnfollowConfirmationModal />
+        </>
+      ) : (
         <>
+          {commonModals.map(([modalName, Modal]) => {
+            return <AppModal key={modalName} name={modalName} modal={Modal} />
+          })}
           <EmbedModal />
           <ConnectedUserListModal />
           <AppCTAModal />
@@ -148,14 +152,6 @@ const Modals = () => {
           <FeatureFlagOverrideModal />
         </>
       )}
-
-      {isMobile && (
-        <>
-          <ConnectedMobileOverflowModal />
-          <UnfollowConfirmationModal />
-        </>
-      )}
-
       <TipAudioModal />
     </>
   )