From c492fca97412038b8ff8400530172a5257fcaa68 Mon Sep 17 00:00:00 2001
From: Vu Nguyen <nphivu414@gmail.com>
Date: Thu, 28 May 2020 15:44:37 +0700
Subject: [PATCH] fix: #1392 Hide loader after finishing fetching data in
 analytics page

---
 .../cost-explorer-table.tsx                   | 73 ++++++++++---------
 .../marketplace/src/reducers/developer.ts     |  4 +-
 2 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/packages/marketplace/src/components/ui/developer-analytics/cost-explorer/cost-explorer-component/cost-explorer-table.tsx b/packages/marketplace/src/components/ui/developer-analytics/cost-explorer/cost-explorer-component/cost-explorer-table.tsx
index 2100e981f6..08c00704e6 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/cost-explorer/cost-explorer-component/cost-explorer-table.tsx
+++ b/packages/marketplace/src/components/ui/developer-analytics/cost-explorer/cost-explorer-component/cost-explorer-table.tsx
@@ -3,7 +3,7 @@ import { formatNumber, formatCurrency } from '@/utils/number-formatter'
 import { Table, Loader } from '@reapit/elements'
 import { useSelector } from 'react-redux'
 import { selectMonthlyBilling, selectMonthlyBillingLoading } from '@/selector/developer'
-import { EndpointBilling } from '@/reducers/developer'
+import { EndpointBilling, MonthlyBilling } from '@/reducers/developer'
 
 export type CostExplorerTableProps = {}
 
@@ -16,6 +16,9 @@ export type TableRow = {
 }
 
 export const prepareTableData = data => {
+  if (!data) {
+    return []
+  }
   const preparedData = data.map(({ requestsByEndpoint, ...row }) => {
     const subRows = requestsByEndpoint.map((request: EndpointBilling) => {
       return {
@@ -35,48 +38,52 @@ interface PrepareTableColumns {
   totalRequests: number
 }
 
-export const prepareTableColumns = ({ totalCost, totalEndpoints, totalRequests }: PrepareTableColumns) => [
-  {
-    Header: 'Resource',
-    accessor: 'serviceName',
-    columnProps: {
-      className: 'capitalize',
-      width: 200,
+export const prepareTableColumns = (monthlyBilling?: MonthlyBilling | null) => {
+  const totalEndpoints = monthlyBilling?.totalEndpoints || 0
+  const totalRequests = monthlyBilling?.totalRequests || 0
+  const totalCost = monthlyBilling?.totalCost || 0
+  return [
+    {
+      Header: 'Resource',
+      accessor: 'serviceName',
+      columnProps: {
+        className: 'capitalize',
+        width: 200,
+      },
+      Footer: 'Total',
     },
-    Footer: 'Total',
-  },
-  {
-    Header: 'Endpoints',
-    accessor: row => {
-      return row.endpointCount && formatNumber(row.endpointCount)
+    {
+      Header: 'Endpoints',
+      accessor: row => {
+        return row.endpointCount && formatNumber(row.endpointCount)
+      },
+      Footer: formatNumber(totalEndpoints),
     },
-    Footer: formatNumber(totalEndpoints),
-  },
-  {
-    Header: 'API Calls',
-    accessor: row => {
-      return row.requestCount && formatNumber(row.requestCount)
+    {
+      Header: 'API Calls',
+      accessor: row => {
+        return row.requestCount && formatNumber(row.requestCount)
+      },
+      Footer: formatNumber(totalRequests),
     },
-    Footer: formatNumber(totalRequests),
-  },
-  {
-    Header: 'Cost',
-    accessor: row => {
-      return row.cost && formatCurrency(row.cost)
+    {
+      Header: 'Cost',
+      accessor: row => {
+        return row.cost && formatCurrency(row.cost)
+      },
+      Footer: formatCurrency(totalCost),
     },
-    Footer: formatCurrency(totalCost),
-  },
-]
+  ]
+}
 
 const CostExplorerTable: React.FC<CostExplorerTableProps> = () => {
   const monthlyBilling = useSelector(selectMonthlyBilling)
   const isLoading = useSelector(selectMonthlyBillingLoading)
 
-  if (isLoading || !monthlyBilling) return <Loader />
+  if (isLoading) return <Loader />
 
-  const { totalCost, totalEndpoints, totalRequests } = monthlyBilling
-  const columns = prepareTableColumns({ totalCost, totalEndpoints, totalRequests })
-  const tableData = prepareTableData(monthlyBilling.requestsByService)
+  const columns = prepareTableColumns(monthlyBilling)
+  const tableData = prepareTableData(monthlyBilling)
 
   return (
     <>
diff --git a/packages/marketplace/src/reducers/developer.ts b/packages/marketplace/src/reducers/developer.ts
index 3752d6990c..885f4fb5bb 100644
--- a/packages/marketplace/src/reducers/developer.ts
+++ b/packages/marketplace/src/reducers/developer.ts
@@ -112,9 +112,9 @@ export const defaultState: DeveloperState = {
   isVisible: false,
   myIdentity: null,
   billing: null,
-  isServiceChartLoading: true,
+  isServiceChartLoading: false,
   error: null,
-  isMonthlyBillingLoading: true,
+  isMonthlyBillingLoading: false,
   monthlyBilling: null,
   webhookPingTestStatus: null,
 }