10686111680

Committed 03 Sep 2024 03:34PM UTC coverage: 97.399% (-0.07%) from 97.466%

Build # 10686111680

Build Type

Pull #464

github

Committed by

ErykKul

Commit Message

added a gap between the drop zone and the file list

Pull Request Pull Request #464: Feature/417 File upload integration

Run Details

1276 of 1330 branches covered (95.94%)

Branch coverage included in aggregate %.

36 of 36 new or added lines in 3 files covered. (100.0%)

1 existing line in 1 file now uncovered.

3405 of 3476 relevant lines covered (97.96%)

9377.49 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.94

/src/sections/upload-dataset-files/UploadDatasetFiles.tsx

import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { md5 } from 'js-md5'
import { Semaphore } from 'async-mutex'
import { useNavigate } from 'react-router-dom'
import { FileRepository } from '../../files/domain/repositories/FileRepository'
import { useLoading } from '../loading/LoadingContext'
import { useDataset } from '../dataset/DatasetContext'
import { PageNotFound } from '../page-not-found/PageNotFound'
import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
import { FileUploader } from './FileUploader'
import { FileUploadState, FileUploadTools } from '../../files/domain/models/FileUploadState'
import { uploadFile } from '../../files/domain/useCases/uploadFile'
import { UploadedFiles } from './uploaded-files-list/UploadedFiles'
import { addUploadedFiles } from '../../files/domain/useCases/addUploadedFiles'
import { Route } from '../Route.enum'
import { Stack } from '@iqss/dataverse-design-system'

interface UploadDatasetFilesProps {
  fileRepository: FileRepository
}

export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDatasetFilesProps) => {
  const { setIsLoading } = useLoading()
  const { dataset, isLoading } = useDataset()
  const { t } = useTranslation('uploadDatasetFiles')
  const [fileUploaderState, setState] = useState(FileUploadTools.createNewState([]))
  const [uploadingToCancelMap, setUploadingToCancelMap] = useState(new Map<string, () => void>())
  const navigate = useNavigate()

  const limit = 6
  const semaphore = new Semaphore(limit)

  const fileUploadFailed = (file: File) => {
    setUploadingToCancelMap((x) => {
      x.delete(FileUploadTools.key(file))
      return x
    })
    semaphore.release(1)
  }

  const fileUploadFinished = (file: File) => {
    const hash = md5.create()
    const reader = file.stream().getReader()
    reader
      .read()
      .then(async function updateHash({ done, value }) {
        if (done) {
          FileUploadTools.checksum(file, hash.hex(), fileUploaderState)
        } else {
          hash.update(value)
          await updateHash(await reader.read())
        }
      })
      .finally(() => {
        setUploadingToCancelMap((x) => {
          x.delete(FileUploadTools.key(file))
          return x
        })
        semaphore.release(1)
      })
  }

  const canUpload = (file: File) =>
    !uploadingToCancelMap.has(FileUploadTools.key(file)) &&
    !FileUploadTools.get(file, fileUploaderState).failed &&
    !FileUploadTools.get(file, fileUploaderState).done

  const uploadOneFile = (file: File) => {
    // sanity check: should not happen
    /* istanbul ignore next */
    if (!canUpload(file)) {
      return
    }
    const key = FileUploadTools.key(file)
    setState(FileUploadTools.showProgressBar(file, fileUploaderState))
    const cancel = uploadFile(
      fileRepository,
      dataset?.persistentId as string,
      file,
      () => {
        setState(FileUploadTools.done(file, fileUploaderState))
        fileUploadFinished(file)
      },
      () => {
        setState(FileUploadTools.failed(file, fileUploaderState))
        fileUploadFailed(file)
      },
      (now) => setState(FileUploadTools.progress(file, now, fileUploaderState)),
      (storageId) => setState(FileUploadTools.storageId(file, storageId, fileUploaderState))
    )
    setUploadingToCancelMap((x) => x.set(key, cancel))
  }

  const upload = async (file: File) => {
    await semaphore.acquire(1)
    uploadOneFile(file)
  }

  const cleanup = (file: File) => {
    const key = FileUploadTools.key(file)
    const cancel = uploadingToCancelMap.get(key)
    if (cancel) {
      cancel()
    }
    setUploadingToCancelMap((x) => {
      x.delete(key)
      return x
    })
  }

  const cancelUpload = (file: File) => {
    cleanup(file)
    setState(FileUploadTools.removed(file, fileUploaderState))
  }

  const updateFiles = (fileUploadState: FileUploadState[]) => {
    setState((x) => {
      fileUploadState.forEach((file) => {
        x.state.set(file.key, file)
      })
      return { state: x.state, uploaded: x.uploaded }
    })
  }

  const cleanFileState = (file: File) => {
    cleanup(file)
    setState(FileUploadTools.delete(file, fileUploaderState))
  }

  const cleanAllState = () => {
    setState((x) => {
      Array.from(x.state.values()).forEach((fileUploadState) => {
        fileUploadState.removed = true
      })
      return { state: x.state, uploaded: x.uploaded }
    })
  }

  const addFiles = (state: FileUploadState[]) => {
    setIsLoading(true)
    const done = () => {
      setIsLoading(false)
      navigate(`${Route.DATASETS}?persistentId=${dataset?.persistentId as string}&version=:draft`)
    }
    const uploadedFiles = FileUploadTools.mapToUploadedFilesDTOs(state)
    addUploadedFiles(fileRepository, dataset?.persistentId as string, uploadedFiles, done)
    cleanAllState()
  }

  const saveDisabled = () =>
    Array.from(fileUploaderState.state.values()).some((x) => !(x.failed || x.done || x.removed))

  useEffect(() => {
    setIsLoading(isLoading)
  }, [isLoading, setIsLoading])

  if (isLoading) {
    return <p>Temporary Loading until having shape of skeleton</p>
  }

  return (
    <>
      {!dataset ? (
        <PageNotFound />
      ) : (
        <>
          <BreadcrumbsGenerator
            hierarchy={dataset.hierarchy}
            withActionItem
            actionItemText={t('breadcrumbActionItem')}
          />
          <article>
            <Stack direction="vertical" gap={3}>
              <FileUploader
                upload={upload}
                cancelTitle={t('cancel')}
                info={t('info')}
                selectText={t('select')}
                fileUploaderState={fileUploaderState}
                cancelUpload={cancelUpload}
                cleanFileState={cleanFileState}
              />
              <UploadedFiles
                fileUploadState={fileUploaderState.uploaded}
                cancelTitle={t('delete')}
                saveDisabled={saveDisabled()}
                updateFiles={updateFiles}
                cleanup={cleanAllState}
                addFiles={addFiles}
              />
            </Stack>
          </article>
        </>
      )}
    </>
  )
}

