change invoice action impl. changing .http sample file

media-store/app-src/package.json

@@ -15,6 +15,7 @@
     "@testing-library/user-event": "^7.1.2",
     "@umijs/hooks": "^1.9.3",
     "antd": "^4.8.2",
+    "@ant-design/icons": "4.3.0",
     "axios": "^0.20.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.3.2",

media-store/app-src/src/api/calls.js

@@ -43,13 +43,10 @@ const invoice = (tracks) => {
   return axiosInstance.post(
     `${INVOICES_SERVICE}/invoice`,
     {
-      tracks: tracks.map(({ unitPrice, ID }) => ({
-        unitPrice: `${unitPrice}`,
-        ID,
-      })),
+      tracks,
     },
     {
-      headers: { 'content-type': 'application/json;IEEE754Compatible=true' },
+      headers: { 'content-type': 'application/json' },
     }
   );
 };

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

@@ -36,8 +36,8 @@ const Header = () => {
     history.go(RELOAD_LOCATION_NUMBER);
   };
   const localeElements = AVAILABLE_LOCALES.filter((localeName) => localeName !== locale).map(
-    (curLocale, index) => (
-      <Menu.Item key={`${index}${curLocale}`} onClick={() => onChangeLocale(curLocale)}>
+    (curLocale) => (
+      <Menu.Item key={curLocale} onClick={() => onChangeLocale(curLocale)}>
         {curLocale}
       </Menu.Item>
     )
@@ -83,9 +83,6 @@ const Header = () => {
             Manages
           </Menu.Item>
         )}
-        <span>
-          {loading && <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />}
-        </span>
       </Menu>
 
       <Menu
@@ -94,6 +91,9 @@ const Header = () => {
         mode="horizontal"
         selectedKeys={currentKey}
       >
+        <Menu.Item>
+          {loading && <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />}
+        </Menu.Item>
         {haveInvoicedItems && (
           <Menu.Item
             style={{
@@ -119,21 +119,19 @@ const Header = () => {
             </div>
           </Menu.Item>
         )}
-
         <SubMenu title={locale}>{localeElements}</SubMenu>
-
-        {!!user ? (
+        {user ? (
           <Menu.Item
             onClick={onUserLogout}
             danger
             icon={<LogoutOutlined style={{ fontSize: 16 }} />}
-          ></Menu.Item>
+          />
         ) : (
           <Menu.Item
             key="/login"
             onClick={() => history.push('/login')}
             icon={<LoginOutlined style={{ fontSize: 16 }} />}
-          ></Menu.Item>
+          />
         )}
       </Menu>
     </div>

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

@@ -38,9 +38,8 @@ const InvoicePage = () => {
   const onBuy = () => {
     setLoading(true);
     invoice(
-      invoicedItems.map(({ ID, unitPrice }) => ({
+      invoicedItems.map(({ ID }) => ({
         ID,
-        unitPrice,
       }))
     )
       .then(() => {

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

@@ -153,7 +153,7 @@ const TracksContainer = () => {
       const isAlreadyOrdered = !isEmployee && track.alreadyOrdered;
       const onDeleteTrack = isEmployee && ((ID) => deleteTrack(ID));
       return (
-        <Col key={track.ID} className="gutter-row" span={8}>
+        <Col key={`track-col${track.ID}`} className="gutter-row" span={8}>
           <TrackComponent
             initialTrack={track}
             onDeleteTrack={onDeleteTrack}

media-store/app-src/src/components/manage-store/TrackForm.jsx

@@ -15,11 +15,11 @@ const REQUIRED = [
   },
 ];
 
-const getAlbums = function (value) {
+function getAlbums(value) {
   return fetchAlbumsByName(value, ALBUMS_LIMIT)
     .then((response) => response.data.value)
     .catch(this.handleError);
-};
+}
 
 const TrackForm = ({ initialAlbumTitle }) => {
   const { handleError } = useErrors();
@@ -89,5 +89,8 @@ const TrackForm = ({ initialAlbumTitle }) => {
 TrackForm.propTypes = {
   initialAlbumTitle: PropTypes.string,
 };
+TrackForm.defaultProps = {
+  initialAlbumTitle: undefined,
+};
 
 export { TrackForm };

media-store/app-src/src/components/tracks/EditAction.jsx

@@ -18,6 +18,16 @@ const EditAction = ({ ID, name, composer, genre, unitPrice, album, afterTrackUpd
     setVisible(true);
   };
 
+  const afterCloseModal = () => {
+    setUpdateLoading(true);
+    getTrack(ID)
+      .then((response) => {
+        afterTrackUpdate(response.data);
+        setUpdateLoading(false);
+      })
+      .catch(handleError);
+  };
+
   const onFinish = (value) => {
     setConfirmLoading(true);
     updateTrack({
@@ -45,16 +55,6 @@ const EditAction = ({ ID, name, composer, genre, unitPrice, album, afterTrackUpd
     setVisible(false);
   };
 
-  const afterCloseModal = () => {
-    setUpdateLoading(true);
-    getTrack(ID)
-      .then((response) => {
-        afterTrackUpdate(response.data);
-        setUpdateLoading(false);
-      })
-      .catch(handleError);
-  };
-
   return (
     <>
       {updateLoading ? <LoadingOutlined /> : <EditOutlined onClick={onShowModal} />}
@@ -86,11 +86,11 @@ const EditAction = ({ ID, name, composer, genre, unitPrice, album, afterTrackUpd
           onFinish={onFinish}
           onFinishFailed={() => console.log('Not valid params provided')}
           initialValues={{
-            name: name,
-            composer: composer,
+            name,
+            composer,
             genreID: genre.ID,
             albumID: album.ID,
-            unitPrice: unitPrice,
+            unitPrice,
           }}
         >
           <TrackForm initialAlbumTitle={album.title} />

media-store/app-src/src/components/tracks/ManagedTrack.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useRef } from "react";
-import { Card } from "antd";
-import { EditAction } from "./EditAction";
-import { DeleteAction } from "./DeleteAction";
-import { TrackCardBody } from "./TrackCardBody";
-import "./ManagedTrack.css";
+import React, { useState, useRef } from 'react';
+import { Card } from 'antd';
+import PropTypes from 'prop-types';
+import { EditAction } from './EditAction';
+import { DeleteAction } from './DeleteAction';
+import { TrackCardBody } from './TrackCardBody';
+import './ManagedTrack.css';
 
 const ManagedTrack = ({ initialTrack, onDeleteTrack }) => {
   const trackElement = useRef();
@@ -39,4 +40,9 @@ const ManagedTrack = ({ initialTrack, onDeleteTrack }) => {
   );
 };
 
+ManagedTrack.propTypes = {
+  initialTrack: PropTypes.object.isRequired,
+  onDeleteTrack: PropTypes.func.isRequired,
+};
+
 export { ManagedTrack };

media-store/app-src/src/components/tracks/Track.jsx

@@ -53,8 +53,11 @@ const Track = ({ initialTrack, isAlreadyOrdered }) => {
 };
 
 Track.propTypes = {
-  initialTrack: PropTypes.object,
+  initialTrack: PropTypes.object.isRequired,
   isAlreadyOrdered: PropTypes.bool,
 };
+Track.defaultProps = {
+  isAlreadyOrdered: undefined,
+};
 
 export { Track };