63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { Form, Input, Select } from "antd";
|
|
// import { useSearch } from "@umijs/hooks";
|
|
import { useErrors } from "../../useErrors";
|
|
import { fetchArtistsByName } from "../../api-service";
|
|
|
|
const REQUIRED = [
|
|
{
|
|
required: true,
|
|
message: "This filed is required!",
|
|
},
|
|
];
|
|
const ARTISTS_LIMIT = 10;
|
|
|
|
const getArtists = function (value) {
|
|
return fetchArtistsByName(value, ARTISTS_LIMIT)
|
|
.then((response) => response.data.value)
|
|
.catch(this.handleError);
|
|
};
|
|
|
|
const AddAlbumForm = () => {
|
|
const { handleError } = useErrors();
|
|
// const {
|
|
// data: artists,
|
|
// loading: isArtistsLoading,
|
|
// onChange: onChangeArtistInput,
|
|
// cancel: onArtistCancel,
|
|
// } = useSearch(getArtists.bind({ handleError }));
|
|
|
|
// useEffect(() => {
|
|
// onChangeArtistInput();
|
|
// }, []);
|
|
|
|
return (
|
|
<>
|
|
<h3>Add album</h3>
|
|
<Form.Item label="Name" name="name" rules={REQUIRED}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label="Artist" name="artistID" rules={REQUIRED}>
|
|
{/* <Select
|
|
showSearch
|
|
placeholder="Select artist"
|
|
filterOption={false}
|
|
onSearch={onChangeArtistInput}
|
|
loading={isArtistsLoading}
|
|
onBlur={onArtistCancel}
|
|
style={{ width: 300 }}
|
|
>
|
|
{artists &&
|
|
artists.map((artist) => (
|
|
<Select.Option key={artist.name} value={artist.ID}>
|
|
{artist.name}
|
|
</Select.Option>
|
|
))}
|
|
</Select> */}
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export { AddAlbumForm };
|