118 lines
3.8 KiB
TypeScript
Raw Normal View History

2021-02-22 22:37:29 -08:00
import React, { useEffect } from 'react'
import { useIntl } from 'react-intl'
import { useMutation } from 'react-query'
import FormControl from '@material-ui/core/FormControl'
import { useSelector } from 'react-redux'
2021-01-27 17:27:19 -08:00
2021-02-22 22:37:29 -08:00
import Client, { BasicMapInfo, ErrorInfo } from '../../../../classes/client'
import { activeInstance, fetchMapById } from '../../../../redux/clientSlice'
import Input from '../../../form/input'
import { SimpleDialogProps } from '..'
import BaseDialog from '../base-dialog'
2020-12-26 19:32:41 -08:00
2021-01-14 01:14:07 -08:00
export type DuplicateModel = {
2021-02-22 22:37:29 -08:00
id: number
title: string
description?: string
2020-12-26 19:32:41 -08:00
}
2021-02-22 22:37:29 -08:00
const defaultModel: DuplicateModel = { title: '', description: '', id: -1 }
2021-02-16 21:51:59 -08:00
const DuplicateDialog = ({ mapId, onClose }: SimpleDialogProps): React.ReactElement => {
2021-02-22 22:37:29 -08:00
const service: Client = useSelector(activeInstance)
const [model, setModel] = React.useState<DuplicateModel>(defaultModel)
const [error, setError] = React.useState<ErrorInfo>()
2020-12-26 19:32:41 -08:00
2021-02-22 22:37:29 -08:00
const intl = useIntl()
2020-12-26 19:32:41 -08:00
2021-02-22 22:37:29 -08:00
const mutation = useMutation<number, ErrorInfo, DuplicateModel>(
(model: DuplicateModel) => {
const { id, ...rest } = model
return service.duplicateMap(id, rest)
},
2020-12-26 19:32:41 -08:00
{
2021-02-04 10:23:58 -08:00
onSuccess: (mapId) => {
2021-02-22 22:37:29 -08:00
window.location.href = `/c/maps/${mapId}/edit`
2020-12-26 19:32:41 -08:00
},
onError: (error) => {
2021-02-22 22:37:29 -08:00
setError(error)
},
2020-12-26 19:32:41 -08:00
}
2021-02-22 22:37:29 -08:00
)
2020-12-26 19:32:41 -08:00
const handleOnClose = (): void => {
2021-02-22 22:37:29 -08:00
onClose()
}
2020-12-26 19:32:41 -08:00
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
2021-02-22 22:37:29 -08:00
event.preventDefault()
mutation.mutate(model)
}
2020-12-26 19:32:41 -08:00
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
2021-02-22 22:37:29 -08:00
event.preventDefault()
2020-12-26 19:32:41 -08:00
2021-02-22 22:37:29 -08:00
const name = event.target.name
const value = event.target.value
setModel({ ...model, [name as keyof BasicMapInfo]: value })
2020-12-26 19:32:41 -08:00
}
2021-02-22 22:37:29 -08:00
const { map } = fetchMapById(mapId)
2020-12-26 19:32:41 -08:00
useEffect(() => {
if (open && map) {
2021-02-22 22:37:29 -08:00
setModel(map)
2020-12-26 19:32:41 -08:00
} else {
2021-02-22 22:37:29 -08:00
setModel(defaultModel)
setError(undefined)
2020-12-26 19:32:41 -08:00
}
}, [mapId])
return (
<div>
2021-02-22 22:37:29 -08:00
<BaseDialog
onClose={handleOnClose}
onSubmit={handleOnSubmit}
error={error}
2021-01-27 17:27:19 -08:00
title={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}
2021-02-22 22:37:29 -08:00
description={intl.formatMessage({
id: 'rename.description',
defaultMessage: 'Please, fill the new map name and description.',
})}
submitButton={intl.formatMessage({
id: 'duplicate.title',
defaultMessage: 'Duplicate',
})}
>
2021-01-13 19:46:45 -08:00
<FormControl fullWidth={true}>
2021-02-22 22:37:29 -08:00
<Input
name="title"
type="text"
label={intl.formatMessage({
id: 'action.rename-name-placeholder',
defaultMessage: 'Name',
})}
value={model.title}
onChange={handleOnChange}
error={error}
fullWidth={true}
/>
2021-01-13 19:46:45 -08:00
2021-02-22 22:37:29 -08:00
<Input
name="description"
type="text"
label={intl.formatMessage({
id: 'action.rename-description-placeholder',
defaultMessage: 'Description',
})}
value={model.description}
onChange={handleOnChange}
required={false}
fullWidth={true}
/>
2021-01-13 19:46:45 -08:00
</FormControl>
</BaseDialog>
2021-01-31 18:04:50 -08:00
</div>
2021-02-22 22:37:29 -08:00
)
2020-12-26 19:32:41 -08:00
}
2021-02-22 22:37:29 -08:00
export default DuplicateDialog