[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,54 @@
+import { Nullable } from '@audius/common/utils'
+import { Paper } from '@audius/harmony'
+import { useSelector } from 'react-redux'
+
+import { TracksTable, TracksTableColumn } from 'components/tracks-table'
+
+import { makeGetDashboard } from '../store/selectors'
+
+import { showMoreLimit, tablePageSize } from './constants'
+import { useFilteredAlbumData } from './hooks'
+import { AlbumFilters } from './types'
+
+const albumTableColumns: TracksTableColumn[] = [
+  'spacer',
+  'trackName',
+  'releaseDate',
+  'reposts',
+  'overflowMenu'
+]
+
+type ArtistDashboardAlbumsTabProps = {
+  selectedFilter: Nullable<AlbumFilters>
+  filterText: string
+  onClickRow: (record: any) => void
+}
+
+export const ArtistDashboardAlbumsTab = ({
+  selectedFilter,
+  filterText,
+  onClickRow
+}: ArtistDashboardAlbumsTabProps) => {
+  const { account } = useSelector(makeGetDashboard())
+  const filteredData = useFilteredAlbumData({
+    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={showMoreLimit}
+        totalRowCount={account.track_count}
+      />
+    </Paper>
+  )
+}

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

@@ -0,0 +1,170 @@
+import { useState, useCallback } from 'react'
+
+import { Nullable } from '@audius/common/utils'
+import {
+  SelectablePill,
+  IconSearch,
+  Paper,
+  Flex,
+  FilterButton,
+  TextInput,
+  TextInputSize
+} from '@audius/harmony'
+import { useSelector } from 'react-redux'
+
+import { useGoToRoute } from 'hooks/useGoToRoute'
+
+import { makeGetDashboard } from '../store/selectors'
+
+import { ArtistDashboardAlbumsTab } from './AlbumsTab'
+import { ArtistDashboardTracksTab } from './TracksTab'
+import {
+  useArtistDashboardAlbumFilters,
+  useArtistDashboardTrackFilters,
+  useFormattedAlbumData,
+  useFormattedTrackData
+} from './hooks'
+import { AlbumFilters, TrackFilters } from './types'
+
+const messages = {
+  allReleases: 'All Releases',
+  tracks: 'Tracks',
+  albums: 'Albums',
+  search: (type: Pills) =>
+    `Search ${type === Pills.TRACKS ? 'Tracks' : 'Albums'}`
+}
+
+enum Pills {
+  TRACKS,
+  ALBUMS
+}
+
+export const ArtistContentSection = () => {
+  const goToRoute = useGoToRoute()
+  const { account } = useSelector(makeGetDashboard())
+  const [filterText, setFilterText] = useState('')
+  const [selectedPill, setSelectedPill] = useState(Pills.TRACKS)
+  const [selectedTrackFilter, setSelectedTrackFilter] =
+    useState<Nullable<TrackFilters>>(null)
+  const [selectedAlbumFilter, setSelectedAlbumFilter] =
+    useState<Nullable<AlbumFilters>>(null)
+  const isTracks = selectedPill === Pills.TRACKS
+  const tracks = useFormattedTrackData()
+  const albums = useFormattedAlbumData()
+
+  const {
+    filterButtonOptions: filterButtonTrackOptions,
+    hasOnlyOneSection: hasOnlyOneTrackSection
+  } = useArtistDashboardTrackFilters()
+  const {
+    filterButtonOptions: filterButtonAlbumOptions,
+    hasOnlyOneSection: hasOnlyOneAlbumSection
+  } = useArtistDashboardAlbumFilters()
+
+  const filterButtonOptions = isTracks
+    ? filterButtonTrackOptions
+    : filterButtonAlbumOptions
+  const shouldShowFilterButton =
+    (isTracks && !hasOnlyOneTrackSection) ||
+    (!isTracks && !hasOnlyOneAlbumSection)
+  const shouldShowPills = tracks.length && albums.length
+
+  const onClickRow = useCallback(
+    (record: any) => {
+      if (!account) return
+      goToRoute(record.permalink)
+    },
+    [account, goToRoute]
+  )
+
+  const onClickPill = useCallback(
+    (pill: Pills) => {
+      setSelectedPill(pill)
+      setFilterText('')
+
+      // Reset filter button state when switching content types
+      if (!isTracks && pill === Pills.TRACKS) {
+        setSelectedAlbumFilter(null)
+      } else if (isTracks && pill === Pills.ALBUMS) {
+        setSelectedTrackFilter(null)
+      }
+    },
+    [isTracks]
+  )
+
+  const handleSelectFilter = (value: string) => {
+    if (isTracks) {
+      setSelectedTrackFilter(value as TrackFilters)
+    } else {
+      setSelectedAlbumFilter(value as AlbumFilters)
+    }
+  }
+
+  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value
+    setFilterText(val)
+  }
+
+  if (!tracks.length && !albums.length) return null
+
+  return (
+    <Paper w='100%' direction='column' mt='xl'>
+      <Flex ph='2xl' pv='l' justifyContent='space-between'>
+        <Flex gap='2xl'>
+          {shouldShowPills ? (
+            <Flex gap='s'>
+              <SelectablePill
+                isSelected={selectedPill === Pills.TRACKS}
+                label={messages.tracks}
+                size='large'
+                onClick={() => onClickPill(Pills.TRACKS)}
+              />
+              <SelectablePill
+                isSelected={selectedPill === Pills.ALBUMS}
+                label={messages.albums}
+                size='large'
+                onClick={() => onClickPill(Pills.ALBUMS)}
+              />
+            </Flex>
+          ) : null}
+          {
+            // Only show filter button if there are multiple sections for the selected content type
+            shouldShowFilterButton ? (
+              <FilterButton
+                onSelect={handleSelectFilter}
+                selection={isTracks ? selectedTrackFilter : selectedAlbumFilter}
+                label={messages.allReleases}
+                options={filterButtonOptions}
+                popupAnchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+                popupTransformOrigin={{ vertical: 'top', horizontal: 'left' }}
+              />
+            ) : null
+          }
+        </Flex>
+        <Flex>
+          <TextInput
+            placeholder={messages.search(selectedPill)}
+            label={messages.search(selectedPill)}
+            value={filterText}
+            onChange={handleFilterChange}
+            size={TextInputSize.SMALL}
+            startIcon={IconSearch}
+          />
+        </Flex>
+      </Flex>
+      {selectedPill === Pills.TRACKS ? (
+        <ArtistDashboardTracksTab
+          selectedFilter={selectedTrackFilter}
+          filterText={filterText}
+          onClickRow={onClickRow}
+        />
+      ) : (
+        <ArtistDashboardAlbumsTab
+          selectedFilter={selectedAlbumFilter}
+          filterText={filterText}
+          onClickRow={onClickRow}
+        />
+      )}
+    </Paper>
+  )
+}

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

@@ -0,0 +1,72 @@
+import { useCallback } from 'react'
+
+import { Status } from '@audius/common/models'
+import { Nullable } from '@audius/common/utils'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { TracksTable, TracksTableColumn } from 'components/tracks-table'
+
+import { getDashboardTracksStatus, makeGetDashboard } from '../store/selectors'
+import { fetchTracks } from '../store/slice'
+
+import { showMoreLimit, tablePageSize } from './constants'
+import { useFilteredTrackData } from './hooks'
+import { TrackFilters } from './types'
+
+const tracksTableColumns: TracksTableColumn[] = [
+  'spacer',
+  'trackName',
+  'releaseDate',
+  'length',
+  'plays',
+  'reposts',
+  'overflowMenu'
+]
+
+type ArtistDashboardTracksTabProps = {
+  selectedFilter: Nullable<TrackFilters>
+  filterText: string
+  onClickRow: (record: any) => void
+}
+
+export const ArtistDashboardTracksTab = ({
+  selectedFilter,
+  filterText,
+  onClickRow
+}: ArtistDashboardTracksTabProps) => {
+  const dispatch = useDispatch()
+  const tracksStatus = useSelector(getDashboardTracksStatus)
+  const { account } = useSelector(makeGetDashboard())
+
+  const handleFetchPage = useCallback(
+    (page: number) => {
+      dispatch(
+        fetchTracks({ offset: page * tablePageSize, limit: tablePageSize })
+      )
+    },
+    [dispatch]
+  )
+
+  const filteredData = useFilteredTrackData({
+    selectedFilter,
+    filterText
+  })
+
+  if (!filteredData.length || !account) return null
+
+  return (
+    <TracksTable
+      data={filteredData}
+      disabledTrackEdit
+      columns={tracksTableColumns}
+      onClickRow={onClickRow}
+      fetchPage={handleFetchPage}
+      pageSize={tablePageSize}
+      userId={account.user_id}
+      showMoreLimit={showMoreLimit}
+      totalRowCount={account.track_count}
+      loading={tracksStatus === Status.LOADING}
+      isPaginated
+    />
+  )
+}

packages/web/src/pages/dashboard-page/components/constants.ts

@@ -0,0 +1,3 @@
+export const showMoreLimit = 5
+
+export const tablePageSize = 50