chore(Customer): move subscription data fetch in components

getlago · Mar 10, 2023 · c52db0f · c52db0f
1 parent aa35d90
commit c52db0f
Show file tree

Hide file tree

Showing 7 changed files with 333 additions and 189 deletions.
diff --git a/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx b/src/components/customers/subscriptions/CustomerSubscriptionsList.tsx
@@ -1,7 +1,13 @@
 import { forwardRef, MutableRefObject, useRef } from 'react'
 import styled, { css } from 'styled-components'
+import { useParams } from 'react-router-dom'
+import { gql } from '@apollo/client'
 
-import { SubscriptionItemFragment, TimezoneEnum } from '~/generated/graphql'
+import {
+  SubscriptionItemFragmentDoc,
+  TimezoneEnum,
+  useGetCustomerSubscriptionForListQuery,
+} from '~/generated/graphql'
 import { Typography, Button } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { theme, HEADER_TABLE_HEIGHT } from '~/styles'
@@ -18,87 +24,104 @@ import {
   TerminateCustomerSubscriptionDialogRef,
 } from './TerminateCustomerSubscriptionDialog'
 
+gql`
+  query getCustomerSubscriptionForList($id: ID!) {
+    customer(id: $id) {
+      id
+      subscriptions(status: [active, pending]) {
+        id
+        plan {
+          id
+          amountCurrency
+        }
+        ...SubscriptionItem
+      }
+    }
+  }
+
+  ${SubscriptionItemFragmentDoc}
+`
+
 interface CustomerSubscriptionsListProps {
-  subscriptions?: SubscriptionItemFragment[]
   customerTimezone: TimezoneEnum
-  loading?: boolean
 }
 
 export const CustomerSubscriptionsList = forwardRef<
   AddSubscriptionDrawerRef,
   CustomerSubscriptionsListProps
