import React, { useEffect } from "react"; import { useIntl } from "react-intl"; import { useMutation, useQueryClient } from "react-query"; import { useSelector } from "react-redux"; import { FormControl } from "@material-ui/core"; import Client, { BasicMapInfo, ErrorInfo } from "../../../../client"; import { activeInstance } from '../../../../reducers/serviceSlice'; import Input from "../../../form/input"; import { DialogProps, fetchMapById, handleOnMutationSuccess } from ".."; import BaseDialog from "../action-dialog"; export type CreateModel = { name: string; description?: string; } export type CreateProps = { open: boolean, onClose: () => void } const defaultModel: CreateModel = { name: '', description: ''}; const CreateDialog = (props: CreateProps) => { const client: Client = useSelector(activeInstance); const [model, setModel] = React.useState(defaultModel); const [error, setError] = React.useState(); const { open } = props; const intl = useIntl(); const queryClient = useQueryClient(); const mutation = useMutation((model: CreateModel) => { const { ...rest } = model; return client.createMap(rest).then(() => model); }, { onSuccess: () => { handleOnMutationSuccess(props.onClose, queryClient); }, onError: (error) => { setError(error); } } ); const handleOnClose = (): void => { props.onClose(); setModel(defaultModel); setError(undefined); }; const handleOnSubmit = (event: React.FormEvent): void => { event.preventDefault(); mutation.mutate(model); }; const handleOnChange = (event: React.ChangeEvent): void => { event.preventDefault(); const name = event.target.name; const value = event.target.value; setModel({ ...model, [name as keyof BasicMapInfo]: value }); } return (
); } export default CreateDialog;