clean up things

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

@@ -16,6 +16,6 @@ const locale = getLocaleFromLS();
 changeUserDefaults(user);
 changeLocaleDefaults(locale);
 
-// axiosInstance.interceptors.response.use(null, responseErrorInterceptor);
+axiosInstance.interceptors.response.use(null, responseErrorInterceptor);
 
 export { axiosInstance, changeLocaleDefaults, changeUserDefaults };

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

@@ -8,8 +8,9 @@ let subscribers = [];
 
 function responseErrorInterceptor(error) {
   const originalRequest = error.config;
+  const user = getUserFromLS();
 
-  if (error.response && error.response.status === 401) {
+  if (error.response && error.response.status === 401 && !!user) {
     if (originalRequest.url === "users/login") {
       return Promise.reject(error);
     }
@@ -26,21 +27,18 @@ function responseErrorInterceptor(error) {
     if (!isRefreshing) {
       isRefreshing = true;
 
-      refreshTokens(getUserFromLS().refreshToken)
+      refreshTokens(user.refreshToken)
         .then((response) => {
           emitter.emit("UPDATE_USER", response.data);
           subscribers.forEach((request) =>
             request.resolve(response.data.accessToken)
           );
-        })
-        .catch(() => {
-          subscribers.forEach((request) => request.reject(error));
-        })
-        .finally(() => {
           subscribers = [];
           isRefreshing = false;
+        })
+        .catch(() => {
+          emitter.emit("UPDATE_USER", undefined);
         });
-      return;
     }
 
     // holding requests which should be sended after users/refreshTokens complete

media-store/app/src/components/CurrentPageHeader.js

@@ -1,30 +0,0 @@
-import React from "react";
-import { Breadcrumb, Spin } from "antd";
-import { useLocation } from "react-router-dom";
-import { useAppState } from "../hooks/useAppState";
-
-const names = {
-  "/": "Browse / Tracks",
-  "/person": "Profile",
-  "/login": "Login form",
-  "/invoice": "Requested items",
-  "/manage": "Manage store",
-};
-
-const CurrentPageHeader = () => {
-  const location = useLocation();
-  const { loading } = useAppState();
-
-  return (
-    <Breadcrumb
-      style={{ height: 50, paddingBottom: 20, fontWeight: 600, fontSize: 20 }}
-    >
-      <Breadcrumb.Item>
-        {names[location.pathname]}
-        <span style={{ padding: 10 }}>{loading && <Spin />}</span>
-      </Breadcrumb.Item>
-    </Breadcrumb>
-  );
-};
-
-export { CurrentPageHeader };

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

@@ -1,10 +1,11 @@
 import React from "react";
-import { Menu, Badge } from "antd";
+import { Menu, Badge, Spin } from "antd";
 import { isEmpty } from "lodash";
 import {
   CreditCardOutlined,
   LogoutOutlined,
   LoginOutlined,
+  LoadingOutlined,
 } from "@ant-design/icons";
 import { useHistory, useLocation } from "react-router-dom";
 import { useAppState } from "../hooks/useAppState";
@@ -12,17 +13,18 @@ import { setLocaleToLS } from "../util/localStorageService";
 import { changeLocaleDefaults } from "../api/axiosInstance";
 import { emitter } from "../util/EventEmitter";
 import "./Header.css";
+import { requireEmployee, requireCustomer } from "../util/constants";
 
 const { SubMenu } = Menu;
 
-const keys = ["/", "/person", "/login", "/manage", "/invoice"];
+const keys = ["/", "/person", "/login", "/manage", "/invoice", "/invoices"];
 const AVAILABLE_LOCALES = ["en", "fr", "de"];
 const RELOAD_LOCATION_NUMBER = 0;
 
 const Header = () => {
   const history = useHistory();
   const location = useLocation();
-  const { user, invoicedItems, locale, setLocale } = useAppState();
+  const { user, invoicedItems, locale, setLocale, loading } = useAppState();
   const currentKey = [keys.find((key) => key === location.pathname)];
   const haveInvoicedItems = !isEmpty(invoicedItems);
   const invoicedItemsLength = invoicedItems.length;
@@ -46,7 +48,6 @@ const Header = () => {
 
   const onUserLogout = () => {
     emitter.emit("UPDATE_USER", undefined);
-
     history.push("/");
   };
 
@@ -54,7 +55,8 @@ const Header = () => {
     <div
       style={{
         display: "flex",
-        justifyContent: "center",
+        justifyContent: "baseline",
+        alignItems: "center",
         paddingLeft: "15vh",
         paddingRight: "15vh",
         background: "white",
@@ -75,11 +77,23 @@ const Header = () => {
             Profile
           </Menu.Item>
         )}
-        {!!user && user.roles.includes("employee") && (
+        {requireCustomer(user) && (
+          <Menu.Item key="/invoices" onClick={() => history.push("/invoices")}>
+            Invoices
+          </Menu.Item>
+        )}
+        {requireEmployee(user) && (
           <Menu.Item key="/manage" onClick={() => history.push("/manage")}>
             Manage
           </Menu.Item>
         )}
+        <span>
+          {loading && (
+            <Spin
+              indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />}
+            />
+          )}
+        </span>
       </Menu>
 
       <Menu
@@ -88,7 +102,7 @@ const Header = () => {
         mode="horizontal"
         selectedKeys={currentKey}
       >
-        {haveInvoicedItems && !!user && user.roles.includes("customer") && (
+        {haveInvoicedItems && (
           <Menu.Item
             style={{
               width: 40,

media-store/app/src/components/Router.js

@@ -1,35 +1,25 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import { isEmpty } from "lodash";
-import { TracksContainer } from "../pages/tracks/TracksPage";
-import { CurrentPageHeader } from "./CurrentPageHeader";
+import { TracksContainer } from "../pages/TracksPage";
 import { Header } from "../components/Header";
-import { PersonPage } from "../pages/person/PersonPage";
+import { PersonPage } from "../pages/PersonPage";
 import { ErrorPage } from "../pages/ErrorPage";
-import { Login } from "../pages/login/Login";
-import {
-  withRestrictions,
-  withRestrictedSection,
-} from "../hocs/withRestrictions";
-import { InvoicePage } from "../pages/invoice/InvoicePage";
-import { ManageStore } from "../pages/manage-store/ManageStore";
-import { MyInvoices } from "../pages/person/MyInvoices";
-
-const needCustomer = ({ user }) => !!user && user.roles.includes("customer");
+import { Login } from "../pages/Login";
+import { withRestrictions } from "../hocs/withRestrictions";
+import { InvoicePage } from "../pages/InvoicePage";
+import { ManageStore } from "../pages/ManageStore";
+import { MyInvoicesPage } from "../pages/MyInvoicesPage";
+import { requireEmployee } from "../util/constants";
 
 const RestrictedLogin = withRestrictions(Login, ({ user }) => !user);
 const RestrictedInvoicePage = withRestrictions(
   InvoicePage,
-  ({ user, invoicedItems }) => needCustomer({ user }) && !isEmpty(invoicedItems)
-);
-const RestrictedMyInvoicesSection = withRestrictedSection(
-  MyInvoices,
-  needCustomer
+  ({ user, invoicedItems }) => !requireEmployee(user) && !isEmpty(invoicedItems)
 );
 const RestrictedPersonPage = withRestrictions(PersonPage, ({ user }) => !!user);
-const RestrictedManageStore = withRestrictions(
-  ManageStore,
-  ({ user }) => !!user && user.roles.includes("employee")
+const RestrictedManageStore = withRestrictions(ManageStore, ({ user }) =>
+  requireEmployee(user)
 );
 
 const MyRouter = () => {
@@ -37,15 +27,12 @@ const MyRouter = () => {
     <Router>
       <Header />
       <div style={{ padding: "2em 20vh" }}>
-        <CurrentPageHeader />
         <Switch>
           <Route exact path={["/", "/tracks"]}>
             <TracksContainer />
           </Route>
           <Route exact path="/person">
-            <RestrictedPersonPage
-              myInvoicesSection={<RestrictedMyInvoicesSection />}
-            />
+            <RestrictedPersonPage />
           </Route>
           <Route exact path="/login">
             <RestrictedLogin />
@@ -53,6 +40,9 @@ const MyRouter = () => {
           <Route exact path="/invoice">
             <RestrictedInvoicePage />
           </Route>
+          <Route exact path="/invoices">
+            <MyInvoicesPage />
+          </Route>
           <Route exact path="/manage">
             <RestrictedManageStore />
           </Route>

media-store/app/src/hocs/withRestrictions.js

@@ -13,15 +13,4 @@ const withRestrictions = (Component, isUserMeetRestrictions) => {
   };
 };
 
-const withRestrictedSection = (Component, isUserMeetRestrictions) => {
-  return (props) => {
-    const { user, invoicedItems } = useAppState();
-    return (
-      isUserMeetRestrictions({ user, invoicedItems }) && (
-        <Component {...props} />
-      )
-    );
-  };
-};
-
-export { withRestrictions, withRestrictedSection };
+export { withRestrictions };

media-store/app/src/hooks/useErrors.js

@@ -1,8 +1,5 @@
 import { useHistory } from "react-router-dom";
 import { useAppState } from "./useAppState";
-import { emitter } from "../util/EventEmitter";
-import { message } from "antd";
-import { MESSAGE_TIMEOUT } from "../util/constants";
 
 const useErrors = () => {
   const history = useHistory();
@@ -12,11 +9,6 @@ const useErrors = () => {
     console.error("Error", error);
 
     if (error.response) {
-      if (error.response.status === 401) {
-        emitter.emit("UPDATE_USER", undefined);
-        message.error("You are unauthorized, try login again", MESSAGE_TIMEOUT);
-      }
-
       const { status, statusText, data } = error.response;
       setError({
         status,

media-store/app/src/pages/ErrorPage.js

@@ -5,7 +5,7 @@ import { Result, Button } from "antd";
 import { useAppState } from "../hooks/useAppState";
 
 const ErrorPage = () => {
-  const { user, error, setError } = useAppState();
+  const { error, setError } = useAppState();
   const history = useHistory();
 
   const onGoHome = () => {
@@ -18,32 +18,33 @@ const ErrorPage = () => {
     history.push("/login");
   };
 
+  const goHomeButton = (
+    <Button onClick={onGoHome} key={1} type="primary">
+      Back Home
+    </Button>
+  );
+  const goLoginButton = (
+    <Button onClick={goLoginPage} key={2} type="primary">
+      Login
+    </Button>
+  );
+
   const errorResultProps = isEmpty(error)
     ? {
         status: 404,
         title: "Not found",
         subTitle: "Sorry, the page you visited does not exist.",
+        extra: goHomeButton,
       }
     : {
-        status: [404, 403, 500].includes(error.status)
-          ? error.status
-          : undefined,
-        title: `${error.status} ${error.statusText}`,
+        status: [404, 403, 500].includes(error.status) ? error.status : "error",
+        title: error.statusText,
         subTitle: error.message,
+        extra:
+          error.status === 401 ? [goHomeButton, goLoginButton] : goHomeButton,
       };
 
-  return (
-    <Result
-      {...errorResultProps}
-      extra={
-        <>
-          <Button onClick={onGoHome} type="primary">
-            Back Home
-          </Button>
-        </>
-      }
-    />
-  );
+  return <Result {...errorResultProps} />;
 };
 
 export { ErrorPage };

media-store/app/src/pages/InvoicePage.js

@@ -1,12 +1,10 @@
 import React from "react";
 import { Table, Button, message } from "antd";
-import { useAppState } from "../../hooks/useAppState";
+import { useAppState } from "../hooks/useAppState";
 import { useHistory } from "react-router-dom";
-import { invoice } from "../../api/calls";
-import { useErrors } from "../../hooks/useErrors";
-import { MESSAGE_TIMEOUT } from "../../util/constants";
-
-import "./InvoicePage.css";
+import { invoice } from "../api/calls";
+import { useErrors } from "../hooks/useErrors";
+import { MESSAGE_TIMEOUT } from "../util/constants";
 
 const columns = [
   {
@@ -30,7 +28,7 @@ const columns = [
 const InvoicePage = () => {
   const history = useHistory();
   const { handleError } = useErrors();
-  const { invoicedItems, setInvoicedItems, setLoading } = useAppState();
+  const { user, invoicedItems, setInvoicedItems, setLoading } = useAppState();
 
   const data = invoicedItems.map(({ ID: key, ...otherProps }) => ({
     key,
@@ -48,7 +46,7 @@ const InvoicePage = () => {
       .then(() => {
         setInvoicedItems([]);
         message.success("Invoice successfully completed", MESSAGE_TIMEOUT);
-        history.push("/person");
+        history.push("/invoices");
       })
       .catch(handleError)
       .finally(() => setLoading(false));
@@ -57,6 +55,9 @@ const InvoicePage = () => {
     setInvoicedItems([]);
     history.push("/");
   };
+  const goLogin = () => {
+    history.push("/login");
+  };
 
   return (
     <div style={{ backgroundColor: "white", padding: 10 }}>
@@ -74,17 +75,28 @@ const InvoicePage = () => {
               padding: 5,
             }}
           >
-            <Button type="primary" size="large" onClick={onBuy}>
-              Buy
-            </Button>
-            <Button
-              size="large"
-              style={{ marginLeft: 5 }}
-              onClick={onCancel}
-              danger
-            >
-              Cancel
-            </Button>
+            {user ? (
+              <>
+                <Button type="primary" size="large" onClick={onBuy}>
+                  Buy
+                </Button>
+                <Button
+                  size="large"
+                  style={{ marginLeft: 5 }}
+                  onClick={onCancel}
+                  danger
+                >
+                  Cancel
+                </Button>
+              </>
+            ) : (
+              <section>
+                <Button type="primary" size="large" onClick={goLogin}>
+                  Login
+                </Button>
+                <span> to buy selected</span>
+              </section>
+            )}
           </div>
         )}
       />

media-store/app/src/pages/Login.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { Form, Input, Button, Checkbox, message } from "antd";
-import { login } from "../../api/calls";
+import { login } from "../api/calls";
 import { useHistory } from "react-router-dom";
-import { useAppState } from "../../hooks/useAppState";
-import { useErrors } from "../../hooks/useErrors";
-import { MESSAGE_TIMEOUT } from "../../util/constants";
-import { emitter } from "../../util/EventEmitter";
+import { useAppState } from "../hooks/useAppState";
+import { useErrors } from "../hooks/useErrors";
+import { MESSAGE_TIMEOUT } from "../util/constants";
+import { emitter } from "../util/EventEmitter";
 
 const layout = {
   labelCol: {

media-store/app/src/pages/ManageStore.js

@@ -1,13 +1,12 @@
 import React, { useState, useMemo, useEffect } from "react";
 import { Form, Radio, Button, message } from "antd";
-import { TrackForm } from "./TrackForm";
-import { AddArtistForm } from "./AddArtistForm";
-import { AddAlbumForm } from "./AddAlbumForm";
-import { useErrors } from "../../hooks/useErrors";
-import { useAppState } from "../../hooks/useAppState";
-import { addTrack, addArtist, addAlbum } from "../../api/calls";
-import { MESSAGE_TIMEOUT } from "../../util/constants";
-import "./ManageStore.css";
+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",

media-store/app/src/pages/MyInvoicesPage.js

@@ -1,10 +1,10 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { Button, message, Divider, Tag, Collapse, Table, Spin } from "antd";
 import moment from "moment";
-import { useErrors } from "../../hooks/useErrors";
-import { useAppState } from "../../hooks/useAppState";
-import { cancelInvoice, fetchInvoices } from "../../api/calls";
-import { MESSAGE_TIMEOUT } from "../../util/constants";
+import { useErrors } from "../hooks/useErrors";
+import { useAppState } from "../hooks/useAppState";
+import { cancelInvoice, fetchInvoices } from "../api/calls";
+import { MESSAGE_TIMEOUT } from "../util/constants";
 
 const { Panel } = Collapse;
 const INVOICE_STATUS = {
@@ -106,7 +106,7 @@ const ExtraHeader = ({ ID, invoiceDate, status: initialStatus }) => {
   );
 };
 
-const MyInvoices = () => {
+const MyInvoicesPage = () => {
   const { handleError } = useErrors();
   const { setLoading } = useAppState();
   const [invoices, setInvoices] = useState([]);
@@ -176,13 +176,11 @@ const MyInvoices = () => {
   return (
     <div>
       {invoiceElements && (
-        <>
-          <Divider orientation="left">My invoices</Divider>
-          <Collapse expandIconPosition="left">{invoiceElements}</Collapse>
-        </>
+        <Collapse expandIconPosition="left">{invoiceElements}</Collapse>
       )}
+      {"Pagination steel needed"}
     </div>
   );
 };
 
-export { MyInvoices };
+export { MyInvoicesPage };

media-store/app/src/pages/PersonPage.js

@@ -1,12 +1,12 @@
 import React, { useState, useMemo } from "react";
 import { Card, Button, message } from "antd";
 import { omit } from "lodash";
-import { fetchPerson, confirmPerson } from "../../api/calls";
-import { useErrors } from "../../hooks/useErrors";
-import { useAppState } from "../../hooks/useAppState";
-import { Editable } from "../../components/Editable";
-import { MESSAGE_TIMEOUT } from "../../util/constants";
-import { useAbortableEffect } from "../../hooks/useAbortableEffect";
+import { fetchPerson, confirmPerson } from "../api/calls";
+import { useErrors } from "../hooks/useErrors";
+import { useAppState } from "../hooks/useAppState";
+import { Editable } from "../components/Editable";
+import { MESSAGE_TIMEOUT } from "../util/constants";
+import { useAbortableEffect } from "../hooks/useAbortableEffect";
 
 const PERSON_PROP = {
   address: "Address ",
@@ -22,7 +22,7 @@ const PERSON_PROP = {
   company: "Company: ",
 };
 
-const PersonPage = ({ myInvoicesSection }) => {
+const PersonPage = () => {
   const { setLoading } = useAppState();
   const { handleError } = useErrors();
   const [initialPerson, setInitialPerson] = useState({});
@@ -46,7 +46,6 @@ const PersonPage = ({ myInvoicesSection }) => {
     fetchPerson()
       .then(({ data: personData }) => {
         personData = omit(personData, "@odata.context", "ID");
-        console.log("personData", personData);
         if (!status.aborted) {
           setInitialPerson(personData);
           setPerson(personData);
@@ -117,7 +116,6 @@ const PersonPage = ({ myInvoicesSection }) => {
           </Button>
         )}
       </Card>
-      {myInvoicesSection}
     </>
   );
 };

media-store/app/src/pages/TracksPage.js

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
 import { debounce } from "lodash";
 import { Input, Col, Row, Select, Pagination } from "antd";
-import { Track } from "./Track";
+import { Track } from "./tracks/Track";
+import { ManagedTrack } from "./tracks/ManagedTrack";
+import { useAppState } from "../hooks/useAppState";
+import { useErrors } from "../hooks/useErrors";
+import { fetchTacks, countTracks, fetchGenres } from "../api/calls";
+import { useAbortableEffect } from "../hooks/useAbortableEffect";
+import { requireEmployee } from "../util/constants";
 import "./TracksPage.css";
-import { useAppState } from "../../hooks/useAppState";
-import { useErrors } from "../../hooks/useErrors";
-import { fetchTacks, countTracks, fetchGenres } from "../../api/calls";
-import { useAbortableEffect } from "../../hooks/useAbortableEffect";
 
 let counter = 0;
 
@@ -27,7 +29,7 @@ const renderGenres = (genres) =>
   ));
 
 const TracksContainer = () => {
-  const { setLoading, invoicedItems } = useAppState();
+  const { setLoading, user } = useAppState();
   const { handleError } = useErrors();
   const [state, setState] = useState({
     tracks: [],
@@ -149,29 +151,25 @@ const TracksContainer = () => {
       tracks: state.tracks.filter(({ ID: curID }) => curID !== ID),
     });
   };
-  const renderTracks = (tracks, invoicedItems) =>
-    tracks.map(
-      ({ ID, name, composer, genre, unitPrice, alreadyOrdered, album }) => (
-        <Col key={ID} className="gutter-row" span={8}>
-          <Track
-            initialTrack={{
-              ID,
-              name,
-              genre,
-              album,
-              artist: album.artist.name,
-              composer,
-              unitPrice,
-            }}
-            isButtonVisible={!alreadyOrdered}
-            isInvoiced={invoicedItems.find(({ ID: curID }) => curID === ID)}
-            onDeleteTrack={(ID) => deleteTrack(ID)}
+  const renderTracks = (tracks) => {
+    const isEmployee = requireEmployee(user);
+    const TrackComponent = isEmployee ? ManagedTrack : Track;
+    return tracks.map((track) => {
+      const isAlreadyOrdered = !isEmployee && track.alreadyOrdered;
+      const onDeleteTrack = isEmployee && ((ID) => deleteTrack(ID));
+      return (
+        <Col key={track.ID} className="gutter-row" span={8}>
+          <TrackComponent
+            initialTrack={track}
+            onDeleteTrack={onDeleteTrack}
+            isAlreadyOrdered={isAlreadyOrdered}
           />
         </Col>
-      )
-    );
+      );
+    });
+  };
 
-  const trackElements = renderTracks(state.tracks, invoicedItems);
+  const trackElements = renderTracks(state.tracks);
   const genreElements = renderGenres(state.genres);
 
   return (

media-store/app/src/pages/invoice/InvoicePage.css

@@ -1,4 +0,0 @@
-.ant-table-cell,
-.ant-table-footer {
-  background: white !important;
-}

media-store/app/src/pages/tracks/ManagedTrack.js

@@ -0,0 +1,42 @@
+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";
+
+const ManagedTrack = ({ initialTrack, onDeleteTrack }) => {
+  const trackElement = useRef();
+  const [track, setTrack] = useState(initialTrack);
+
+  return (
+    <div className="card-element" ref={trackElement}>
+      <Card
+        actions={[
+          <DeleteAction
+            ID={track.ID}
+            onDeleteTrack={() => {
+              trackElement.current.style.opacity = 0;
+              setTimeout(() => onDeleteTrack(track.ID), 500);
+            }}
+          />,
+          <EditAction
+            ID={track.ID}
+            name={track.name}
+            composer={track.composer}
+            album={track.album}
+            genre={track.genre}
+            unitPrice={track.unitPrice}
+            afterTrackUpdate={(value) => setTrack(value)}
+          />,
+        ]}
+        title={track.name}
+        bordered={false}
+      >
+        <TrackCardBody track={track} />
+      </Card>
+    </div>
+  );
+};
+
+export { ManagedTrack };

media-store/app/src/pages/tracks/Track.js

@@ -2,114 +2,52 @@ import React, { useState, useRef } from "react";
 import { Card, Button } from "antd";
 import { PlusOutlined, MinusOutlined } from "@ant-design/icons";
 import { useAppState } from "../../hooks/useAppState";
-import { withRestrictedSection } from "../../hocs/withRestrictions";
-import { EditAction } from "./EditAction";
-import { DeleteAction } from "./DeleteAction";
-import "./Track.css";
+import { TrackCardBody } from "./TrackCardBody";
 
-const RestrictedButton = withRestrictedSection(Button, ({ user }) => {
-  return !!user && user.roles.includes("customer");
-});
-
-const RestrictedEditAction = withRestrictedSection(
-  EditAction,
-  ({ user }) => !!user && user.roles.includes("employee")
-);
-const RestrictedDeleteAction = withRestrictedSection(
-  DeleteAction,
-  ({ user }) => !!user && user.roles.includes("employee")
-);
-
-const Track = ({
-  initialTrack,
-  isButtonVisible,
-  isInvoiced: isInvoicedProp,
-  onDeleteTrack,
-}) => {
+const Track = ({ initialTrack, isAlreadyOrdered }) => {
   const trackElement = useRef();
   const { setInvoicedItems, invoicedItems } = useAppState();
-  const [isInvoiced, setIsInvoiced] = useState(isInvoicedProp);
-  const [track, setTrack] = useState(initialTrack);
+  const [isJustInvoiced, setIsJustInvoiced] = useState(
+    invoicedItems.find((curTrack) => curTrack.ID === initialTrack.ID)
+  );
 
   const onChangedStatus = () => {
-    const newInvoiced = !isInvoiced;
-    if (newInvoiced) {
+    const newIsJustInvoiced = !isJustInvoiced;
+    if (newIsJustInvoiced) {
       setInvoicedItems([
         ...invoicedItems,
         {
-          ID: track.ID,
-          name: track.name,
-          artist: track.album.artist.name,
-          albumTitle: track.album.title,
-          unitPrice: track.unitPrice,
+          ID: initialTrack.ID,
+          name: initialTrack.name,
+          artist: initialTrack.album.artist.name,
+          albumTitle: initialTrack.album.title,
+          unitPrice: initialTrack.unitPrice,
         },
       ]);
     } else {
       setInvoicedItems(
-        invoicedItems.filter(({ ID: curID }) => curID !== track.ID)
+        invoicedItems.filter(({ ID: curID }) => curID !== initialTrack.ID)
       );
     }
-    setIsInvoiced(newInvoiced);
+    setIsJustInvoiced(newIsJustInvoiced);
   };
 
   return (
     <div className="card-element" ref={trackElement}>
       <Card
         actions={[
-          <RestrictedDeleteAction
-            ID={track.ID}
-            onDeleteTrack={() => {
-              trackElement.current.style.opacity = 0;
-              setTimeout(() => onDeleteTrack(track.ID), 500);
-            }}
-          />,
-          <RestrictedEditAction
-            ID={track.ID}
-            name={track.name}
-            composer={track.composer}
-            album={track.album}
-            genre={track.genre}
-            unitPrice={track.unitPrice}
-            afterTrackUpdate={(value) => setTrack(value)}
-          />,
+          <>
+            {!isAlreadyOrdered && (
+              <Button onClick={onChangedStatus} danger={isJustInvoiced}>
+                {isJustInvoiced ? <MinusOutlined /> : <PlusOutlined />}
+              </Button>
+            )}
+          </>,
         ]}
-        title={track.name}
+        title={initialTrack.name}
         bordered={false}
       >
-        <div>
-          Artist:{" "}
-          <span style={{ fontWeight: 600 }}>{track.album.artist.name}</span>
-        </div>
-        <div>
-          Album: <span style={{ fontWeight: 600 }}>{track.album.title}</span>
-        </div>
-        <div>
-          Genre: <span style={{ fontWeight: 600 }}>{track.genre.name}</span>
-        </div>
-        <div>
-          {track.composer && (
-            <span>
-              Compositor:{" "}
-              <span style={{ fontWeight: 600 }}>{track.composer}</span>
-            </span>
-          )}
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <span>
-            Price: <span style={{ fontWeight: 600 }}>{track.unitPrice}</span>
-          </span>
-          {isButtonVisible && (
-            <RestrictedButton
-              type="primary"
-              size="small"
-              shape="circle"
-              onClick={onChangedStatus}
-              danger={isInvoiced}
-            >
-              {isInvoiced ? <MinusOutlined /> : <PlusOutlined />}
-            </RestrictedButton>
-          )}
-        </div>
+        <TrackCardBody track={initialTrack} />
       </Card>
     </div>
   );

media-store/app/src/pages/tracks/TrackCardBody.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+const TrackCardBody = ({ track }) => {
+  return (
+    <>
+      <div>
+        Artist:{" "}
+        <span style={{ fontWeight: 600 }}>{track.album.artist.name}</span>
+      </div>
+      <div>
+        Album: <span style={{ fontWeight: 600 }}>{track.album.title}</span>
+      </div>
+      <div>
+        Genre: <span style={{ fontWeight: 600 }}>{track.genre.name}</span>
+      </div>
+      <div>
+        {track.composer && (
+          <span>
+            Compositor:{" "}
+            <span style={{ fontWeight: 600 }}>{track.composer}</span>
+          </span>
+        )}
+      </div>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <span>
+          Price: <span style={{ fontWeight: 600 }}>{track.unitPrice}</span>
+        </span>
+      </div>
+    </>
+  );
+};
+
+export { TrackCardBody };

media-store/app/src/util/constants.js

@@ -6,3 +6,9 @@ export const MESSAGE_TIMEOUT = 2;
 // in prod mode using proxy
 export const API =
   process.env.NODE_ENV === "development" ? "http://localhost:4004/" : "api/";
+
+export const requireEmployee = (user) =>
+  !!user && user.roles.includes("employee");
+
+export const requireCustomer = (user) =>
+  !!user && user.roles.includes("customer");

media-store/package.json

@@ -30,11 +30,15 @@
     "REFRESH_TOKEN_SECRET": "refresh-secret",
     "requires": {
       "db": {
-        "kind": "hana"
+        "kind": "sqlite",
+        "model": "*",
+        "credentials": {
+          "database": "mychinook.db"
+        }
       },
       "auth": {
         "impl": "srv/auth.js"
       }
     }
   }
-}
+}

media-store/srv/user-service.js

@@ -3,8 +3,8 @@ const jwt = require("jsonwebtoken");
 const bcrypt = require("bcryptjs");
 
 const { ACCESS_TOKEN_SECRET, REFRESH_TOKEN_SECRET } = cds.env;
-const ACCESS_TOKEN_EXP_IN = "10m";
-const REFRESH_TOKEN_EXPIRES_IN = "20m";
+const ACCESS_TOKEN_EXP_IN = "10s";
+const REFRESH_TOKEN_EXPIRES_IN = "16s";
 
 const comparePasswords = async (password, hashedPassword) => {
   return new Promise((resolve, reject) =>