randy PR comments

AudiusProject · Apr 22, 2024 · a994f24 · a994f24
1 parent 3eb0c34
commit a994f24
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 34 deletions.
diff --git a/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx b/packages/web/src/pages/dashboard-page/components/ArtistContentSection.tsx
@@ -10,14 +10,9 @@ import {
   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 { ArtistDashboardAlbumsTab } from './ArtistDashboardAlbumsTab'
+import { ArtistDashboardTracksTab } from './ArtistDashboardTracksTab'
 import {
   useArtistDashboardAlbumFilters,
   useArtistDashboardTrackFilters,
@@ -40,8 +35,6 @@ enum Pills {
 }
 
 export const ArtistContentSection = () => {
-  const goToRoute = useGoToRoute()
-  const { account } = useSelector(makeGetDashboard())
   const [filterText, setFilterText] = useState('')
   const [selectedPill, setSelectedPill] = useState(Pills.TRACKS)
   const [selectedTrackFilter, setSelectedTrackFilter] =
@@ -69,14 +62,6 @@ export const ArtistContentSection = () => {
     (!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)
@@ -156,13 +141,11 @@ export const ArtistContentSection = () => {
         <ArtistDashboardTracksTab
           selectedFilter={selectedTrackFilter}
           filterText={filterText}
-          onClickRow={onClickRow}
         />
       ) : (
         <ArtistDashboardAlbumsTab
           selectedFilter={selectedAlbumFilter}
           filterText={filterText}
-          onClickRow={onClickRow}
         />
       )}
     </Paper>

diff --git a/...s/dashboard-page/components/AlbumsTab.tsx → ...e/components/ArtistDashboardAlbumsTab.tsx b/...s/dashboard-page/components/AlbumsTab.tsx → ...e/components/ArtistDashboardAlbumsTab.tsx
@@ -1,8 +1,11 @@
+import { useCallback } from 'react'
+
 import { Nullable } from '@audius/common/utils'
 import { Paper } from '@audius/harmony'
 import { useSelector } from 'react-redux'
 
 import { TracksTable, TracksTableColumn } from 'components/tracks-table'
+import { useGoToRoute } from 'hooks/useGoToRoute'
 
 import { makeGetDashboard } from '../store/selectors'
 
@@ -21,20 +24,27 @@ const albumTableColumns: TracksTableColumn[] = [
 type ArtistDashboardAlbumsTabProps = {
   selectedFilter: Nullable<AlbumFilters>
   filterText: string
-  onClickRow: (record: any) => void
 }
 
 export const ArtistDashboardAlbumsTab = ({
   selectedFilter,
-  filterText,
-  onClickRow
+  filterText
 }: ArtistDashboardAlbumsTabProps) => {
+  const goToRoute = useGoToRoute()
   const { account } = useSelector(makeGetDashboard())
   const filteredData = useFilteredAlbumData({
     selectedFilter,
     filterText
   })
 
+  const onClickRow = useCallback(
+    (collection: any) => {
+      if (!account) return
+      goToRoute(collection.permalink)
+    },
+    [account, goToRoute]
+  )
+
   if (!filteredData.length || !account) return null
 
   return (

diff --git a/...s/dashboard-page/components/TracksTab.tsx → ...e/components/ArtistDashboardTracksTab.tsx b/...s/dashboard-page/components/TracksTab.tsx → ...e/components/ArtistDashboardTracksTab.tsx
@@ -5,6 +5,7 @@ import { Nullable } from '@audius/common/utils'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { TracksTable, TracksTableColumn } from 'components/tracks-table'
+import { useGoToRoute } from 'hooks/useGoToRoute'
 
 import { getDashboardTracksStatus, makeGetDashboard } from '../store/selectors'
 import { fetchTracks } from '../store/slice'
@@ -26,17 +27,20 @@ const tracksTableColumns: TracksTableColumn[] = [
 type ArtistDashboardTracksTabProps = {
   selectedFilter: Nullable<TrackFilters>
   filterText: string
-  onClickRow: (record: any) => void
 }
 
 export const ArtistDashboardTracksTab = ({
   selectedFilter,
-  filterText,
-  onClickRow
+  filterText
 }: ArtistDashboardTracksTabProps) => {
   const dispatch = useDispatch()
+  const goToRoute = useGoToRoute()
   const tracksStatus = useSelector(getDashboardTracksStatus)
   const { account } = useSelector(makeGetDashboard())
+  const filteredData = useFilteredTrackData({
+    selectedFilter,
+    filterText
+  })
 
   const handleFetchPage = useCallback(
     (page: number) => {
@@ -47,10 +51,13 @@ export const ArtistDashboardTracksTab = ({
     [dispatch]
   )
 
-  const filteredData = useFilteredTrackData({
-    selectedFilter,
-    filterText
-  })
+  const onClickRow = useCallback(
+    (track: any) => {
+      if (!account) return
+      goToRoute(track.permalink)
+    },
+    [account, goToRoute]
+  )
 
   if (!filteredData.length || !account) return null
 

diff --git a/packages/web/src/pages/dashboard-page/components/hooks.ts b/packages/web/src/pages/dashboard-page/components/hooks.ts
@@ -53,13 +53,22 @@ const formatTrackMetadata = (metadata: Track, i: number): DataSourceTrack => {
   }
 }
 
+/** Returns the logged-in user's tracks, formatted for Artist Dashboard tracks table */
 export const useFormattedTrackData = () => {
   const { tracks } = useSelector(makeGetDashboard())
-  return tracks
-    .map((track: Track, i: number) => formatTrackMetadata(track, i))
-    .filter((meta) => !meta.is_invalid)
+  const tracksFormatted = useMemo(() => {
+    return tracks
+      .map((track: Track, i: number) => formatTrackMetadata(track, i))
+      .filter((meta) => !meta.is_invalid)
+  }, [tracks])
+  return tracksFormatted
 }
 
+/**
+ * Returns a set of arrays that contain the logged-in user's tracks filtered by
+ * whether the tracks are public, special access, hidden, premium, or collectible gated.
+ * Also returns a boolean indicating whether the user has only one type of track.
+ */
 const useSegregatedTrackData = () => {
   const tracks = useFormattedTrackData()
   const {
@@ -121,6 +130,9 @@ const useSegregatedTrackData = () => {
   }
 }
 
+/**
+ * Returns the logged-in user's tracks, filtered by the selected filter and search text.
+ */
 export const useFilteredTrackData = ({
   selectedFilter,
   filterText
@@ -181,6 +193,10 @@ export const useFilteredTrackData = ({
   return filteredData
 }
 
+/**
+ * Returns a list of filter options for the logged-in user's tracks, eg.
+ * the "hidden" option will only be available if the user has hidden tracks.
+ */
 export const useArtistDashboardTrackFilters = () => {
   const {
     specialAccessTracks,
@@ -250,9 +266,13 @@ const formatAlbumMetadata = (album: Collection): DataSourceAlbum => {
   }
 }
 
+/** Returns the logged-in user's albums, formatted for Artist Dashboard albums table */
 export const useFormattedAlbumData = () => {
-  const albums = useSelector(getAccountAlbums) ?? []
-  return albums?.map((album) => formatAlbumMetadata(album))
+  const albums = useSelector(getAccountAlbums)
+  const albumsFormatted = useMemo(() => {
+    return albums?.map((album) => formatAlbumMetadata(album))
+  }, [albums])
+  return albumsFormatted ?? []
 }
 
 const useSegregatedAlbumData = () => {
@@ -285,6 +305,9 @@ const useSegregatedAlbumData = () => {
   return { hasOnlyOneSection, publicAlbums, hiddenAlbums, premiumAlbums }
 }
 
+/**
+ * Returns the logged-in user's albums, filtered by the selected filter and search text.
+ */
 export const useFilteredAlbumData = ({
   selectedFilter,
   filterText
@@ -331,6 +354,10 @@ export const useFilteredAlbumData = ({
   return filteredData
 }
 
+/**
+ * Returns a list of filter options for the logged-in user's albums, eg.
+ * the "hidden" option will only be available if the user has hidden albums.
+ */
 export const useArtistDashboardAlbumFilters = () => {
   const { hiddenAlbums, premiumAlbums, hasOnlyOneSection } =
     useSegregatedAlbumData()