[PE-6092, PE-6093] Update stem uploads to update download rows

packages/web/src/common/store/upload/sagas.ts

@@ -2,18 +2,20 @@ import {
   albumMetadataForSDK,
   fileToSdk,
   playlistMetadataForCreateWithSDK,
+  stemTrackMetadataFromSDK,
   trackMetadataForUploadToSdk,
   transformAndCleanList,
   userCollectionMetadataFromSDK
 } from '@audius/common/adapters'
-import { queryUser } from '@audius/common/api'
+import { getStemsQueryKey, queryUser } from '@audius/common/api'
 import {
   Collection,
   Feature,
   FieldVisibility,
   ID,
   Kind,
   Name,
+  StemTrack,
   StemUploadWithFile,
   isContentFollowGated,
   isContentUSDCPurchaseGated
@@ -414,6 +416,8 @@ export function* handleUploads({
   kind: 'album' | 'playlist' | 'tracks' | 'stems'
 }) {
   const isCollection = kind === 'album' || kind === 'playlist'
+  const queryClient = yield* getContext('queryClient')
+  const userId = (yield* select(getUserId))!
 
   // Queue for the upload tasks (uploading files to storage)
   const uploadQueue = yield* call(
@@ -530,6 +534,27 @@ export function* handleUploads({
       { trackIndex, stemIndex }
     )
 
+    if (payload.metadata.stemOf?.parentTrackId) {
+      const parentTrackId = payload.metadata.stemOf.parentTrackId
+
+      queryClient.setQueryData(
+        getStemsQueryKey(parentTrackId),
+        (currentStems: StemTrack[] | undefined) => {
+          const newStem = stemTrackMetadataFromSDK({
+            ...payload.metadata,
+            id: Id.parse(parentTrackId + (payload.trackIndex + 1 + Date.now())),
+            parentId: Id.parse(parentTrackId),
+            userId: Id.parse(userId),
+            blocknumber: 0,
+            cid: '',
+            category: payload.metadata.stemOf!.category!,
+            origFilename: payload.metadata.origFilename!
+          })
+          return [...(currentStems ?? []), newStem!]
+        }
+      )
+    }
+
     // We know trackId exists because we generate it in uploadMultipleTracks
     const trackId = metadata.trackId!
     const stemCount = pendingStemCount[trackId]

packages/web/src/components/track/DownloadSection.tsx

@@ -29,7 +29,8 @@ import {
   IconReceive,
   Button,
   IconCaretDown,
-  IconLockUnlocked
+  IconLockUnlocked,
+  LoadingSpinner
 } from '@audius/harmony'
 import { useDispatch } from 'react-redux'
 
@@ -88,6 +89,12 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
     shouldDisplayOwnerPremiumDownloads
   } = useDownloadableContentAccess({ trackId })
 
+  // Filter out uploading stems that are already in the stemTracks array
+  const filteredUploadingStems = uploadingStems.filter(
+    (s) => !stemTracks.find((t) => t.orig_filename === s.name)
+  )
+  const isUploadingStems = filteredUploadingStems.length > 0
+
   const { isEnabled: isDownloadAllTrackFilesEnabled } = useFeatureFlag(
     FeatureFlags.DOWNLOAD_ALL_TRACK_FILES
   )
@@ -179,6 +186,18 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
     [trackId, stemTracks]
   )
 
+  const renderDownloadAllButton = () => {
+    if (shouldHideDownload || !isDownloadAllTrackFilesEnabled) {
+      return null
+    }
+
+    return (
+      <Button variant='secondary' size='small' onClick={handleDownloadAll}>
+        {messages.downloadAll}
+      </Button>
+    )
+  }
+
   return (
     <Box border='default' borderRadius='m' css={{ overflow: 'hidden' }}>
       <Flex column>
@@ -229,14 +248,10 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
             gap='m'
             role='row'
           >
-            {shouldHideDownload || !isDownloadAllTrackFilesEnabled ? null : (
-              <Button
-                variant='secondary'
-                size='small'
-                onClick={handleDownloadAll}
-              >
-                {messages.downloadAll}
-              </Button>
+            {isUploadingStems ? (
+              <LoadingSpinner size='xl' />
+            ) : (
+              renderDownloadAllButton()
             )}
 
             {shouldDisplayPremiumDownloadUnlocked ? (
@@ -297,6 +312,8 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
                 trackId={stemTrack.track_id}
                 parentTrackId={trackId}
                 key={stemTrack.track_id}
+                category={stemTrack.stem_of?.category}
+                filename={stemTrack.orig_filename ?? undefined}
                 onDownload={handleDownload}
                 hideDownload={shouldHideDownload}
                 size={fileSizes?.[stemTrack.track_id]?.[downloadQuality]}
@@ -308,7 +325,7 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
                 }
               />
             ))}
-            {uploadingStems.map((s, i) => (
+            {filteredUploadingStems.map((s, i) => (
               <DownloadRow
                 key={`uploading-stem-${i}`}
                 onDownload={() => {}}