Merge pull request #1536 from nickgros/PORTALS-2651-download-table

packages/synapse-react-client/src/components/DownloadCart/AvailableForDownloadTable.tsx

@@ -1,20 +1,18 @@
 import { useSynapseContext } from '../../utils'
-import DownloadListTable, { DownloadListTableProps } from './DownloadListTable'
+import DownloadListTable from './DownloadListTable'
 import { SynapseErrorBoundary } from '../error/ErrorBanner'
 
 /**
  * Table of the files added to the Download Cart that are currently available for download.
  */
-export default function AvailableForDownloadTable(
-  props: DownloadListTableProps,
-) {
+export default function AvailableForDownloadTable() {
   const { accessToken } = useSynapseContext()
   if (!accessToken) {
     return <></>
   }
   return (
     <SynapseErrorBoundary>
-      {props.filesStatistics && <DownloadListTable {...props} />}
+      <DownloadListTable />
     </SynapseErrorBoundary>
   )
 }

packages/synapse-react-client/src/components/DownloadCart/DownloadCartPage.tsx

@@ -298,15 +298,7 @@ export function DownloadCartPage(props: DownloadListActionsRequiredProps) {
                     }}
                   />
                 )}
-                <AvailableForDownloadTable
-                  filesStatistics={data}
-                  refetchStatistics={refetch}
-                  numBytes={data.sumOfFileSizesAvailableForDownload}
-                  numPackagableFiles={
-                    data.numberOfFilesAvailableForDownloadAndEligibleForPackaging
-                  }
-                  numFiles={data.numberOfFilesAvailableForDownload}
-                />
+                <AvailableForDownloadTable />
               </div>
             </div>
           )}

packages/synapse-react-client/src/components/DownloadCart/DownloadListStats.tsx

@@ -1,25 +1,22 @@
+import { useGetDownloadListStatistics } from '../../synapse-queries/index'
 import DownloadDetails from './DownloadDetails'
 
-export type DownloadListStatsProps = {
-  numFiles: number
-  numPackagableFiles: number
-  numBytes: number
-}
+export default function DownloadListStats() {
+  const { data } = useGetDownloadListStatistics({ throwOnError: true })
 
-export default function DownloadListStats(props: DownloadListStatsProps) {
-  const { numFiles, numPackagableFiles, numBytes } = props
+  if (!data) {
+    return null
+  }
 
   return (
     <div>
       <DownloadDetails
-        numFiles={numFiles}
-        numPackagableFiles={numPackagableFiles}
-        numBytes={numBytes}
-      ></DownloadDetails>
-      {
-        // also have access to fileStats.numberOfFilesRequiringAction
-        // and fileStats.totalNumberOfFiles
-      }
+        numBytes={data.sumOfFileSizesAvailableForDownload}
+        numPackagableFiles={
+          data.numberOfFilesAvailableForDownloadAndEligibleForPackaging
+        }
+        numFiles={data.numberOfFilesAvailableForDownload}
+      />
     </div>
   )
 }

packages/synapse-react-client/src/components/DownloadCart/DownloadListTable.test.tsx

@@ -1,18 +1,16 @@
 import '@testing-library/jest-dom'
-import { act, render, screen } from '@testing-library/react'
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
-import { mockUserProfileData } from '../../mocks/user/mock_user_profile'
-import { mockFileStatistics } from '../../mocks/mock_file_statistics'
-import userEvent from '@testing-library/user-event'
-import DownloadListTableV2 from './DownloadListTable'
 import {
   AvailableFilesResponse,
   DownloadListItemResult,
 } from '@sage-bionetworks/synapse-types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { SynapseTestContext } from '../../mocks/MockSynapseContext'
+import { mockUserProfileData } from '../../mocks/user/mock_user_profile'
 import SynapseClient from '../../synapse-client'
+import DownloadListTableV2 from './DownloadListTable'
 
-jest.spyOn(SynapseClient, 'removeItemFromDownloadListV2').mockResolvedValue({
+jest.spyOn(SynapseClient, 'removeItemsFromDownloadListV2').mockResolvedValue({
   numberOfFilesRemoved: 2,
 })
 
@@ -23,8 +21,6 @@ jest
   .spyOn(SynapseClient, 'getProfilePicPreviewPresignedUrl')
   .mockResolvedValue(null)
 
-const mockRefetchStatistics = jest.fn()
-
 const page1: DownloadListItemResult[] = [
   {
     fileEntityId: 'syn1',
@@ -77,13 +73,7 @@ jest
 function renderComponent() {
   return render(
     <SynapseTestContext>
-      <DownloadListTableV2
-        filesStatistics={mockFileStatistics}
-        refetchStatistics={mockRefetchStatistics}
-        numBytes={100}
-        numPackagableFiles={5}
-        numFiles={6}
-      />
+      <DownloadListTableV2 />
     </SynapseTestContext>,
   )
 }
@@ -92,16 +82,14 @@ describe('DownloadListTable tests', () => {
   beforeEach(() => {
     jest.clearAllMocks()
   })
-  it('loads more available download files when inView', async () => {
+  it('loads more available download files when "show more" is clicked', async () => {
     renderComponent()
 
     const fileEntity1 = await screen.findAllByText('file1.txt')
     expect(fileEntity1).toHaveLength(1)
 
     // trigger fetching page 2
-    act(() => {
-      mockAllIsIntersecting(true)
-    })
+    await userEvent.click(screen.getByRole('button', { name: 'Show More' }))
 
     const fileEntity2 = await screen.findAllByText('file2.txt')
     expect(fileEntity2).toHaveLength(1)