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

.changeset/smart-feet-jump.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+refresh the entire list of addresses after deleting an address

core/app/[locale]/(default)/account/(tabs)/addresses/_components/address-book.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 
 import { ExistingResultType } from '~/client/util';
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
 import { Message } from '~/components/ui/message';
+import { useRouter } from '~/i18n/routing';
 
 import { useAccountStatusContext } from '../../_components/account-status-provider';
 import { Modal } from '../../_components/modal';
@@ -18,21 +19,16 @@ export type Addresses = ExistingResultType<typeof getCustomerAddresses>['address
 interface AddressChangeProps {
   addressId: number;
   isAddressRemovable: boolean;
-  onDelete: (state: Addresses | ((prevState: Addresses) => Addresses)) => void;
 }
 
-const AddressChangeButtons = ({ addressId, isAddressRemovable, onDelete }: AddressChangeProps) => {
+const AddressChangeButtons = ({ addressId, isAddressRemovable }: AddressChangeProps) => {
   const { setAccountState } = useAccountStatusContext();
   const t = useTranslations('Account.Addresses');
 
   const handleDeleteAddress = async () => {
     const submit = await deleteAddress(addressId);
 
     if (submit.status === 'success') {
-      onDelete((prevAddressBook) =>
-        prevAddressBook.filter(({ entityId }) => entityId !== addressId),
-      );
-
       setAccountState({
         status: 'success',
         message: submit.message || '',
@@ -69,8 +65,14 @@ export const AddressBook = ({
   customerAddresses,
 }: PropsWithChildren<AddressBookProps>) => {
   const t = useTranslations('Account.Addresses');
-  const [addressBook, setAddressBook] = useState(customerAddresses);
   const { accountState } = useAccountStatusContext();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (customerAddresses.length === 0) {
+      router.push(`/account/addresses/`);
+    }
+  }, [customerAddresses, router]);
 
   return (
     <>
@@ -81,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,
@@ -108,11 +110,7 @@ export const AddressBook = ({
                 </p>
                 <p>{countryCode}</p>
               </div>
-              <AddressChangeButtons
-                addressId={entityId}
-                isAddressRemovable={addressesCount > 1}
-                onDelete={setAddressBook}
-              />
+              <AddressChangeButtons addressId={entityId} isAddressRemovable={addressesCount > 1} />
             </li>
           ),
         )}

core/app/[locale]/(default)/account/(tabs)/addresses/page-data.ts

@@ -51,7 +51,7 @@ interface Pagination {
 }
 
 export const getCustomerAddresses = cache(
-  async ({ before = '', after = '', limit = 9 }: Pagination) => {
+  async ({ before = '', after = '', limit = 10 }: Pagination) => {
     const customerAccessToken = await getSessionCustomerAccessToken();
     const paginationArgs = before ? { last: limit, before } : { first: limit, after };
 

core/app/[locale]/(default)/account/(tabs)/addresses/page.tsx

@@ -30,7 +30,6 @@ export default async function Addresses({ searchParams }: Props) {
   const data = await getCustomerAddresses({
     ...(after && { after }),
     ...(before && { before }),
-    limit: 10,
   });
 
   if (!data) {