moving front app to subfolder. add webpack config with watch and dev-server mode. moving deploy things in subfolder

media-store/app-src/src/components/ManageStore.jsx

@@ -0,0 +1,115 @@
+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 default ManageStore;