[PAY-2681] Artist dashboard album support

packages/common/src/models/Track.ts

@@ -118,24 +118,24 @@ export const isContentCollectibleGated = (
   nft_collection:
     | AccessConditionsEthNFTCollection
     | AccessConditionsSolNFTCollection
-} => 'nft_collection' in (gatedConditions ?? {})
+} => !!gatedConditions && 'nft_collection' in (gatedConditions ?? {})
 
 export const isContentFollowGated = (
   gatedConditions?: Nullable<AccessConditions>
 ): gatedConditions is FollowGatedConditions =>
-  'follow_user_id' in (gatedConditions ?? {})
+  !!gatedConditions && 'follow_user_id' in (gatedConditions ?? {})
 
 export const isContentTipGated = (
   gatedConditions?: Nullable<AccessConditions>
 ): gatedConditions is TipGatedConditions =>
-  'tip_user_id' in (gatedConditions ?? {})
+  !!gatedConditions && 'tip_user_id' in (gatedConditions ?? {})
 
 export const isContentUSDCPurchaseGated = (
   gatedConditions?: Nullable<
     AccessConditions | DeepOmit<USDCPurchaseConditions, 'splits'>
   > // data coming from upload/edit forms will not have splits on the type
 ): gatedConditions is USDCPurchaseConditions =>
-  'usdc_purchase' in (gatedConditions ?? {})
+  !!gatedConditions && 'usdc_purchase' in (gatedConditions ?? {})
 
 export type AccessSignature = {
   data: string

packages/common/src/store/account/selectors.ts

@@ -177,6 +177,14 @@ export const getAccountWithAlbums = createSelector(
   }
 )
 
