80 lines
2.9 KiB
TypeScript
Raw Normal View History

2021-02-04 10:01:35 -08:00
import React from 'react';
import { useIntl } from 'react-intl';
import { useMutation } from 'react-query';
import { useSelector } from 'react-redux';
import { FormControl } from '@material-ui/core';
2021-02-02 10:54:37 -08:00
2021-02-04 10:01:35 -08:00
import Client, { BasicMapInfo, ErrorInfo } from '../../../../client';
2021-02-04 23:05:46 -08:00
import { activeInstance } from '../../../../redux/clientSlice';
2021-02-04 10:01:35 -08:00
import Input from '../../../form/input';
2021-02-04 14:34:13 -08:00
import BaseDialog from '../base-dialog';
2021-02-02 10:54:37 -08:00
export type CreateModel = {
2021-02-04 10:01:35 -08:00
title: string;
2021-02-02 10:54:37 -08:00
description?: string;
}
export type CreateProps = {
onClose: () => void
2021-02-04 10:01:35 -08:00
}
const defaultModel: CreateModel = { title: '', description: '' };
2021-02-02 10:54:37 -08:00
const CreateDialog = (props: CreateProps) => {
const client: Client = useSelector(activeInstance);
const [model, setModel] = React.useState<CreateModel>(defaultModel);
const [error, setError] = React.useState<ErrorInfo>();
const intl = useIntl();
2021-02-04 10:01:35 -08:00
const mutation = useMutation<number, ErrorInfo, CreateModel>((model: CreateModel) => {
return client.createMap(model);
2021-02-02 10:54:37 -08:00
},
{
2021-02-04 10:01:35 -08:00
onSuccess: (mapId: number) => {
window.location.href = `/c/maps/${mapId}/edit`;
2021-02-02 10:54:37 -08:00
},
onError: (error) => {
setError(error);
}
}
);
const handleOnClose = (): void => {
props.onClose();
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 });
}
return (
<div>
2021-02-05 16:35:39 -08:00
<BaseDialog onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
2021-02-02 10:54:37 -08:00
title={intl.formatMessage({ id: 'create.title', defaultMessage: 'Create a new mindmap' })}
description={intl.formatMessage({ id: 'create.description', defaultMessage: 'Please, fill the new map name and description.' })}
submitButton={intl.formatMessage({ id: 'create.button', defaultMessage: 'Create' })}>
<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-02-02 10:54:37 -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-02-02 10:54:37 -08:00
value={model.description} onChange={handleOnChange} required={false} fullWidth={true} />
</FormControl>
</BaseDialog>
</div>
);
}
export default CreateDialog;