From decb0b9cd8d816ca06fc821e271a54aa168bd15a Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 17 Feb 2022 18:38:52 +0800
Subject: [PATCH] Update invoices page to use head method to retrieve invoices
 count

---
 .../InvoicesSettings/InvoicesSettings.tsx     | 21 +++++++++----------
 studio/lib/common/fetch/base.ts               | 16 ++++++++++++++
 studio/lib/common/fetch/head.ts               | 11 +++-------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
index 8c92547da6b..4ea510daf8f 100644
--- a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
+++ b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
@@ -31,20 +31,19 @@ const InvoicesSettings: FC<Props> = ({ organization }) => {
   const { stripe_customer_id } = organization
   const offset = (page - 1) * PAGE_LIMIT
 
-  // [For Hieu] This is where I'm thinking we fetch the count
   useEffect(() => {
     let cancel = false
     const fetchInvoiceCount = async () => {
-      const res = await head(`${API_URL}/stripe/invoices?customer=${stripe_customer_id}`)
-      console.log('fetchInvoiceCount', res)
-      //   if (!cancel) {
-      //     console.log('fetchInvoiceCount', res)
-      //     if (res.error) {
-      //       ui.setNotification({ category: 'error', message: res.error.message })
-      //     } else {
-      //       setCount(res.count)
-      //     }
-      //   }
+      const res = await head(`${API_URL}/stripe/invoices?customer=${stripe_customer_id}`, [
+        'X-Total-Count',
+      ])
+      if (!cancel) {
+        if (res.error) {
+          ui.setNotification({ category: 'error', message: res.error.message })
+        } else {
+          setCount(res['X-Total-Count'])
+        }
+      }
     }
     fetchInvoiceCount()
 
diff --git a/studio/lib/common/fetch/base.ts b/studio/lib/common/fetch/base.ts
index 7206fdbab4c..fc5bb9fa7c8 100644
--- a/studio/lib/common/fetch/base.ts
+++ b/studio/lib/common/fetch/base.ts
@@ -26,6 +26,22 @@ export async function handleResponse<T>(
   }
 }
 
+export async function handleHeadResponse<T>(
+  response: Response,
+  requestId: string,
+  headers: string[]
+): Promise<SupaResponse<T>> {
+  try {
+    const res = {}
+    headers.forEach((header: string) => {
+      res[header] = response.headers.get(header)
+    })
+    return res
+  } catch (e) {
+    return handleError(response, requestId) as SupaResponse<T>
+  }
+}
+
 export async function handleResponseError<T = unknown>(
   response: Response,
   requestId: string
diff --git a/studio/lib/common/fetch/head.ts b/studio/lib/common/fetch/head.ts
index ed81cfa5b68..550fc2663b1 100644
--- a/studio/lib/common/fetch/head.ts
+++ b/studio/lib/common/fetch/head.ts
@@ -1,9 +1,10 @@
-import { handleError, handleResponse, handleResponseError, constructHeaders } from './base'
+import { handleError, handleHeadResponse, handleResponseError, constructHeaders } from './base'
 import { uuidv4 } from '../../helpers'
 import { SupaResponse } from 'types/base'
 
 export async function head<T = any>(
   url: string,
+  headersToRetrieve: string[],
   options?: { [prop: string]: any }
 ): Promise<SupaResponse<T>> {
   const requestId = uuidv4()
@@ -17,14 +18,8 @@ export async function head<T = any>(
       headers,
       ...otherOptions,
     })
-    console.log(
-      'HEAD',
-      response.headers,
-      response.headers.keys(),
-      response.headers.get('X-Total-Count')
-    )
     if (!response.ok) return handleResponseError(response, requestId)
-    return handleResponse(response, requestId)
+    return handleHeadResponse(response, requestId, headersToRetrieve)
   } catch (error) {
     return handleError(error, requestId)
   }