->(
-  (
-    { subscriptions, loading, customerTimezone }: CustomerSubscriptionsListProps,
-    addSubscriptionDialogRef
-  ) => {
-    const { translate } = useInternationalization()
-    const hasNoSubscription = !subscriptions || !subscriptions.length
-    const editSubscriptionDrawerRef = useRef<EditCustomerSubscriptionDrawerRef>(null)
-    const terminateSubscriptionDialogRef = useRef<TerminateCustomerSubscriptionDialogRef>(null)
-    const subscriptionItemRef = useRef<SubscriptionItemRef>({
-      addSubscriptionDialogRef,
-      editSubscriptionDrawerRef,
-      terminateSubscriptionDialogRef,
-    })
-
-    return (
-      <SideSection $empty={hasNoSubscription}>
-        <Header variant="subhead" $loading={loading}>
-          {translate('text_6250304370f0f700a8fdc28d')}
-          <Button
-            data-test="add-subscription"
-            variant="quaternary"
-            onClick={() =>
-              (
-                addSubscriptionDialogRef as MutableRefObject<AddSubscriptionDrawerRef>
-              )?.current?.openDialog()
-            }
-          >
-            {translate('text_6250304370f0f700a8fdc28b')}
-          </Button>
-        </Header>
-        {loading ? (
-          <LoadingContent>
-            {[0, 1, 2].map((_, i) => (
-              <SubscriptionItemSkeleton key={`customer-subscription-skeleton-${i}`} />
-            ))}
-          </LoadingContent>
-        ) : hasNoSubscription ? (
-          <Typography>{translate('text_6250304370f0f700a8fdc28f')}</Typography>
-        ) : (
-          <>
-            <ListHeader>
-              <CellBigHeader variant="bodyHl" color="disabled" noWrap>
-                {translate('text_6253f11816f710014600b9ed')}
-              </CellBigHeader>
-              <CellStatusHeader variant="bodyHl" color="disabled">
-                {translate('text_62d7f6178ec94cd09370e5fb')}
-              </CellStatusHeader>
-              <CellSmall variant="bodyHl" color="disabled" align="right">
-                {translate('text_6253f11816f710014600b9f1')}
-              </CellSmall>
-            </ListHeader>
-            <List>
-              {subscriptions.map((subscription, i) => {
-                return (
-                  <SubscriptionItem
-                    ref={subscriptionItemRef}
-                    key={`${subscription?.id}-${i}`}
-                    subscription={subscription}
-                    customerTimezone={customerTimezone}
-                  />
-                )
-              })}
-            </List>
-          </>
-        )}
-        <EditCustomerSubscriptionDrawer ref={editSubscriptionDrawerRef} />
-        <TerminateCustomerSubscriptionDialog ref={terminateSubscriptionDialogRef} />
-      </SideSection>
-    )
-  }
-)
+>(({ customerTimezone }: CustomerSubscriptionsListProps, addSubscriptionDialogRef) => {
+  const { id } = useParams()
+  const { translate } = useInternationalization()
+  const { data, loading } = useGetCustomerSubscriptionForListQuery({
+    variables: { id: id as string },
+    skip: !id,
+  })
+  const subscriptions = data?.customer?.subscriptions
+  const hasNoSubscription = !subscriptions || !subscriptions.length
+  const editSubscriptionDrawerRef = useRef<EditCustomerSubscriptionDrawerRef>(null)
+  const terminateSubscriptionDialogRef = useRef<TerminateCustomerSubscriptionDialogRef>(null)
+  const subscriptionItemRef = useRef<SubscriptionItemRef>({
+    addSubscriptionDialogRef,
+    editSubscriptionDrawerRef,
+    terminateSubscriptionDialogRef,
+  })
+
+  return (
+    <SideSection $empty={hasNoSubscription}>
+      <Header variant="subhead" $loading={loading}>
+        {translate('text_6250304370f0f700a8fdc28d')}
+        <Button
+          data-test="add-subscription"
+          variant="quaternary"
+          onClick={() =>
+            (
+              addSubscriptionDialogRef as MutableRefObject<AddSubscriptionDrawerRef>
+            )?.current?.openDialog()
+          }
+        >
+          {translate('text_6250304370f0f700a8fdc28b')}
+        </Button>
+      </Header>
+      {loading ? (
+        <LoadingContent>
+          {[0, 1, 2].map((_, i) => (
+            <SubscriptionItemSkeleton key={`customer-subscription-skeleton-${i}`} />
+          ))}
+        </LoadingContent>
+      ) : hasNoSubscription ? (
+        <Typography>{translate('text_6250304370f0f700a8fdc28f')}</Typography>
+      ) : (
+        <>
+          <ListHeader>
+            <CellBigHeader variant="bodyHl" color="disabled" noWrap>
+              {translate('text_6253f11816f710014600b9ed')}
+            </CellBigHeader>
+            <CellStatusHeader variant="bodyHl" color="disabled">
+              {translate('text_62d7f6178ec94cd09370e5fb')}
+            </CellStatusHeader>
+            <CellSmall variant="bodyHl" color="disabled" align="right">
+              {translate('text_6253f11816f710014600b9f1')}
+            </CellSmall>
+          </ListHeader>
+          <List>
+            {subscriptions.map((subscription, i) => {
+              return (
+                <SubscriptionItem
+                  ref={subscriptionItemRef}
+                  key={`${subscription?.id}-${i}`}
+                  subscription={subscription}
+                  customerTimezone={customerTimezone}
+                />
+              )
+            })}
+          </List>
+        </>
+      )}
+      <EditCustomerSubscriptionDrawer ref={editSubscriptionDrawerRef} />
+      <TerminateCustomerSubscriptionDialog ref={terminateSubscriptionDialogRef} />
+    </SideSection>
+  )
+})
 
 CustomerSubscriptionsList.displayName = 'CustomerSubscriptionsList'
 

diff --git a/src/components/customers/subscriptions/TerminateCustomerSubscriptionDialog.tsx b/src/components/customers/subscriptions/TerminateCustomerSubscriptionDialog.tsx
@@ -4,13 +4,21 @@ import { gql } from '@apollo/client'
 import { DialogRef } from '~/components/designSystem'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { addToast } from '~/core/apolloClient'
-import { useTerminateCustomerSubscriptionMutation } from '~/generated/graphql'
+import {
+  CustomerDetailsFragment,
+  CustomerDetailsFragmentDoc,
+  useTerminateCustomerSubscriptionMutation,
+} from '~/generated/graphql'
 import { WarningDialog } from '~/components/WarningDialog'
 
 gql`
   mutation terminateCustomerSubscription($input: TerminateSubscriptionInput!) {
     terminateSubscription(input: $input) {
       id
+      customer {
+        id
+        activeSubscriptionCount
+      }
     }
   }
 `
