feat(FilePage): add file not found state

src/files/domain/repositories/FileRepository.ts

@@ -24,5 +24,5 @@ export interface FileRepository {
     criteria?: FileCriteria
   ) => Promise<number>
   getUserPermissionsById: (id: number) => Promise<FileUserPermissions>
-  getById: (id: number) => Promise<File>
+  getById: (id: number) => Promise<File | undefined>
 }

src/files/domain/useCases/getFileById.ts

@@ -1,7 +1,10 @@
 import { FileRepository } from '../repositories/FileRepository'
 import { File } from '../models/File'
 
-export async function getFileById(repository: FileRepository, id: number): Promise<File> {
+export async function getFileById(
+  repository: FileRepository,
+  id: number
+): Promise<File | undefined> {
   return repository.getById(id).catch((error: Error) => {
     throw new Error(error.message)
   })

src/sections/file/useFile.tsx

@@ -11,7 +11,7 @@ export function useFile(repository: FileRepository, id: number) {
     setIsLoading(true)
 
     getFileById(repository, id)
-      .then((file: File) => {
+      .then((file: File | undefined) => {
         setFile(file)
         setIsLoading(false)
       })

src/stories/files/File.stories.tsx

@@ -4,6 +4,7 @@ import { FileMockRepository } from './FileMockRepository'
 import { File } from '../../sections/file/File'
 import { WithLayout } from '../WithLayout'
 import { FileMockLoadingRepository } from './FileMockLoadingRepository'
+import { FileMockNoDataRepository } from './FileMockNoDataRepository'
 
 const meta: Meta<typeof File> = {
   title: 'Pages/File',
@@ -21,3 +22,7 @@ export const Default: Story = {
 export const Loading: Story = {
   render: () => <File repository={new FileMockLoadingRepository()} id={56} />
 }
+
+export const FileNotFound: Story = {
+  render: () => <File repository={new FileMockNoDataRepository()} id={56} />
+}

src/stories/files/FileMockNoDataRepository.ts

@@ -5,6 +5,7 @@ import { FilesCountInfoMother } from '../../../tests/component/files/domain/mode
 import { DatasetVersion } from '../../dataset/domain/models/Dataset'
 import { FileCriteria } from '../../files/domain/models/FileCriteria'
 import { FileMockRepository } from './FileMockRepository'
+import { File } from '../../files/domain/models/File'
 
 export class FileMockNoDataRepository extends FileMockRepository implements FileRepository {
   getAllByDatasetPersistentId(
@@ -47,4 +48,13 @@ export class FileMockNoDataRepository extends FileMockRepository implements File
       }, 1000)
     })
   }
+
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  getById(id: number): Promise<File | undefined> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(undefined)
+      }, 1000)
+    })
+  }
 }

src/stories/files/FileMockRepository.ts

@@ -63,7 +63,7 @@ export class FileMockRepository implements FileRepository {
   }
 
   // eslint-disable-next-line unused-imports/no-unused-vars
-  getById(id: number): Promise<File> {
+  getById(id: number): Promise<File | undefined> {
     return new Promise((resolve) => {
       setTimeout(() => {
         resolve(FileMother.createRealistic())

tests/component/sections/file/File.spec.tsx

@@ -27,4 +27,12 @@ describe('File', () => {
     cy.wrap(fileRepository.getById).should('be.calledWith', 19)
     cy.findByText(testFile.name).should('not.exist')
   })
+
+  it('renders page not found when file is not found', () => {
+    fileRepository.getById = cy.stub().resolves(undefined)
+
+    cy.customMount(<File repository={fileRepository} id={19} />)
+
+    cy.findByText('Page Not Found').should('exist')
+  })
 })