+export const getAccountAlbums = createSelector(
+  [getAccountWithCollections],
+  (account) => {
+    if (!account) return undefined
+    return account.collections.filter((c) => c.is_album)
+  }
+)
+
 export const getAccountWithNameSortedPlaylistsAndAlbums = createSelector(
   [getAccountWithCollections],
   (account) => {

packages/harmony/src/components/input/TextInput/TextInput.tsx

@@ -173,7 +173,11 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           )}
         >
           {StartIcon ? (
-            <StartIcon size='m' color='subdued' {...IconProps} />
+            <StartIcon
+              size={size === TextInputSize.SMALL ? 's' : 'm'}
+              color='subdued'
+              {...IconProps}
+            />
           ) : null}
           <Flex direction='column' gap='xs' justifyContent='center' w='100%'>
             {shouldShowLabel ? (

packages/web/src/pages/dashboard-page/DashboardPage.tsx

@@ -1,6 +1,7 @@
 import { useState, Suspense, ReactNode, useEffect, useCallback } from 'react'
 
 import { Status, Track } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import { themeSelectors } from '@audius/common/store'
 import { formatCount } from '@audius/common/utils'
 import cn from 'classnames'
@@ -12,10 +13,12 @@ import Header from 'components/header/desktop/Header'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Page from 'components/page/Page'
 import { useGoToRoute } from 'hooks/useGoToRoute'
+import { useFlag } from 'hooks/useRemoteConfig'
 import lazyWithPreload from 'utils/lazyWithPreload'
 
 import styles from './DashboardPage.module.css'
 import { ArtistCard } from './components/ArtistCard'
+import { ArtistContentSection } from './components/ArtistContentSection'
 import {
   TracksTableContainer,
   DataSourceTrack,
@@ -67,6 +70,9 @@ const StatTile = (props: { title: string; value: any }) => {
 export const DashboardPage = () => {
   const goToRoute = useGoToRoute()
   const dispatch = useDispatch()
+  const { isEnabled: isPremiumAlbumsEnabled } = useFlag(
+    FeatureFlags.PREMIUM_ALBUMS_ENABLED
+  )
   const [selectedTrack, setSelectedTrack] = useState(-1)
   const { account, tracks, stats } = useSelector(makeGetDashboard())
   const listenData = useSelector(getDashboardListenData)
@@ -194,7 +200,7 @@ export const DashboardPage = () => {
           <div className={styles.sectionContainer}>
             {renderChart()}
             {renderStats()}
-            {renderTable()}
+            {isPremiumAlbumsEnabled ? <ArtistContentSection /> : renderTable()}
           </div>
         </>
       )}

packages/web/src/pages/dashboard-page/components/AlbumsTab.tsx

@@ -0,0 +1,188 @@
+import { useMemo } from 'react'
+
+import { isContentUSDCPurchaseGated, Collection } from '@audius/common/models'
+import { accountSelectors } from '@audius/common/store'
+import { Nullable } from '@audius/common/utils'
+import {
+  IconVisibilityHidden,
+  IconVisibilityPublic,
+  IconCart,
+  Paper
+} from '@audius/harmony'
+import { useSelector } from 'react-redux'
+
+import { TracksTable, TracksTableColumn } from 'components/tracks-table'
+
+import { makeGetDashboard } from '../store/selectors'
+
+const { getAccountAlbums } = accountSelectors
+
+// Pagination Constants
+export const tablePageSize = 50
+
+const messages = {
+  public: 'Public',
+  premium: 'Premium',
+  hidden: 'Hidden'
+}
+
+const albumTableColumns: TracksTableColumn[] = [
+  'spacer',
+  'trackName',
+  'releaseDate',
+  'reposts',
+  'overflowMenu'
+]
+
+export type DataSourceAlbum = Collection & {
+  key: string
+  name: string
+  date: string
+  saves: number
+  reposts: number
+}
+
+export enum AlbumFilters {
+  PUBLIC = 'Public',
+  PREMIUM = 'Premium',
+  HIDDEN = 'Hidden'
+}
+
+const formatAlbumMetadata = (album: Collection): DataSourceAlbum => {
+  return {
+    ...album,
+    key: String(album.playlist_id),
+    name: album.playlist_name,
+    date: album.created_at,
+    saves: album.save_count,
+    reposts: album.repost_count
+  }
+}
+
+export const useArtistDashboardAlbumFilters = ({
+  selectedFilter,
+  filterText
+}: {
+  selectedFilter: Nullable<AlbumFilters>
+  filterText: string
+}) => {
+  const albumsRaw = useSelector(getAccountAlbums) ?? []
+  const albums = albumsRaw?.map((album) => formatAlbumMetadata(album))
+
+  const { hasOnlyOneSection, publicAlbums, hiddenAlbums, premiumAlbums } =
+    useMemo(() => {
+      const publicAlbums = albums.filter(
+        (data) => data.is_private === false && !data.is_stream_gated
+      )
+      const hiddenAlbums = albums.filter((data) => !!data.is_private)
+      const premiumAlbums = albums.filter(
+        (data) =>
+          data.is_stream_gated &&
+          isContentUSDCPurchaseGated(data.stream_conditions)
+      )
+
+      const arrays = [publicAlbums, hiddenAlbums, premiumAlbums]
+      const nonEmptyArrays = arrays.filter((arr) => arr.length > 0)
+      const hasOnlyOneSection = nonEmptyArrays.length === 1
+
+      return {
+        hasOnlyOneSection,
+        publicAlbums,
+        hiddenAlbums,
+        premiumAlbums
+      }
+    }, [albums])
+
+  const filterButtonOptions = useMemo(() => {
+    const filterButtonAlbumOptions = [
+      {
+        id: AlbumFilters.PUBLIC,
+        label: messages.public,
+        icon: IconVisibilityPublic,
+        value: AlbumFilters.PUBLIC
+      }
+    ]
+    if (premiumAlbums.length) {
+      filterButtonAlbumOptions.push({
+        id: AlbumFilters.PREMIUM,
+        label: messages.premium,
+        icon: IconCart,
+        value: AlbumFilters.PREMIUM
+      })
+    }
+    if (hiddenAlbums.length) {
+      filterButtonAlbumOptions.push({
+        id: AlbumFilters.HIDDEN,
+        label: messages.hidden,
+        icon: IconVisibilityHidden,
+        value: AlbumFilters.HIDDEN
+      })
+    }
+
+    return filterButtonAlbumOptions
+  }, [hiddenAlbums, premiumAlbums])
+
+  let filteredData: DataSourceAlbum[] = albums
+  switch (selectedFilter) {
+    case AlbumFilters.PUBLIC:
+      filteredData = publicAlbums
+      break
+    case AlbumFilters.PREMIUM:
+      filteredData = premiumAlbums
+      break
+    case AlbumFilters.HIDDEN:
+      filteredData = hiddenAlbums
+      break
+    default:
+      filteredData = albums
+      break
+  }
+
+  if (filterText) {
+    filteredData = filteredData.filter((data) =>
+      data.name.toLowerCase().includes(filterText.toLowerCase())
+    )
+  }
+
+  return {
+    data: albums,
+    filteredData,
+    filterButtonOptions,
+    hasOnlyOneSection
+  }
+}
+
+type AlbumsTabProps = {
+  selectedFilter: Nullable<AlbumFilters>
+  filterText: string
+  onClickRow: (record: any) => void
+}
+
+export const AlbumsTab = ({
+  selectedFilter,
+  filterText,
+  onClickRow
+}: AlbumsTabProps) => {
+  const { account } = useSelector(makeGetDashboard())
+  const { filteredData } = useArtistDashboardAlbumFilters({
+    selectedFilter,
+    filterText
+  })
+
+  if (!filteredData.length || !account) return null
+
+  return (
+    <Paper w='100%' direction='column' mt='xl'>
+      <TracksTable
+        data={filteredData}
+        disabledTrackEdit
+        columns={albumTableColumns}
+        onClickRow={onClickRow}
+        pageSize={tablePageSize}
+        userId={account.user_id}
+        showMoreLimit={5}
+        totalRowCount={account.track_count}
+      />
+    </Paper>
+  )
+}