Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[C-4897] Improve empty edit collection page #9346

Merged
merged 1 commit into from
Aug 1, 2024
Merged

[C-4897] Improve empty edit collection page #9346

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/web/src/components/collection/desktop/OwnerActionButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => {

const isDisabled = !track_count || track_count === 0

return collection ? (
if (!collection) return null

return (
<>
{!ddex_app && <EditButton collectionId={collectionId} />}
{ddex_app ? null : <EditButton collectionId={collectionId} />}
<ShareButton
collectionId={collectionId}
disabled={isDisabled}
Expand All @@ -36,9 +38,7 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => {
/>
{is_private ? <PublishButton collectionId={collectionId} /> : null}

{!is_private ? (
<OverflowMenuButton collectionId={collectionId} isOwner />
) : null}
<OverflowMenuButton collectionId={collectionId} isOwner />
</>
) : null
)
}
6 changes: 4 additions & 2 deletions packages/web/src/pages/collection-page/CollectionPageProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -746,7 +746,8 @@ class CollectionPage extends Component<
tracks,
userId,
userPlaylists,
smartCollection
smartCollection,
trackCount
} = this.props
const { allowReordering } = this.state
const { playlistId } = this.props
Expand Down Expand Up @@ -803,7 +804,8 @@ class CollectionPage extends Component<
onClickReposts: this.onClickReposts,
onFollow: this.onFollow,
onUnfollow: this.onUnfollow,
refresh: this.refreshCollection
refresh: this.refreshCollection,
trackCount
}

if ((metadata?.is_delete || metadata?._marked_deleted) && user) {
Expand Down
34 changes: 22 additions & 12 deletions packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
PurchaseableContentType
} from '@audius/common/store'
import { getDogEarType, removeNullable } from '@audius/common/utils'
import { Flex, Text } from '@audius/harmony'

import {
CollectiblesPlaylistTableColumn,
Expand All @@ -38,7 +39,8 @@ import styles from './CollectionPage.module.css'

const getMessages = (collectionType: 'album' | 'playlist') => ({
emptyPage: {
owner: `This ${collectionType} is empty. Start adding tracks to share it or make it public.`,
ownerTitle: 'Nothing here yet',
ownerCta: 'Start adding tracks',
visitor: `This ${collectionType} is empty...`
},
type: {
Expand All @@ -48,19 +50,24 @@ const getMessages = (collectionType: 'album' | 'playlist') => ({
remove: 'Remove from this'
})

const EmptyPage = (props: {
type EmptyPageProps = {
text?: string | null
isOwner: boolean
isAlbum: boolean
}) => {
const messages = getMessages(props.isAlbum ? 'album' : 'playlist')
const text =
props.text ||
(props.isOwner ? messages.emptyPage.owner : messages.emptyPage.visitor)
}

const EmptyPage = (props: EmptyPageProps) => {
const { isAlbum, isOwner, text: textProp } = props
const messages = getMessages(isAlbum ? 'album' : 'playlist')
return (
<div className={styles.emptyWrapper}>
<p className={styles.emptyText}>{text}</p>
</div>
<Flex p='2xl' alignItems='center' direction='column' gap='s'>
<Text variant='title' size='l'>
{textProp ?? isOwner
? messages.emptyPage.ownerTitle
: messages.emptyPage.visitor}
</Text>
{isOwner ? <Text size='l'>{messages.emptyPage.ownerCta}</Text> : null}
</Flex>
)
}

Expand Down Expand Up @@ -107,6 +114,7 @@ export type CollectionPageProps = {
) => void
onClickReposts?: () => void
onClickFavorites?: () => void
trackCount: number
}

const CollectionPage = ({
Expand Down Expand Up @@ -134,7 +142,8 @@ const CollectionPage = ({
onReorderTracks,
onClickRemove,
onClickReposts,
onClickFavorites
onClickFavorites,
trackCount
}: CollectionPageProps) => {
const { status, metadata, user } = collection

Expand All @@ -147,7 +156,8 @@ const CollectionPage = ({
const queuedAndPlaying = playing && isQueued()
const queuedAndPreviewing = previewing && isQueued()
const tracksLoading =
tracks.status === Status.LOADING || tracks.status === Status.IDLE
trackCount > 0 &&
(tracks.status === Status.LOADING || tracks.status === Status.IDLE)

const coverArtSizes =
metadata && metadata?.variant !== Variant.SMART
Expand Down