[C-991] Add native edit/delete playlists

packages/mobile/src/components/delete-playlist-confirmation-drawer/DeletePlaylistConfirmationDrawer.tsx

@@ -4,25 +4,24 @@ import {
   cacheCollectionsActions,
   deletePlaylistConfirmationModalUISelectors
 } from '@audius/common'
+import { useDispatch, useSelector } from 'react-redux'
 
 import ActionDrawer from 'app/components/action-drawer'
-import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
 import { useNavigation } from 'app/hooks/useNavigation'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 const { getPlaylistId } = deletePlaylistConfirmationModalUISelectors
 const { deletePlaylist } = cacheCollectionsActions
 
 export const DeletePlaylistConfirmationDrawer = () => {
-  const playlistId = useSelectorWeb(getPlaylistId)
-  const dispatchWeb = useDispatchWeb()
+  const playlistId = useSelector(getPlaylistId)
+  const dispatch = useDispatch()
   const navigation = useNavigation()
 
   const handleDelete = useCallback(() => {
     if (playlistId) {
-      dispatchWeb(deletePlaylist(playlistId))
+      dispatch(deletePlaylist(playlistId))
       navigation.goBack()
     }
-  }, [dispatchWeb, playlistId, navigation])
+  }, [dispatch, playlistId, navigation])
 
   const rows = useMemo(
     () => [

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistScreen.tsx

@@ -11,12 +11,12 @@ import type { FormikProps } from 'formik'
 import { Formik } from 'formik'
 import { isEqual } from 'lodash'
 import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { FormScreen } from 'app/components/form-screen'
 import { TrackList } from 'app/components/track-list'
 import { useCollectionCoverArt } from 'app/hooks/useCollectionCoverArt'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 
 import { PlaylistDescriptionInput } from './PlaylistDescriptionInput'
@@ -105,9 +105,9 @@ const EditPlaylistForm = (props: FormikProps<PlaylistValues>) => {
 }
 
 export const EditPlaylistScreen = () => {
-  const playlist = useSelectorWeb(getMetadata)
-  const dispatchWeb = useDispatchWeb()
-  const tracks = useSelectorWeb(getTracks)
+  const playlist = useSelector(getMetadata)
+  const dispatch = useDispatch()
+  const tracks = useSelector(getTracks)
 
   const coverArt = useCollectionCoverArt({
     id: playlist?.playlist_id,
@@ -119,25 +119,25 @@ export const EditPlaylistScreen = () => {
     (values: PlaylistValues) => {
       if (playlist) {
         values.removedTracks.forEach(({ trackId, timestamp }) => {
-          dispatchWeb(
+          dispatch(
             removeTrackFromPlaylist(trackId, playlist.playlist_id, timestamp)
           )
         })
         if (!isEqual(playlist?.playlist_contents.track_ids, values.track_ids)) {
-          dispatchWeb(
+          dispatch(
             orderPlaylist(
               playlist?.playlist_id,
               values.track_ids.map(({ track, time }) => ({ id: track, time }))
             )
           )
         }
-        dispatchWeb(
+        dispatch(
           editPlaylist(playlist.playlist_id, values as unknown as Collection)
         )
-        dispatchWeb(tracksActions.fetchLineupMetadatas())
+        dispatch(tracksActions.fetchLineupMetadatas())
       }
     },
-    [dispatchWeb, playlist]
+    [dispatch, playlist]
   )
 
   if (!playlist) return null

packages/mobile/src/store/sagas.ts

@@ -1,6 +1,7 @@
 import {
   castSagas,
   remoteConfigSagas as remoteConfig,
+  deletePlaylistConfirmationModalUISagas as deletePlaylistConfirmationModalSagas,
   mobileOverflowMenuUISagas as overflowMenuSagas,
   shareModalUISagas as shareModalSagas,
   vipDiscordModalSagas
@@ -129,6 +130,7 @@ export default function* rootSaga() {
     ...smartCollectionPageSagas(),
     ...overflowMenuSagas(),
     ...deactivateAccountSagas(),
+    ...deletePlaylistConfirmationModalSagas(),
     ...shareModalSagas(),
     ...vipDiscordModalSagas(),
     ...themeSagas(),