diff --git a/packages/common/src/store/ui/modals/edit-playlist-modal/index.ts b/packages/common/src/store/ui/modals/edit-playlist-modal/index.ts new file mode 100644 index 00000000000..89ea9473e2b --- /dev/null +++ b/packages/common/src/store/ui/modals/edit-playlist-modal/index.ts @@ -0,0 +1,29 @@ +import { ID } from 'models/Identifiers' +import { Nullable } from 'utils/typeUtils' + +import { createModal } from '../createModal' + +export type FocusableFields = 'name' | 'description' | 'artwork' + +export type EditPlaylistModalState = { + collectionId: Nullable + initialFocusedField?: Nullable + isCollectionViewed?: boolean +} + +const editPlaylistModal = createModal({ + reducerPath: 'EditPlaylist', + initialState: { + isOpen: false, + collectionId: null, + initialFocusedField: null, + isCollectionViewed: false + }, + sliceSelector: (state) => state.ui.modals +}) + +export const { + hook: useEditPlaylistModal, + actions: editPlaylistModalActions, + reducer: editPlaylistModalReducer +} = editPlaylistModal diff --git a/packages/common/src/store/ui/modals/index.ts b/packages/common/src/store/ui/modals/index.ts index 256770fdc6b..364210e3b09 100644 --- a/packages/common/src/store/ui/modals/index.ts +++ b/packages/common/src/store/ui/modals/index.ts @@ -8,3 +8,4 @@ export * from './leaving-audius-modal' export * from './inbox-unavailable-modal' export * from './usdc-purchase-details-modal' export * from './withdraw-usdc-modal' +export * from './edit-playlist-modal' diff --git a/packages/common/src/store/ui/modals/parentSlice.ts b/packages/common/src/store/ui/modals/parentSlice.ts index a4940e96f33..f14fe99dba5 100644 --- a/packages/common/src/store/ui/modals/parentSlice.ts +++ b/packages/common/src/store/ui/modals/parentSlice.ts @@ -22,6 +22,7 @@ export const initialState: BasicModalsState = { TrendingGenreSelection: { isOpen: false }, SocialProof: { isOpen: false }, EditFolder: { isOpen: false }, + EditPlaylist: { isOpen: false }, SignOutConfirmation: { isOpen: false }, Overflow: { isOpen: false }, AddToPlaylist: { isOpen: false }, diff --git a/packages/common/src/store/ui/modals/reducers.ts b/packages/common/src/store/ui/modals/reducers.ts index a0cf2571c13..6a32b451179 100644 --- a/packages/common/src/store/ui/modals/reducers.ts +++ b/packages/common/src/store/ui/modals/reducers.ts @@ -2,6 +2,7 @@ import { Action, combineReducers, Reducer } from '@reduxjs/toolkit' import { createChatModalReducer } from './create-chat-modal' import { BaseModalState } from './createModal' +import { editPlaylistModalReducer } from './edit-playlist-modal' import { inboxUnavailableModalReducer } from './inbox-unavailable-modal' import { leavingAudiusModalReducer } from './leaving-audius-modal' import parentReducer, { initialState } from './parentSlice' @@ -24,6 +25,7 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => { */ const combinedReducers = combineReducers({ ...noOpReducers, + EditPlaylist: editPlaylistModalReducer, CreateChatModal: createChatModalReducer, InboxUnavailableModal: inboxUnavailableModalReducer, LeavingAudiusModal: leavingAudiusModalReducer, diff --git a/packages/common/src/store/ui/modals/types.ts b/packages/common/src/store/ui/modals/types.ts index 27c8e8b0539..361c8793257 100644 --- a/packages/common/src/store/ui/modals/types.ts +++ b/packages/common/src/store/ui/modals/types.ts @@ -1,5 +1,6 @@ import { CreateChatModalState } from './create-chat-modal' import { BaseModalState } from './createModal' +import { EditPlaylistModalState } from './edit-playlist-modal' import { InboxUnavailableModalState } from './inbox-unavailable-modal' import { LeavingAudiusModalState } from './leaving-audius-modal' import { USDCPurchaseDetailsModalState } from './usdc-purchase-details-modal' @@ -25,6 +26,7 @@ export type Modals = | 'TrendingGenreSelection' | 'SocialProof' | 'EditFolder' + | 'EditPlaylist' | 'SignOutConfirmation' | 'Overflow' | 'AddToPlaylist' @@ -56,6 +58,7 @@ export type BasicModalsState = { export type StatefulModalsState = { CreateChatModal: CreateChatModalState + EditPlaylist: EditPlaylistModalState InboxUnavailableModal: InboxUnavailableModalState LeavingAudiusModal: LeavingAudiusModalState WithdrawUSDCModal: WithdrawUSDCModalState diff --git a/packages/web/src/components/collection/desktop/Artwork.tsx b/packages/web/src/components/collection/desktop/Artwork.tsx index 55cfba98496..b84747e9a68 100644 --- a/packages/web/src/components/collection/desktop/Artwork.tsx +++ b/packages/web/src/components/collection/desktop/Artwork.tsx @@ -4,15 +4,14 @@ import { CoverArtSizes, SquareSizes, cacheCollectionsSelectors, - imageBlank + imageBlank, + useEditPlaylistModal } from '@audius/common' import { Button, ButtonType, IconPencil } from '@audius/stems' -import { useDispatch } from 'react-redux' import { useSelector } from 'common/hooks/useSelector' import DynamicImage from 'components/dynamic-image/DynamicImage' import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt' -import { open as openEditCollectionModal } from 'store/application/ui/editPlaylistModal/slice' import styles from './CollectionHeader.module.css' @@ -45,8 +44,6 @@ export const Artwork = (props: ArtworkProps) => { isOwner } = props - const dispatch = useDispatch() - const isImageAutogenerated = useSelector( (state) => getCollection(state, { id: collectionId })?.is_image_autogenerated @@ -65,15 +62,15 @@ export const Artwork = (props: ArtworkProps) => { if (image || gradient || imageOverride || image === '') callback() }, [image, callback, gradient, imageOverride]) + const { onOpen } = useEditPlaylistModal() + const handleEditArtwork = useCallback(() => { - dispatch( - openEditCollectionModal({ - collectionId, - initialFocusedField: - hasImage && !isImageAutogenerated ? undefined : 'artwork' - }) - ) - }, [dispatch, collectionId, hasImage, isImageAutogenerated]) + onOpen({ + collectionId, + initialFocusedField: + hasImage && !isImageAutogenerated ? undefined : 'artwork' + }) + }, [collectionId, hasImage, isImageAutogenerated, onOpen]) return ( { const [artworkLoading, setIsArtworkLoading] = useState(true) const [filterText, setFilterText] = useState('') - const dispatch = useDispatch() const handleFilterChange = useCallback( (e: ChangeEvent) => { @@ -71,11 +72,11 @@ export const CollectionHeader = (props: CollectionHeaderProps) => { setIsArtworkLoading(false) }, []) + const { onOpen } = useEditPlaylistModal() + const handleClickEditTitle = useCallback(() => { - dispatch( - openEditCollectionModal({ collectionId, initialFocusedField: 'name' }) - ) - }, [dispatch, collectionId]) + onOpen({ collectionId, initialFocusedField: 'name' }) + }, [onOpen, collectionId]) const renderStatsRow = (isLoading: boolean) => { if (isLoading) return null diff --git a/packages/web/src/components/collection/desktop/EditButton.tsx b/packages/web/src/components/collection/desktop/EditButton.tsx index 0984203f78f..46dbe9cfa30 100644 --- a/packages/web/src/components/collection/desktop/EditButton.tsx +++ b/packages/web/src/components/collection/desktop/EditButton.tsx @@ -1,9 +1,7 @@ import { useCallback } from 'react' +import { useEditPlaylistModal } from '@audius/common' import { ButtonProps, ButtonType, IconPencil } from '@audius/stems' -import { useDispatch } from 'react-redux' - -import { open as openEditCollectionModal } from 'store/application/ui/editPlaylistModal/slice' import { EntityActionButton } from '../../entity-page/EntityActionButton' @@ -17,15 +15,12 @@ type EditButtonProps = Partial & { export const EditButton = (props: EditButtonProps) => { const { collectionId, ...other } = props - const dispatch = useDispatch() - - const handleEdit = useCallback( - () => - dispatch( - openEditCollectionModal({ collectionId, isCollectionViewed: true }) - ), - [dispatch, collectionId] - ) + + const { onOpen } = useEditPlaylistModal() + + const handleEdit = useCallback(() => { + onOpen({ collectionId, isCollectionViewed: true }) + }, [collectionId, onOpen]) return ( & - ReturnType - -const EditPlaylistModal = (props: EditPlaylistModalProps) => { - const { - isOpen, - isCollectionViewed, - initialFocusedField, - collectionId, - collection, - goToRoute, - onClose, - fetchSavedPlaylists, - editPlaylist - } = props +const EditPlaylistModal = () => { + const dispatch = useDispatch() + const { isOpen, onClose, data } = useEditPlaylistModal() + const { collectionId, isCollectionViewed, initialFocusedField } = data + const collection = useSelector((state) => + getCollectionWithUser(state, { id: collectionId ?? undefined }) + ) useEffect(() => { if (collection == null && collectionId != null) { - fetchSavedPlaylists() + dispatch(fetchSavedPlaylists()) } - }, [collection, collectionId, fetchSavedPlaylists]) + }, [collection, collectionId, dispatch]) const { playlist_id: playlistId, is_album: isAlbum } = collection || {} const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false) const onClickDelete = () => setShowDeleteConfirmation(true) const onCancelDelete = () => setShowDeleteConfirmation(false) - const onSaveEdit = (formFields: any) => { - editPlaylist(playlistId!, formFields) - onClose() - } + + const handleSubmit = useCallback( + (formFields: any) => { + if (playlistId) { + dispatch(editPlaylist(playlistId, formFields)) + } + onClose() + }, + [playlistId, dispatch, onClose] + ) const editPlaylistModalTitle = `${messages.edit} ${ isAlbum ? messages.title.album : messages.title.playlist @@ -101,9 +89,9 @@ const EditPlaylistModal = (props: EditPlaylistModalProps) => { setShowDeleteConfirmation(false) onClose() if (isCollectionViewed) { - goToRoute(TRENDING_PAGE) + dispatch(pushRoute(TRENDING_PAGE)) } - }, [onClose, goToRoute, isCollectionViewed]) + }, [onClose, isCollectionViewed, dispatch]) return ( <> @@ -131,7 +119,7 @@ const EditPlaylistModal = (props: EditPlaylistModalProps) => { isAlbum={isAlbum} onDelete={onClickDelete} onCancel={onClose} - onSave={onSaveEdit} + onSave={handleSubmit} /> )} @@ -148,23 +136,4 @@ const EditPlaylistModal = (props: EditPlaylistModalProps) => { ) } -const mapStateToProps = (state: AppState) => { - const collectionId = getCollectionId(state) - return { - isOpen: getIsOpen(state), - initialFocusedField: getInitialFocusedField(state), - isCollectionViewed: getIsCollectionViewed(state), - collectionId: getCollectionId(state), - collection: getCollectionWithUser(state, { id: collectionId || undefined }) - } -} - -const mapDispatchToProps = (dispatch: Dispatch) => ({ - onClose: () => dispatch(close()), - fetchSavedPlaylists: () => dispatch(fetchSavedPlaylists()), - goToRoute: (route: string) => dispatch(pushRoute(route)), - editPlaylist: (playlistId: ID, formFields: any) => - dispatch(editPlaylist(playlistId, formFields)) -}) - -export default connect(mapStateToProps, mapDispatchToProps)(EditPlaylistModal) +export default EditPlaylistModal diff --git a/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx b/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx index 495bf1c7986..a4dc1134974 100644 --- a/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx +++ b/packages/web/src/components/edit-playlist/mobile/EditPlaylistPage.tsx @@ -13,7 +13,8 @@ import { newCollectionMetadata, usePremiumContentAccessMap, EditPlaylistValues, - cacheCollectionsSelectors + cacheCollectionsSelectors, + useEditPlaylistModal } from '@audius/common' import { connect } from 'react-redux' import { Dispatch } from 'redux' @@ -29,10 +30,9 @@ import TrackList from 'components/track/mobile/TrackList' import { useCollectionCoverArt } from 'hooks/useCollectionCoverArt' import useHasChangedRoute from 'hooks/useHasChangedRoute' import UploadStub from 'pages/profile-page/components/mobile/UploadStub' -import { getCollectionId } from 'store/application/ui/editPlaylistModal/selectors' -import { close } from 'store/application/ui/editPlaylistModal/slice' import { AppState } from 'store/types' import { resizeImage } from 'utils/imageProcessingUtil' +import { useSelector } from 'utils/reducer' import { withNullGuard } from 'utils/withNullGuard' import styles from './EditPlaylistPage.module.css' @@ -64,17 +64,19 @@ const g = withNullGuard((props: EditPlaylistPageProps) => { }) const EditPlaylistPage = g( - ({ - close, - metadata, - tracks, - removeTrack, - editPlaylist, - orderPlaylist, - refreshLineup - }) => { + ({ removeTrack, editPlaylist, orderPlaylist, refreshLineup }) => { + const { data, onClose } = useEditPlaylistModal() + const { collectionId } = data + + const metadata = useSelector((state) => + getCollection(state, { id: collectionId }) + ) + const tracks = useSelector((state) => + getCollectionTracksWithUsers(state, { id: collectionId ?? undefined }) + ) + // Close the page if the route was changed - useHasChangedRoute(close) + useHasChangedRoute(onClose) const initialMetadata = { ...(metadata as Collection), artwork: { url: '' } @@ -236,11 +238,11 @@ const EditPlaylistPage = g( editPlaylist(metadata.playlist_id, editPlaylistData) - close() + onClose() } }, [ formFields, - close, + onClose, metadata, editPlaylist, hasReordered, @@ -322,7 +324,7 @@ const EditPlaylistPage = g( /> ) }), - [close, formFields, onSave] + [formFields, onSave] ) useTemporaryNavContext(setters) @@ -432,17 +434,13 @@ const EditPlaylistPage = g( ) function mapStateToProps(state: AppState) { - const collectionId = getCollectionId(state)! return { - metadata: getCollection(state, { id: collectionId }), - account: getAccountUser(state), - tracks: getCollectionTracksWithUsers(state, { id: collectionId }) + account: getAccountUser(state) } } function mapDispatchToProps(dispatch: Dispatch) { return { - close: () => dispatch(close()), editPlaylist: (id: ID, metadata: EditPlaylistValues) => dispatch(editPlaylist(id, metadata)), orderPlaylist: (playlistId: ID, idsAndTimes: any) => diff --git a/packages/web/src/components/menu/CollectionMenu.tsx b/packages/web/src/components/menu/CollectionMenu.tsx index e86f0e6ee16..d529e3464a3 100644 --- a/packages/web/src/components/menu/CollectionMenu.tsx +++ b/packages/web/src/components/menu/CollectionMenu.tsx @@ -5,7 +5,8 @@ import { FavoriteSource, RepostSource, cacheUsersSelectors, - collectionsSocialActions as socialActions + collectionsSocialActions as socialActions, + useEditPlaylistModal } from '@audius/common' import { PopupMenuItem } from '@audius/stems' import { push as pushRoute } from 'connected-react-router' @@ -13,7 +14,6 @@ import { connect } from 'react-redux' import { Dispatch } from 'redux' import * as embedModalActions from 'components/embed-modal/store/actions' -import { open as openEditCollectionModal } from 'store/application/ui/editPlaylistModal/slice' import { AppState } from 'store/types' import { albumPage, collectionPage, profilePage } from 'utils/route' const { getUser } = cacheUsersSelectors @@ -52,6 +52,8 @@ const messages = { } const CollectionMenu = (props: CollectionMenuProps) => { + const { onOpen } = useEditPlaylistModal() + const getMenu = () => { const { type, @@ -72,7 +74,6 @@ const CollectionMenu = (props: CollectionMenuProps) => { onShare, goToRoute, openEmbedModal, - editCollection, shareCollection, saveCollection, unsaveCollection, @@ -122,7 +123,7 @@ const CollectionMenu = (props: CollectionMenuProps) => { const editCollectionMenuItem = { text: `Edit ${typeName}`, - onClick: () => editCollection(playlistId) + onClick: () => onOpen({ collectionId: playlistId }) } const embedMenuItem = { @@ -179,8 +180,6 @@ function mapDispatchToProps(dispatch: Dispatch) { goToRoute: (route: string) => dispatch(pushRoute(route)), shareCollection: (playlistId: PlaylistId) => dispatch(socialActions.shareCollection(playlistId, ShareSource.OVERFLOW)), - editCollection: (collectionId: ID) => - dispatch(openEditCollectionModal({ collectionId })), saveCollection: (playlistId: PlaylistId) => dispatch( socialActions.saveCollection(playlistId, FavoriteSource.OVERFLOW) diff --git a/packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx b/packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx index 104ab664c47..6f52329e9cb 100644 --- a/packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx +++ b/packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx @@ -10,7 +10,8 @@ import { PlaylistLibraryKind, PlaylistLibraryID, shareModalUIActions, - ShareSource + ShareSource, + useEditPlaylistModal } from '@audius/common' import { PopupMenuItem } from '@audius/stems' import cn from 'classnames' @@ -20,7 +21,6 @@ import { useToggle } from 'react-use' import { make, useRecord } from 'common/store/analytics/actions' import { Draggable } from 'components/dragndrop' -import { open as openEditPlaylistModal } from 'store/application/ui/editPlaylistModal/slice' import { DragDropKind, selectDraggingKind, @@ -92,17 +92,17 @@ export const CollectionNavItem = (props: CollectionNavItemProps) => { setIsHovering(false) }, []) + const { onOpen } = useEditPlaylistModal() + const handleEdit = useCallback(() => { if (typeof id === 'number') { - dispatch( - openEditPlaylistModal({ - collectionId: id, - isCollectionViewed: isCollectionViewed?.isExact ?? false - }) - ) + onOpen({ + collectionId: id, + isCollectionViewed: isCollectionViewed?.isExact ?? false + }) record(make(Name.PLAYLIST_OPEN_EDIT_FROM_LIBRARY, {})) } - }, [dispatch, id, record, isCollectionViewed]) + }, [id, onOpen, isCollectionViewed?.isExact, record]) const handleShare = useCallback(() => { if (typeof id === 'number') { diff --git a/packages/web/src/components/nav/mobile/TopLevelPage.tsx b/packages/web/src/components/nav/mobile/TopLevelPage.tsx index 448142d5071..7c554c47e0d 100644 --- a/packages/web/src/components/nav/mobile/TopLevelPage.tsx +++ b/packages/web/src/components/nav/mobile/TopLevelPage.tsx @@ -1,4 +1,4 @@ -import { modalsSelectors } from '@audius/common' +import { modalsSelectors, useEditPlaylistModal } from '@audius/common' import cn from 'classnames' import { connect } from 'react-redux' import { Dispatch } from 'redux' @@ -6,7 +6,6 @@ import { Dispatch } from 'redux' import AddToPlaylistPage from 'components/add-to-playlist/mobile/AddToPlaylist' import EditPlaylistPage from 'components/edit-playlist/mobile/EditPlaylistPage' import useScrollLock from 'hooks/useScrollLock' -import { getIsOpen } from 'store/application/ui/editPlaylistModal/selectors' import { AppState } from 'store/types' import styles from './TopLevelPage.module.css' @@ -17,16 +16,14 @@ type TopLevelPageProps = ReturnType & const rootElement = document.querySelector('#root') -const TopLevelPage = ({ - showCreatePlaylist, - showAddToPlaylist -}: TopLevelPageProps) => { - const showPage = showCreatePlaylist || showAddToPlaylist +const TopLevelPage = ({ showAddToPlaylist }: TopLevelPageProps) => { + const { isOpen } = useEditPlaylistModal() + const showPage = isOpen || showAddToPlaylist const isLocked = !!(showPage && rootElement) useScrollLock(isLocked) let page = null - if (showCreatePlaylist) { + if (isOpen) { page = } else if (showAddToPlaylist) { page = @@ -46,7 +43,6 @@ const TopLevelPage = ({ function mapStateToProps(state: AppState) { return { - showCreatePlaylist: getIsOpen(state), showAddToPlaylist: getModalVisibility(state, 'AddToPlaylist') } } diff --git a/packages/web/src/components/track-overflow-modal/ConnectedMobileOverflowModal.tsx b/packages/web/src/components/track-overflow-modal/ConnectedMobileOverflowModal.tsx index ec1cdc04b37..070abb6b645 100644 --- a/packages/web/src/components/track-overflow-modal/ConnectedMobileOverflowModal.tsx +++ b/packages/web/src/components/track-overflow-modal/ConnectedMobileOverflowModal.tsx @@ -19,13 +19,13 @@ import { modalsActions, modalsSelectors, queueSelectors, - shareModalUIActions + shareModalUIActions, + useEditPlaylistModal } from '@audius/common' import { push as pushRoute } from 'connected-react-router' import { connect } from 'react-redux' import { Dispatch } from 'redux' -import { open } from 'store/application/ui/editPlaylistModal/slice' import { AppState } from 'store/types' import { collectibleDetailsPage, @@ -91,7 +91,6 @@ const ConnectedMobileOverflowModal = ({ saveCollection, unsaveCollection, addToPlaylist, - editPlaylist, deletePlaylist, publishPlaylist, visitTrackPage, @@ -103,6 +102,7 @@ const ConnectedMobileOverflowModal = ({ shareUser }: ConnectedMobileOverflowModalProps) => { // Create callbacks + const { onOpen: onOpenEditPlaylist } = useEditPlaylistModal() const { onRepost, onUnrepost, @@ -177,7 +177,9 @@ const ConnectedMobileOverflowModal = ({ ), onVisitCollectiblePage: () => visitCollectiblePage(handle, id as string), - onEditPlaylist: isAlbum ? () => {} : () => editPlaylist(id as ID), + onEditPlaylist: isAlbum + ? () => {} + : () => onOpenEditPlaylist({ collectionId: id as ID }), onDeletePlaylist: isAlbum ? () => {} : () => deletePlaylist(id as ID), onPublishPlaylist: isAlbum ? () => {} @@ -335,8 +337,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => { dispatch(saveCollection(collectionId, FavoriteSource.OVERFLOW)), unsaveCollection: (collectionId: ID) => dispatch(unsaveCollection(collectionId, FavoriteSource.OVERFLOW)), - editPlaylist: (playlistId: ID) => - dispatch(open({ collectionId: playlistId })), deletePlaylist: (playlistId: ID) => dispatch(openDeletePlaylist({ playlistId })), publishPlaylist: (playlistId: ID) => dispatch(publishPlaylist(playlistId)), diff --git a/packages/web/src/pages/collection-page/CollectionPageProvider.tsx b/packages/web/src/pages/collection-page/CollectionPageProvider.tsx index bd05f52c82c..f2d34e74d14 100644 --- a/packages/web/src/pages/collection-page/CollectionPageProvider.tsx +++ b/packages/web/src/pages/collection-page/CollectionPageProvider.tsx @@ -40,7 +40,8 @@ import { playerSelectors, queueSelectors, playlistUpdatesActions, - playlistUpdatesSelectors + playlistUpdatesSelectors, + editPlaylistModalActions } from '@audius/common' import { push as pushRoute, replace } from 'connected-react-router' import { UnregisterCallback } from 'history' @@ -50,7 +51,6 @@ import { Dispatch } from 'redux' import { TrackEvent, make } from 'common/store/analytics/actions' import DeletedPage from 'pages/deleted-page/DeletedPage' -import { open as openEditCollectionModal } from 'store/application/ui/editPlaylistModal/slice' import { setUsers, setVisibility @@ -989,7 +989,10 @@ function mapDispatchToProps(dispatch: Dispatch) { setModalVisibility: () => dispatch(setVisibility(true)), onEditCollection: (collectionId: ID) => dispatch( - openEditCollectionModal({ collectionId, isCollectionViewed: true }) + editPlaylistModalActions.open({ + collectionId, + isCollectionViewed: true + }) ), updatePlaylistLastViewedAt: (playlistId: ID) => dispatch(updatedPlaylistViewed({ playlistId })) diff --git a/packages/web/src/pages/modals/Modals.tsx b/packages/web/src/pages/modals/Modals.tsx index 377c9d18417..c85f0e93655 100644 --- a/packages/web/src/pages/modals/Modals.tsx +++ b/packages/web/src/pages/modals/Modals.tsx @@ -59,6 +59,7 @@ const commonModalsMap: { [Modal in ModalTypes]?: ComponentType } = { VipDiscord: VipDiscordModal, AudioBreakdown: AudioBreakdownModal, EditFolder: EditFolderModal, + EditPlaylist: EditPlaylistModal, AddToPlaylist: AddToPlaylistModal, TiersExplainer: TierExplainerModal, DeletePlaylistConfirmation: DeletePlaylistConfirmationModal, @@ -109,7 +110,6 @@ const Modals = () => { {!isMobileClient && ( <> - diff --git a/packages/web/src/store/application/ui/editPlaylistModal/selectors.ts b/packages/web/src/store/application/ui/editPlaylistModal/selectors.ts deleted file mode 100644 index 7838cec6f11..00000000000 --- a/packages/web/src/store/application/ui/editPlaylistModal/selectors.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { AppState } from 'store/types' - -const getBase = (state: AppState) => state.application.ui.editPlaylistModal -export const getIsOpen = (state: AppState) => { - return getBase(state).isOpen -} - -export const getCollectionId = (state: AppState) => { - return getBase(state).collectionId -} - -export const getInitialFocusedField = (state: AppState) => { - return getBase(state).initialFocusedField -} - -export const getIsCollectionViewed = (state: AppState) => { - return getBase(state).isCollectionViewed -} diff --git a/packages/web/src/store/application/ui/editPlaylistModal/slice.ts b/packages/web/src/store/application/ui/editPlaylistModal/slice.ts deleted file mode 100644 index c85f9c2c3d7..00000000000 --- a/packages/web/src/store/application/ui/editPlaylistModal/slice.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { ID, Nullable } from '@audius/common' -import { createSlice, PayloadAction } from '@reduxjs/toolkit' - -export type FocusableFields = 'name' | 'description' | 'artwork' - -export type EditPlaylistModalState = { - isOpen: boolean - collectionId: ID | null - initialFocusedField: Nullable - isCollectionViewed: boolean -} - -const initialState: EditPlaylistModalState = { - isOpen: false, - collectionId: null, - initialFocusedField: null, - isCollectionViewed: false -} - -type OpenPayload = PayloadAction<{ - collectionId: ID - // Which field in edit-playlist form should be autofocused - initialFocusedField?: 'name' | 'description' | 'artwork' - // Is the collection currently being viewed - // Used to check if we should reroute back to trending on delete - isCollectionViewed?: boolean -}> - -const slice = createSlice({ - name: 'application/ui/editPlaylistModal', - initialState, - reducers: { - open: (state, action: OpenPayload) => { - const { collectionId, initialFocusedField, isCollectionViewed } = - action.payload - - state.isOpen = true - state.collectionId = collectionId - state.isCollectionViewed = isCollectionViewed ?? false - if (initialFocusedField) { - state.initialFocusedField = initialFocusedField - } - }, - close: (state) => { - state.isOpen = false - state.collectionId = null - state.initialFocusedField = null - state.isCollectionViewed = false - } - } -}) - -export const { open, close } = slice.actions - -export default slice.reducer diff --git a/packages/web/src/store/reducers.ts b/packages/web/src/store/reducers.ts index b969c79d1a3..305ab47d98d 100644 --- a/packages/web/src/store/reducers.ts +++ b/packages/web/src/store/reducers.ts @@ -21,7 +21,6 @@ import visualizer from 'pages/visualizer/store/slice' import appCTAModal from 'store/application/ui/app-cta-modal/slice' import cookieBanner from 'store/application/ui/cookieBanner/reducer' import editFolderModal from 'store/application/ui/editFolderModal/slice' -import editPlaylistModal from 'store/application/ui/editPlaylistModal/slice' import editTrackModal from 'store/application/ui/editTrackModal/reducer' import notifications from 'store/application/ui/notifications/notificationsUISlice' import scrollLock from 'store/application/ui/scrollLock/reducer' @@ -69,7 +68,6 @@ const createRootReducer = (routeHistory: History) => appCTAModal, cookieBanner, editFolderModal, - editPlaylistModal, editTrackModal, embedModal, firstUploadModal, diff --git a/packages/web/src/store/types.ts b/packages/web/src/store/types.ts index 7217d932729..5fd0c15c75c 100644 --- a/packages/web/src/store/types.ts +++ b/packages/web/src/store/types.ts @@ -35,7 +35,6 @@ import { BackendState } from '../common/store/backend/types' import { CookieBannerState } from './application/ui/cookieBanner/types' import { EditFolderModalState } from './application/ui/editFolderModal/slice' -import { EditPlaylistModalState } from './application/ui/editPlaylistModal/slice' import EditTrackModalState from './application/ui/editTrackModal/types' import { NotificationsUIState } from './application/ui/notifications/notificationsUISlice' import { ScrollLockState } from './application/ui/scrollLock/types' @@ -67,7 +66,6 @@ export type AppState = CommonState & { averageColor: ReturnType changePassword: ChangePasswordState cookieBanner: CookieBannerState - editPlaylistModal: EditPlaylistModalState editFolderModal: EditFolderModalState editTrackModal: EditTrackModalState embedModal: EmbedModalState