116 lines
2.9 KiB
JavaScript
116 lines
2.9 KiB
JavaScript
import React, { useState, useMemo, useEffect } from "react";
|
|
import { Form, Radio, Button, message } from "antd";
|
|
import { TrackForm } from "./manage-store/TrackForm";
|
|
import { AddArtistForm } from "./manage-store/AddArtistForm";
|
|
import { AddAlbumForm } from "./manage-store/AddAlbumForm";
|
|
import { useErrors } from "../hooks/useErrors";
|
|
import { useAppState } from "../hooks/useAppState";
|
|
import { addTrack, addArtist, addAlbum } from "../api/calls";
|
|
import { MESSAGE_TIMEOUT } from "../util/constants";
|
|
|
|
const FORM_TYPES = {
|
|
track: "track",
|
|
artist: "artist",
|
|
album: "album",
|
|
playlist: "",
|
|
};
|
|
|
|
const chooseForm = (type) => {
|
|
return (
|
|
(type === "track" && <TrackForm />) ||
|
|
(type === "artist" && <AddArtistForm />) ||
|
|
(type === "album" && <AddAlbumForm />)
|
|
);
|
|
};
|
|
|
|
const ManageStore = () => {
|
|
const [form] = Form.useForm();
|
|
const { handleError } = useErrors();
|
|
const { setLoading } = useAppState();
|
|
const [formType, setFormType] = useState("track");
|
|
|
|
useEffect(() => {
|
|
form.resetFields();
|
|
}, [formType]);
|
|
|
|
const formElement = useMemo(() => {
|
|
return chooseForm(formType);
|
|
}, [formType]);
|
|
|
|
const onChangeForm = (event) => {
|
|
setFormType(event.target.value);
|
|
};
|
|
|
|
const sendCreateRequest = ({ type, ...data }) => {
|
|
setLoading(true);
|
|
|
|
let promise;
|
|
switch (type) {
|
|
case FORM_TYPES.track:
|
|
promise = addTrack({
|
|
name: data.name,
|
|
composer: data.composer,
|
|
album: { ID: data.albumID },
|
|
genre: { ID: data.genreID },
|
|
unitPrice: data.unitPrice.toString(),
|
|
});
|
|
break;
|
|
case FORM_TYPES.artist:
|
|
promise = addArtist(data);
|
|
break;
|
|
case FORM_TYPES.album:
|
|
promise = addAlbum({ title: data.name, artist: { ID: data.artistID } });
|
|
break;
|
|
default:
|
|
}
|
|
|
|
promise
|
|
.then(() => {
|
|
message.success("Entity successfully created", MESSAGE_TIMEOUT);
|
|
form.resetFields();
|
|
})
|
|
.catch(handleError)
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
return (
|
|
<Form
|
|
style={{ width: 700 }}
|
|
form={form}
|
|
labelCol={{
|
|
span: 4,
|
|
}}
|
|
wrapperCol={{
|
|
span: 14,
|
|
}}
|
|
layout="horizontal"
|
|
initialValues={{
|
|
type: formType,
|
|
}}
|
|
type={formType}
|
|
onFinish={sendCreateRequest}
|
|
onFinishFailed={() => console.log("Not valid params provided")}
|
|
>
|
|
<Form.Item label="Entity" name="type">
|
|
<Radio.Group onChange={onChangeForm}>
|
|
<Radio.Button value="track">Track</Radio.Button>
|
|
<Radio.Button value="album">Album</Radio.Button>
|
|
<Radio.Button value="artist">Artist</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
{formElement}
|
|
<Form.Item
|
|
type="primary"
|
|
wrapperCol={{
|
|
span: 14,
|
|
offset: 4,
|
|
}}
|
|
>
|
|
<Button onClick={() => form.submit()}>Create</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export { ManageStore };
|