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