Update invoices page to use head method to retrieve invoices count

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()
 

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

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)
   }