1	import { useEffect, useState } from 'react'
2	import { useTranslation } from 'react-i18next'
3	import { md5 } from 'js-md5'
4	import { Semaphore } from 'async-mutex'
5	import { useNavigate } from 'react-router-dom'
6	import { FileRepository } from '../../files/domain/repositories/FileRepository'
7	import { useLoading } from '../loading/LoadingContext'
8	import { useDataset } from '../dataset/DatasetContext'
9	import { PageNotFound } from '../page-not-found/PageNotFound'
10	import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
11	import { FileUploader } from './FileUploader'
12	import { FileUploadState, FileUploadTools } from '../../files/domain/models/FileUploadState'
13	import { uploadFile } from '../../files/domain/useCases/uploadFile'
14	import { UploadedFiles } from './uploaded-files-list/UploadedFiles'
15	import { addUploadedFiles } from '../../files/domain/useCases/addUploadedFiles'
16	import { Route } from '../Route.enum'
17	import { Stack } from '@iqss/dataverse-design-system'
18
19	interface UploadDatasetFilesProps {
20	fileRepository: FileRepository
21	}
22
23	export const UploadDatasetFiles = ({ fileRepository: fileRepository }: UploadDatasetFilesProps) => {	1,514✔
24	const { setIsLoading } = useLoading()	1,514✔
25	const { dataset, isLoading } = useDataset()	1,514✔
26	const { t } = useTranslation('uploadDatasetFiles')	1,514✔
27	const [fileUploaderState, setState] = useState(FileUploadTools.createNewState([]))	1,495✔
28	const [uploadingToCancelMap, setUploadingToCancelMap] = useState(new Map<string, () => void>())	1,495✔
29	const navigate = useNavigate()	1,495✔
30
31	const limit = 6	1,495✔
32	const semaphore = new Semaphore(limit)	1,495✔
33
34	const fileUploadFailed = (file: File) => {	1,495✔
35	setUploadingToCancelMap((x) => {	25✔
36	x.delete(FileUploadTools.key(file))	25✔
37	return x	25✔
38	})
39	semaphore.release(1)	25✔
40	}
41
42	const fileUploadFinished = (file: File) => {	1,495✔
43	const hash = md5.create()	142✔
44	const reader = file.stream().getReader()	142✔
45	reader	142✔
46	.read()
47	.then(async function updateHash({ done, value }) {
48	if (done) {	284✔
49	FileUploadTools.checksum(file, hash.hex(), fileUploaderState)	142✔
50	} else {
51	hash.update(value)	142✔
52	await updateHash(await reader.read())	142✔
53	}
54	})
55	.finally(() => {
56	setUploadingToCancelMap((x) => {	142✔
57	x.delete(FileUploadTools.key(file))	79✔
58	return x	79✔
59	})
60	semaphore.release(1)	142✔
61	})
62	}
63
64	const canUpload = (file: File) =>	1,495✔
65	!uploadingToCancelMap.has(FileUploadTools.key(file)) &&	203✔
66	!FileUploadTools.get(file, fileUploaderState).failed &&
67	!FileUploadTools.get(file, fileUploaderState).done
68
69	const uploadOneFile = (file: File) => {	1,495✔
70	// sanity check: should not happen
71	/* istanbul ignore next */
72	if (!canUpload(file)) {	203!
UNCOV 73	return	×
74	}
75	const key = FileUploadTools.key(file)	203✔
76	setState(FileUploadTools.showProgressBar(file, fileUploaderState))	203✔
77	const cancel = uploadFile(	203✔
78	fileRepository,
79	dataset?.persistentId as string,
80	file,
81	() => {
82	setState(FileUploadTools.done(file, fileUploaderState))	142✔
83	fileUploadFinished(file)	142✔
84	},
85	() => {
86	setState(FileUploadTools.failed(file, fileUploaderState))	25✔
87	fileUploadFailed(file)	25✔
88	},
89	(now) => setState(FileUploadTools.progress(file, now, fileUploaderState)),	719✔
90	(storageId) => setState(FileUploadTools.storageId(file, storageId, fileUploaderState))	142✔
91	)
92	setUploadingToCancelMap((x) => x.set(key, cancel))	203✔
93	}
94
95	const upload = async (file: File) => {	1,495✔
96	await semaphore.acquire(1)	203✔
97	uploadOneFile(file)	203✔
98	}
99
100	const cleanup = (file: File) => {	1,495✔
101	const key = FileUploadTools.key(file)	92✔
102	const cancel = uploadingToCancelMap.get(key)	92✔
103	if (cancel) {	92✔
104	cancel()	14✔
105	}
106	setUploadingToCancelMap((x) => {	92✔
107	x.delete(key)	92✔
108	return x	92✔
109	})
110	}
111
112	const cancelUpload = (file: File) => {	1,495✔
113	cleanup(file)	14✔
114	setState(FileUploadTools.removed(file, fileUploaderState))	14✔
115	}
116
117	const updateFiles = (fileUploadState: FileUploadState[]) => {	1,495✔
118	setState((x) => {	210✔
119	fileUploadState.forEach((file) => {	210✔
120	x.state.set(file.key, file)	230✔
121	})
122	return { state: x.state, uploaded: x.uploaded }	210✔
123	})
124	}
125
126	const cleanFileState = (file: File) => {	1,495✔
127	cleanup(file)	78✔
128	setState(FileUploadTools.delete(file, fileUploaderState))	78✔
129	}
130
131	const cleanAllState = () => {	1,495✔
132	setState((x) => {	41✔
133	Array.from(x.state.values()).forEach((fileUploadState) => {	41✔
134	fileUploadState.removed = true	82✔
135	})
136	return { state: x.state, uploaded: x.uploaded }	41✔
137	})
138	}
139
140	const addFiles = (state: FileUploadState[]) => {	1,495✔
141	setIsLoading(true)	17✔
142	const done = () => {	17✔
143	setIsLoading(false)	15✔
144	navigate(`${Route.DATASETS}?persistentId=${dataset?.persistentId as string}&version=:draft`)	15✔
145	}
146	const uploadedFiles = FileUploadTools.mapToUploadedFilesDTOs(state)	17✔
147	addUploadedFiles(fileRepository, dataset?.persistentId as string, uploadedFiles, done)	17✔
148	cleanAllState()	17✔
149	}
150
151	const saveDisabled = () =>	1,495✔
152	Array.from(fileUploaderState.state.values()).some((x) => !(x.failed \|\| x.done \|\| x.removed))	1,255✔
153
154	useEffect(() => {	1,495✔
155	setIsLoading(isLoading)	378✔
156	}, [isLoading, setIsLoading])
157
158	if (isLoading) {	1,495✔
159	return <p>Temporary Loading until having shape of skeleton</p>	189✔
160	}
161
162	return (	1,306✔
163	<>
164	{!dataset ? (	1,306✔
165	<PageNotFound />
166	) : (
167	<>
168	<BreadcrumbsGenerator
169	hierarchy={dataset.hierarchy}
170	withActionItem
171	actionItemText={t('breadcrumbActionItem')}
172	/>
173	<article>
174	<Stack direction="vertical" gap={3}>
175	<FileUploader
176	upload={upload}
177	cancelTitle={t('cancel')}
178	info={t('info')}
179	selectText={t('select')}
180	fileUploaderState={fileUploaderState}
181	cancelUpload={cancelUpload}
182	cleanFileState={cleanFileState}
183	/>
184	<UploadedFiles
185	fileUploadState={fileUploaderState.uploaded}
186	cancelTitle={t('delete')}
187	saveDisabled={saveDisabled()}
188	updateFiles={updateFiles}
189	cleanup={cleanAllState}
190	addFiles={addFiles}
191	/>
192	</Stack>
193	</article>
194	</>
195	)}
196	</>
197	)
198	}	19✔

IQSS / dataverse-frontend / 10686111680

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous