add frontend code. add deploy config

media-store/app/src/pages/manage-store/AddAlbumForm.js

@@ -0,0 +1,62 @@
+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 };