change invoiceDate impl

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

@@ -3,7 +3,8 @@ import axios from "axios";
 
 // in dev mode using provided api
 // in prod mode using proxy
-const API = process.env.API || "api/";
+const API =
+  process.env.NODE_ENV === "development" ? "http://localhost:4004/" : "api/";
 
 const BROWSE_TRACKS_SERVICE = `${API}browse-tracks`;
 const INVOICES_SERVICE = `${API}browse-invoices`;

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

@@ -5,8 +5,6 @@ import { useHistory } from "react-router-dom";
 import { useGlobals } from "../../GlobalContext";
 import { useErrors } from "../../useErrors";
 
-const USER_SERVICE = "http://localhost:4004/users";
-
 const layout = {
   labelCol: {
     span: 8,

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { Form, Input, Select } from "antd";
-// import { useSearch } from "@umijs/hooks";
+import { useSearch } from "@umijs/hooks";
 import { useErrors } from "../../useErrors";
 import { fetchArtistsByName } from "../../api-service";
 
@@ -20,16 +20,16 @@ const getArtists = function (value) {
 
 const AddAlbumForm = () => {
   const { handleError } = useErrors();
-  // const {
-  //   data: artists,
-  //   loading: isArtistsLoading,
-  //   onChange: onChangeArtistInput,
-  //   cancel: onArtistCancel,
-  // } = useSearch(getArtists.bind({ handleError }));
+  const {
+    data: artists,
+    loading: isArtistsLoading,
+    onChange: onChangeArtistInput,
+    cancel: onArtistCancel,
+  } = useSearch(getArtists.bind({ handleError }));
 
-  // useEffect(() => {
-  //   onChangeArtistInput();
-  // }, []);
+  useEffect(() => {
+    onChangeArtistInput();
+  }, []);
 
   return (
     <>
@@ -38,7 +38,7 @@ const AddAlbumForm = () => {
         <Input />
       </Form.Item>
       <Form.Item label="Artist" name="artistID" rules={REQUIRED}>
-        {/* <Select
+        <Select
           showSearch
           placeholder="Select artist"
           filterOption={false}
@@ -53,7 +53,7 @@ const AddAlbumForm = () => {
                 {artist.name}
               </Select.Option>
             ))}
-        </Select> */}
+        </Select>
       </Form.Item>
     </>
   );

media-store/app/src/pages/person/MyInvoices.js

@@ -24,6 +24,7 @@ const INVOICE_STATUS = {
 };
 const CANCELLED_STATUS = -1;
 const DATE_TIME_FORMAT_PATTERN = "LLLL";
+const UTC_DATE_TIME_FORMAT = "YYYY-MM-DDThh:mm:ss";
 const INVOICE_ITEMS_COLUMNS = [
   {
     title: "Track name",
@@ -45,16 +46,16 @@ const INVOICE_ITEMS_COLUMNS = [
 const LEVERAGE_DURATION = 1; // in hours
 const STATUSES = { submitted: 1, shipped: 2, canceled: -1 };
 
-const isLeverageTimeExpired = (invoiceDate) => {
+const isLeverageTimeExpired = (utcNowTimestamp, invoiceDate) => {
   const duration = moment.duration(
-    moment(moment().utc().format()).diff(invoiceDate)
+    moment(utcNowTimestamp).diff(moment(invoiceDate).valueOf())
   );
   return duration.asHours() > LEVERAGE_DURATION;
 };
 
-const chooseStatus = (invoiceDate, statusFromDb) => {
+const chooseStatus = (utcNowTimestamp, invoiceDate, statusFromDb) => {
   if (
-    isLeverageTimeExpired(invoiceDate) &&
+    isLeverageTimeExpired(utcNowTimestamp, invoiceDate) &&
     statusFromDb !== STATUSES.canceled
   ) {
     return INVOICE_STATUS[STATUSES.shipped];
@@ -67,7 +68,13 @@ const ExtraHeader = ({ ID, invoiceDate, status: initialStatus }) => {
   const { handleError } = useErrors();
   const [loadingHeaderId, setLoadingHeaderId] = useState();
   const [status, setStatus] = useState(initialStatus);
-  const statusConfig = chooseStatus(invoiceDate, status);
+
+  const statusConfig = useMemo(() => {
+    const utcNowTimestamp = moment(
+      moment().utc().format(UTC_DATE_TIME_FORMAT)
+    ).valueOf();
+    return chooseStatus(utcNowTimestamp, invoiceDate, status);
+  }, [status]);
 
   const onCancelInvoice = (event, ID) => {
     event.stopPropagation();

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useRef } from "react";
 import { Card, Button } from "antd";
 import { PlusOutlined, MinusOutlined } from "@ant-design/icons";
 import { useGlobals } from "../../GlobalContext";