87 lines
3.0 KiB
TypeScript
Raw Normal View History

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";
import { useSelector } from "react-redux";
2020-12-27 09:58:21 -08:00
import { BasicMapInfo, ErrorInfo, Service } from "../../../services/Service";
import { activeInstance } from '../../../reducers/serviceSlice';
2020-12-26 19:32:41 -08:00
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
2020-12-27 16:37:10 -08:00
import Dialog from "./Dialog";
import Input from "../../form/input";
2020-12-26 19:32:41 -08:00
export type RenameModel = {
id: number;
name: string;
description?: string;
}
2020-12-27 09:58:21 -08:00
const defaultModel: RenameModel = { name: '', description: '', id: -1 };
2020-12-26 19:32:41 -08:00
const RenameDialog = (props: DialogProps) => {
const service: Service = useSelector(activeInstance);
const [model, setModel] = React.useState<RenameModel>(defaultModel);
const [error, setError] = React.useState<ErrorInfo>();
const { mapId, open } = props;
const intl = useIntl();
const queryClient = useQueryClient();
const mutation = useMutation<RenameModel, ErrorInfo, RenameModel>((model: RenameModel) => {
const { id, ...rest } = model;
return service.renameMap(id, rest).then(() => model);
},
{
onSuccess: () => {
handleOnMutationSuccess(props.onClose, queryClient);
},
onError: (error) => {
setError(error);
}
}
);
const handleOnClose = (): void => {
2020-12-27 16:37:10 -08:00
props.onClose();
2020-12-26 19:32:41 -08:00
setModel(defaultModel);
setError(undefined);
};
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>
2020-12-27 16:37:10 -08:00
<Dialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
title={{ id: 'rename.title', defaultMessage: 'Rename' }}
description={{ id: 'rename.description', defaultMessage: 'Rename' }}
submitButton={{ id: 'rename.title', defaultMessage: 'Rename Description' }}>
<Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
value={model.name} onChange={handleOnChange} error={error} />
2020-12-26 19:32:41 -08:00
2020-12-27 16:37:10 -08:00
<Input name="description" type="text" label={{ id: "action.rename-description-placeholder", defaultMessage: "Description" }}
value={model.description} onChange={handleOnChange} required={false} />
2020-12-26 19:32:41 -08:00
</Dialog>
</div>
);
}
export default RenameDialog;