@@ -41,6 +49,24 @@ export const TerminateCustomerSubscriptionDialog =
         })
 
         cache.evict({ id: cacheId })
+
+        const cachedCustomerId = `Customer:${data.terminateSubscription.customer.id}`
+
+        const previousData: CustomerDetailsFragment | null = cache.readFragment({
+          id: cachedCustomerId,
+          fragment: CustomerDetailsFragmentDoc,
+          fragmentName: 'CustomerDetails',
+        })
+
+        cache.writeFragment({
+          id: cachedCustomerId,
+          fragment: CustomerDetailsFragmentDoc,
+          fragmentName: 'CustomerDetails',
+          data: {
+            ...previousData,
+            activeSubscriptionCount: data.terminateSubscription.customer.activeSubscriptionCount,
+          },
+        })
       },
     })
     const [subscription, setSubscription] = useState<
@@ -64,7 +90,7 @@ export const TerminateCustomerSubscriptionDialog =
         onContinue={async () =>
           await terminate({
             variables: { input: { id: subscription?.id as string } },
-            refetchQueries: ['getCustomer'],
+            refetchQueries: ['getCustomerSubscriptionForList'],
           })
         }
         continueText={translate('text_62d7f6178ec94cd09370e351')}

diff --git a/src/components/customers/usage/CustomerUsage.tsx b/src/components/customers/usage/CustomerUsage.tsx
@@ -1,10 +1,11 @@
 import { gql } from '@apollo/client'
 import styled from 'styled-components'
+import { useParams } from 'react-router-dom'
 
 import {
-  CustomerUsageSubscriptionFragment,
   StatusTypeEnum,
   TimezoneEnum,
+  useGetCustomerSubscriptionForUsageQuery,
 } from '~/generated/graphql'
 import { useInternationalization } from '~/hooks/core/useInternationalization'
 import { theme, NAV_HEIGHT } from '~/styles'
@@ -13,7 +14,7 @@ import { Typography } from '~/components/designSystem'
 import { UsageItem, UsageItemSkeleton } from './UsageItem'
 
 gql`
-  fragment CustomerUsageSubscription on Subscription {
+  fragment CustomerSubscriptionForUsage on Subscription {
     id
     name
     status
@@ -23,22 +24,30 @@ gql`
       code
     }
   }
+
+  query getCustomerSubscriptionForUsage($id: ID!) {
+    customer(id: $id) {
+      id
+      subscriptions(status: [active, pending]) {
+        id
+        ...CustomerSubscriptionForUsage
+      }
+    }
+  }
 `
 
 interface CustomerUsageProps {
-  id: string
-  subscriptions: CustomerUsageSubscriptionFragment[]
-  loading?: boolean
   customerTimezone: TimezoneEnum
 }
 
-export const CustomerUsage = ({
-  loading,
-  id,
-  subscriptions,
-  customerTimezone,
-}: CustomerUsageProps) => {
+export const CustomerUsage = ({ customerTimezone }: CustomerUsageProps) => {
+  const { id } = useParams()
   const { translate } = useInternationalization()
+  const { data, loading } = useGetCustomerSubscriptionForUsageQuery({
+    variables: { id: id as string },
+    skip: !id,
+  })
+  const subscriptions = data?.customer?.subscriptions
 
   return (
     <div>
@@ -58,7 +67,7 @@ export const CustomerUsage = ({
             .map((subscription) => (
               <UsageItem
                 key={subscription?.id}
-                customerId={id}
+                customerId={id as string}
                 subscription={subscription}
                 customerTimezone={customerTimezone}
               />

diff --git a/src/components/customers/usage/UsageItem.tsx b/src/components/customers/usage/UsageItem.tsx
@@ -7,7 +7,7 @@ import {
   ChargeUsage,
   CurrencyEnum,
   CustomerUsageForUsageDetailsFragmentDoc,
-  CustomerUsageSubscriptionFragment,
+  CustomerSubscriptionForUsageFragment,
   useCustomerUsageLazyQuery,
   TimezoneEnum,
 } from '~/generated/graphql'
@@ -51,7 +51,7 @@ gql`
 
 interface UsageItemProps {
   customerId: string
-  subscription: CustomerUsageSubscriptionFragment
+  subscription: CustomerSubscriptionForUsageFragment
   customerTimezone: TimezoneEnum
 }