overleaf/services/web/frontend/js/features/clone-project-modal/components/clone-project-modal-content.js
Davinder Singh 9cde88a9e8 Merge pull request #9584 from overleaf/jel-copy-modal-wrapper
[web] Add wrapper for copy modal

GitOrigin-RevId: 8291f953e418815797e8474a69de8f15c39af7b5
2022-09-16 08:04:49 +00:00

121 lines
2.9 KiB
JavaScript

import PropTypes from 'prop-types'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
Modal,
Alert,
Button,
ControlLabel,
FormControl,
FormGroup,
} from 'react-bootstrap'
import { postJSON } from '../../../infrastructure/fetch-json'
export default function CloneProjectModalContent({
handleHide,
inFlight,
setInFlight,
handleAfterCloned,
projectId,
projectName,
}) {
const { t } = useTranslation()
const [error, setError] = useState()
const [clonedProjectName, setClonedProjectName] = useState(
`${projectName} (Copy)`
)
// valid if the cloned project has a name
const valid = useMemo(
() => clonedProjectName.trim().length > 0,
[clonedProjectName]
)
// form submission: clone the project if the name is valid
const handleSubmit = event => {
event.preventDefault()
if (!valid) {
return
}
setError(false)
setInFlight(true)
// clone the project
postJSON(`/project/${projectId}/clone`, {
body: { projectName: clonedProjectName },
})
.then(data => {
// open the cloned project
handleAfterCloned(data)
})
.catch(({ response, data }) => {
if (response?.status === 400) {
setError(data.message)
} else {
setError(true)
}
})
.finally(() => {
setInFlight(false)
})
}
return (
<>
<Modal.Header closeButton>
<Modal.Title>{t('copy_project')}</Modal.Title>
</Modal.Header>
<Modal.Body>
<form id="clone-project-form" onSubmit={handleSubmit}>
<FormGroup>
<ControlLabel htmlFor="clone-project-form-name">
{t('new_name')}
</ControlLabel>
<FormControl
id="clone-project-form-name"
type="text"
placeholder="New Project Name"
required
value={clonedProjectName}
onChange={event => setClonedProjectName(event.target.value)}
/>
</FormGroup>
</form>
{error && (
<Alert bsStyle="danger">
{error.length ? error : t('generic_something_went_wrong')}
</Alert>
)}
</Modal.Body>
<Modal.Footer>
<Button type="button" disabled={inFlight} onClick={handleHide}>
{t('cancel')}
</Button>
<Button
form="clone-project-form"
type="submit"
bsStyle="primary"
disabled={inFlight || !valid}
>
{inFlight ? <>{t('copying')}</> : t('copy')}
</Button>
</Modal.Footer>
</>
)
}
CloneProjectModalContent.propTypes = {
handleHide: PropTypes.func.isRequired,
inFlight: PropTypes.bool,
setInFlight: PropTypes.func.isRequired,
handleAfterCloned: PropTypes.func.isRequired,
projectId: PropTypes.string,
projectName: PropTypes.string,
}