contentoh-components-library 21.2.1 → 21.2.2

package/dist/components/organisms/DashboardMetric/index.js

@@ -81,8 +81,8 @@ var DashboardMetric = function DashboardMetric(_ref) {
     setEndDate(end);
     if (end) setQueryObject(function (current) {
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, current), {}, {
-        startDate: "".concat(start.getFullYear(), "-").concat(start.getDate(), "-").concat(start.getMonth() + 1),
-        endDate: "".concat(end === null || end === void 0 ? void 0 : end.getFullYear(), "-").concat(end === null || end === void 0 ? void 0 : end.getDate(), "-").concat((end === null || end === void 0 ? void 0 : end.getMonth()) + 1)
+        startDate: "".concat(start.getFullYear(), "-").concat(start.getMonth() + 1, "-").concat(start.getDate()),
+        endDate: "".concat(end.getFullYear(), "-").concat(end.getMonth() + 1, "-").concat(end.getDate())
       });
     });
   };

package/dist/components/pages/Dashboard/index.js

@@ -21,6 +21,8 @@ var _DashboardMetric = require("../../organisms/DashboardMetric");
 
 var _react = require("react");
 
+var _Loading = require("../../atoms/Loading");
+
 var _axios = _interopRequireDefault(require("axios"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -41,12 +43,20 @@ var Dashboard = function Dashboard() {
       requiredProducts = _useState6[0],
       setRequiredProducts = _useState6[1];
 
-  var _useState7 = (0, _react.useState)({}),
+  var _useState7 = (0, _react.useState)({
+    retailerId: null,
+    startDate: null,
+    endDate: null
+  }),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       orderByStatus = _useState8[0],
       setOrderByStatus = _useState8[1];
 
-  var _useState9 = (0, _react.useState)({}),
+  var _useState9 = (0, _react.useState)({
+    retailerId: null,
+    startDate: null,
+    endDate: null
+  }),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
       orderByRequired = _useState10[0],
       setOrderByRequired = _useState10[1];
@@ -56,6 +66,11 @@ var Dashboard = function Dashboard() {
       retailers = _useState12[0],
       setRetailers = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(true),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      loading = _useState14[0],
+      setLoading = _useState14[1];
+
   var loadProductVersions = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(byStatus, queryObject) {
       var retailerId, startDate, endDate, fullData, query, response, versionList;
@@ -198,8 +213,8 @@ var Dashboard = function Dashboard() {
   (0, _react.useEffect)(function () {
     var today = new Date();
     var firstWeekDay = today.getDate() - today.getDay();
-    var startDate = "".concat(today.getFullYear(), "-").concat(firstWeekDay, "-").concat(today.getMonth() + 1);
-    var endDate = "".concat(today.getFullYear(), "-").concat(today.getDate(), "-").concat(today.getMonth() + 1);
+    var startDate = "".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-").concat(firstWeekDay);
+    var endDate = "".concat(today.getFullYear(), "-").concat(today.getMonth() + 1, "-").concat(today.getDate());
     var queryObject = {
       retailerId: "58",
       startDate: startDate,
@@ -215,7 +230,10 @@ var Dashboard = function Dashboard() {
   (0, _react.useEffect)(function () {
     loadRequiredProducts(orderByRequired);
   }, [orderByRequired]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  (0, _react.useEffect)(function () {
+    (orderByRequired === null || orderByRequired === void 0 ? void 0 : orderByRequired.retailerId) && (orderByStatus === null || orderByStatus === void 0 ? void 0 : orderByStatus.retailerId) && metricsData.length > 0 && setLoading(false);
+  }, [orderByRequired, orderByStatus, metricsData]);
+  return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "metric-cards",
       children: metricsData.map(function (metric, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.1",
+  "version": "21.2.2",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/organisms/DashboardMetric/index.js

@@ -41,12 +41,10 @@ export const DashboardMetric = ({
     if (end)
       setQueryObject((current) => ({
         ...current,
-        startDate: `${start.getFullYear()}-${start.getDate()}-${
+        startDate: `${start.getFullYear()}-${
           start.getMonth() + 1
-        }`,
-        endDate: `${end?.getFullYear()}-${end?.getDate()}-${
-          end?.getMonth() + 1
-        }`,
+        }-${start.getDate()}`,
+        endDate: `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`,
       }));
   };
 

package/src/components/pages/Dashboard/index.js

@@ -2,15 +2,25 @@ import { Container } from "./styles";
 import { MetricCard } from "../../atoms/MetricCard";
 import { DashboardMetric } from "../../organisms/DashboardMetric";
 import { useEffect, useState } from "react";
+import { Loading } from "../../atoms/Loading";
 import axios from "axios";
 
 export const Dashboard = () => {
   const [metricsData, setMetricsData] = useState([]);
   const [productsByStatus, setProductsByStatus] = useState({});
   const [requiredProducts, setRequiredProducts] = useState([]);
-  const [orderByStatus, setOrderByStatus] = useState({});
-  const [orderByRequired, setOrderByRequired] = useState({});
+  const [orderByStatus, setOrderByStatus] = useState({
+    retailerId: null,
+    startDate: null,
+    endDate: null,
+  });
+  const [orderByRequired, setOrderByRequired] = useState({
+    retailerId: null,
+    startDate: null,
+    endDate: null,
+  });
   const [retailers, setRetailers] = useState({});
+  const [loading, setLoading] = useState(true);
 
   const loadProductVersions = async (byStatus, queryObject) => {
     const { retailerId, startDate, endDate, fullData } = queryObject;
@@ -62,12 +72,12 @@ export const Dashboard = () => {
   useEffect(() => {
     const today = new Date();
     const firstWeekDay = today.getDate() - today.getDay();
-    const startDate = `${today.getFullYear()}-${firstWeekDay}-${
+    const startDate = `${today.getFullYear()}-${
       today.getMonth() + 1
-    }`;
-    const endDate = `${today.getFullYear()}-${today.getDate()}-${
+    }-${firstWeekDay}`;
+    const endDate = `${today.getFullYear()}-${
       today.getMonth() + 1
-    }`;
+    }-${today.getDate()}`;
     const queryObject = { retailerId: "58", startDate, endDate };
     setOrderByStatus(queryObject);
     setOrderByRequired(queryObject);
@@ -82,7 +92,16 @@ export const Dashboard = () => {
     loadRequiredProducts(orderByRequired);
   }, [orderByRequired]);
 
-  return (
+  useEffect(() => {
+    orderByRequired?.retailerId &&
+      orderByStatus?.retailerId &&
+      metricsData.length > 0 &&
+      setLoading(false);
+  }, [orderByRequired, orderByStatus, metricsData]);
+
+  return loading ? (
+    <Loading />
+  ) : (
     <Container>
       <div className="metric-cards">
         {metricsData.map((metric, index) => (