fix(core): refresh the entire list of addresses after deleting an add…

…ress and redirect to the first page
bigcommerce · Dec 5, 2024 · 6d2feac · 6d2feac
1 parent 51c1585
commit 6d2feac
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 69 deletions.
diff --git a/core/app/[locale]/(default)/account/(tabs)/addresses/_actions/delete-address.ts b/core/app/[locale]/(default)/account/(tabs)/addresses/_actions/delete-address.ts
@@ -8,13 +8,6 @@ import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 
 import { State } from '../../settings/change-password/_actions/change-password';
-import { Addresses } from '../_components/address-book';
-import { SearchParams } from '../page';
-import { getCustomerAddresses } from '../page-data';
-
-interface DeleteAddressResponse extends State {
-  addresses?: Addresses;
-}
 
 const DeleteCustomerAddressMutation = graphql(`
   mutation DeleteCustomerAddressMutation(
@@ -39,13 +32,9 @@ const DeleteCustomerAddressMutation = graphql(`
   }
 `);
 
-export const deleteAddress = async (
-  addressId: number,
-  searchParams?: SearchParams,
-): Promise<DeleteAddressResponse> => {
+export const deleteAddress = async (addressId: number): Promise<State> => {
   const t = await getTranslations('Account.Addresses.Delete');
   const customerAccessToken = await getSessionCustomerAccessToken();
-  const { before, after } = searchParams || {};
 
   try {
     const response = await client.fetch({
@@ -64,16 +53,7 @@ export const deleteAddress = async (
     revalidatePath('/account/addresses', 'page');
 
     if (result.errors.length === 0) {
-      const updatedData = await getCustomerAddresses({
-        ...(after && { after }),
-        ...(before && { before }),
-      });
-
-      return {
-        status: 'success',
-        message: t('success'),
-        addresses: updatedData?.addresses || [],
-      };
+      return { status: 'success', message: t('success') };
     }
 
     return {

diff --git a/core/app/[locale]/(default)/account/(tabs)/addresses/_components/address-book.tsx b/core/app/[locale]/(default)/account/(tabs)/addresses/_components/address-book.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 
 import { ExistingResultType } from '~/client/util';
 import { Link } from '~/components/link';
@@ -12,36 +12,26 @@ import { useRouter } from '~/i18n/routing';
 import { useAccountStatusContext } from '../../_components/account-status-provider';
 import { Modal } from '../../_components/modal';
 import { deleteAddress } from '../_actions/delete-address';
-import { SearchParams } from '../page';
 import { getCustomerAddresses } from '../page-data';
 
 export type Addresses = ExistingResultType<typeof getCustomerAddresses>['addresses'];
 
 interface AddressChangeProps {
   addressId: number;
   isAddressRemovable: boolean;
-  onDelete: (addresses: Addresses) => void;
-  searchParams: SearchParams;
 }
 
-const AddressChangeButtons = ({
-  addressId,
-  isAddressRemovable,
-  onDelete,
-  searchParams,
-}: AddressChangeProps) => {
+const AddressChangeButtons = ({ addressId, isAddressRemovable }: AddressChangeProps) => {
   const { setAccountState } = useAccountStatusContext();
   const t = useTranslations('Account.Addresses');
 
   const handleDeleteAddress = async () => {
-    const result = await deleteAddress(addressId, searchParams);
-
-    if (result.status === 'success' && result.addresses) {
-      onDelete(result.addresses);
+    const submit = await deleteAddress(addressId);
 
+    if (submit.status === 'success') {
       setAccountState({
         status: 'success',
-        message: result.message || '',
+        message: submit.message || '',
       });
     }
   };
@@ -67,29 +57,22 @@ const AddressChangeButtons = ({
 interface AddressBookProps {
   customerAddresses: Addresses;
   addressesCount: number;
-  hasPreviousPage: boolean;
-  startCursor: string | null;
-  searchParams: SearchParams;
 }
 
 export const AddressBook = ({
   children,
   addressesCount,
   customerAddresses,
-  hasPreviousPage,
-  startCursor,
-  searchParams,
 }: PropsWithChildren<AddressBookProps>) => {
   const t = useTranslations('Account.Addresses');
-  const [addressBook, setAddressBook] = useState(customerAddresses);
   const { accountState } = useAccountStatusContext();
   const router = useRouter();
 
   useEffect(() => {
-    if (addressBook.length === 0 && hasPreviousPage) {
-      router.push(`/account/addresses/?before=${startCursor}`);
+    if (customerAddresses.length === 0) {
+      router.push(`/account/addresses/`);
     }
-  }, [addressBook, hasPreviousPage, startCursor, router]);
+  }, [customerAddresses, router]);
 
   return (
     <>
@@ -100,7 +83,7 @@ export const AddressBook = ({
       )}
       {!addressesCount && <p className="border-t py-12 text-center">{t('emptyAddresses')}</p>}
       <ul className="mb-12">
-        {addressBook.map(
+        {customerAddresses.map(
           ({
             entityId,
             firstName,
@@ -127,12 +110,7 @@ export const AddressBook = ({
                 </p>
                 <p>{countryCode}</p>
               </div>
-              <AddressChangeButtons
-                addressId={entityId}
-                isAddressRemovable={addressesCount > 1}
-                onDelete={setAddressBook}
-                searchParams={searchParams}
-              />
+              <AddressChangeButtons addressId={entityId} isAddressRemovable={addressesCount > 1} />
             </li>
           ),
         )}

diff --git a/core/app/[locale]/(default)/account/(tabs)/addresses/page.tsx b/core/app/[locale]/(default)/account/(tabs)/addresses/page.tsx
@@ -8,14 +8,12 @@ import { TabHeading } from '../_components/tab-heading';
 import { AddressBook } from './_components/address-book';
 import { getCustomerAddresses } from './page-data';
 
-export interface SearchParams {
-  [key: string]: string | string[] | undefined;
-  before?: string;
-  after?: string;
-}
-
 interface Props {
-  searchParams: Promise<SearchParams>;
+  searchParams: Promise<{
+    [key: string]: string | string[] | undefined;
+    before?: string;
+    after?: string;
+  }>;
 }
 
 export async function generateMetadata() {
@@ -44,14 +42,7 @@ export default async function Addresses({ searchParams }: Props) {
   return (
     <>
       <TabHeading heading="addresses" />
-      <AddressBook
-        addressesCount={addressesCount}
-        customerAddresses={addresses}
-        hasPreviousPage={hasPreviousPage}
-        key={startCursor}
-        searchParams={{ before, after }}
-        startCursor={startCursor}
-      >
+      <AddressBook addressesCount={addressesCount} customerAddresses={addresses} key={endCursor}>
         <Pagination
           className="my-0 inline-flex justify-center text-center"
           endCursor={endCursor ?? undefined}