mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-13 13:19:25 -05:00
136 lines
3.5 KiB
TypeScript
136 lines
3.5 KiB
TypeScript
|
import { FileTreeEntity } from '../../../../../../types/file-tree-entity'
|
||
|
import { useTranslation } from 'react-i18next'
|
||
|
import { useProjectContext } from '@/shared/context/project-context'
|
||
|
import { useCallback } from 'react'
|
||
|
import { syncDelete } from '@/features/file-tree/util/sync-mutation'
|
||
|
import { Button } from 'react-bootstrap'
|
||
|
|
||
|
export function UploadConflicts({
|
||
|
cancel,
|
||
|
conflicts,
|
||
|
folderConflicts,
|
||
|
handleOverwrite,
|
||
|
setError,
|
||
|
}: {
|
||
|
cancel: () => void
|
||
|
conflicts: FileTreeEntity[]
|
||
|
folderConflicts: FileTreeEntity[]
|
||
|
handleOverwrite: () => void
|
||
|
setError: (error: string) => void
|
||
|
}) {
|
||
|
const { t } = useTranslation()
|
||
|
|
||
|
// ensure that no uploads happen while there are folder conflicts
|
||
|
if (folderConflicts.length > 0) {
|
||
|
return (
|
||
|
<FolderUploadConflicts
|
||
|
cancel={cancel}
|
||
|
folderConflicts={folderConflicts}
|
||
|
handleOverwrite={handleOverwrite}
|
||
|
setError={setError}
|
||
|
/>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<div className="small modal-new-file--body-conflict">
|
||
|
{conflicts.length > 0 && (
|
||
|
<>
|
||
|
<p className="text-center mb-0">
|
||
|
{t('the_following_files_already_exist_in_this_project')}
|
||
|
</p>
|
||
|
|
||
|
<ul className="text-center list-unstyled row-spaced-small mt-1">
|
||
|
{conflicts.map((conflict, index) => (
|
||
|
<li key={index}>
|
||
|
<strong>{conflict.name}</strong>
|
||
|
</li>
|
||
|
))}
|
||
|
</ul>
|
||
|
</>
|
||
|
)}
|
||
|
|
||
|
<p className="text-center row-spaced-small">
|
||
|
{t('do_you_want_to_overwrite_them')}
|
||
|
</p>
|
||
|
|
||
|
<p className="text-center">
|
||
|
<Button bsStyle={null} className="btn-secondary" onClick={cancel}>
|
||
|
{t('cancel')}
|
||
|
</Button>
|
||
|
|
||
|
<Button bsStyle="danger" onClick={handleOverwrite}>
|
||
|
{t('overwrite')}
|
||
|
</Button>
|
||
|
</p>
|
||
|
</div>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
function FolderUploadConflicts({
|
||
|
cancel,
|
||
|
handleOverwrite,
|
||
|
folderConflicts,
|
||
|
setError,
|
||
|
}: {
|
||
|
cancel: () => void
|
||
|
handleOverwrite: () => void
|
||
|
folderConflicts: FileTreeEntity[]
|
||
|
setError: (error: string) => void
|
||
|
}) {
|
||
|
const { t } = useTranslation()
|
||
|
const { _id: projectId } = useProjectContext()
|
||
|
|
||
|
const deleteAndRetry = useCallback(async () => {
|
||
|
// TODO: confirm deletion?
|
||
|
|
||
|
try {
|
||
|
await Promise.all(
|
||
|
folderConflicts.map(
|
||
|
entity => syncDelete(projectId, 'folder', entity._id) // TODO: might be a file!
|
||
|
)
|
||
|
)
|
||
|
|
||
|
handleOverwrite()
|
||
|
} catch (error: any) {
|
||
|
setError(error.message)
|
||
|
}
|
||
|
}, [setError, folderConflicts, handleOverwrite, projectId])
|
||
|
|
||
|
return (
|
||
|
<div className="small modal-new-file--body-conflict">
|
||
|
<p className="text-center mb-0">
|
||
|
{t('the_following_folder_already_exists_in_this_project', {
|
||
|
count: folderConflicts.length,
|
||
|
})}
|
||
|
</p>
|
||
|
|
||
|
<ul className="text-center list-unstyled row-spaced-small mt-1">
|
||
|
{folderConflicts.map((entity, index) => (
|
||
|
<li key={index}>
|
||
|
<strong>{entity.name}</strong>
|
||
|
</li>
|
||
|
))}
|
||
|
</ul>
|
||
|
|
||
|
<p className="text-center row-spaced-small">
|
||
|
{t('overwriting_the_original_folder')}
|
||
|
<br />
|
||
|
{t('do_you_want_to_overwrite_it', {
|
||
|
count: folderConflicts.length,
|
||
|
})}
|
||
|
</p>
|
||
|
|
||
|
<p className="text-center">
|
||
|
<Button bsStyle={null} className="btn-secondary" onClick={cancel}>
|
||
|
{t('cancel')}
|
||
|
</Button>
|
||
|
|
||
|
<Button bsStyle="danger" onClick={deleteAndRetry}>
|
||
|
{t('overwrite')}
|
||
|
</Button>
|
||
|
</p>
|
||
|
</div>
|
||
|
)
|
||
|
}
|