Update Customer Addresses and details

[Pankajmehta1998]

I am updating Customer Address and details, but when i am trying to update address then instead of updating its creating new data in backend. This is my hydrogen js code:

import {Form, json, Link, redirect, useActionData, useLoaderData} from '@remix-run/react';
import {parse} from 'cookie';
import {useEffect, useState} from 'react';
import EditAddressPopup from '~/components/Popup/AddressPopup/EditAddressPopup';
import {
  ADD_CUSTOMER_ADDRESS,
  DELETE_CUSTOMER_ADDRESS,
  GET_CUSTOMER_ADDRESSES,
  SET_DEFAULT_ADDRESS,
  UPDATE_CUSTOMER_ADDRESS,
} from '~/graphql/Mutation/Mutation';
import {addressCountryOptions} from '~/utility/CountryList';

interface ActionData {
  success: boolean;
  accessToken?: any;
  expiresAt?: any;
  error?: string;
}
export async function action({request, context}: {request: any; context: any}) {
  const {storefront} = context;
  const formData = await request.formData();
  const actionType = formData.get('actionType');
  const id = formData.get('addressId');
  const cookieHeader = request.headers.get('Cookie');
  const cookies = parse(cookieHeader || '');
  const customerAccessToken = cookies.customerAccessToken;
  
  if (!customerAccessToken) {
    return json({success: false, error: 'Customer access token is missing.'});
  }

  if (actionType === 'delete' && id) {
    if (!id.startsWith('gid://shopify/MailingAddress/')) {
      return json({success: false, error: 'Invalid address ID format'});
    }

    try {
      const {customerAddressDelete, errors} = await storefront.mutate(
        DELETE_CUSTOMER_ADDRESS,
        {
          variables: {customerAccessToken, id},
        },
      );

      if (errors || customerAddressDelete.userErrors.length > 0) {
        return json({
          success: false,
          error: 'Error deleting address',
          details: errors || customerAddressDelete.userErrors,
        });
      }

      const {customer} = await storefront.query(GET_CUSTOMER_ADDRESSES, {
        variables: {customerAccessToken},
      });

      const defaultAddressDeleted = customer?.defaultAddress?.id === id;
        return redirect('/accounts/address');
    //   return json({
    //     success: true,
    //     deletedAddressId: customerAddressDelete.deletedCustomerAddressId,
    //     defaultAddressDeleted,
    //   });
    } catch (error) {
      console.error('Error:', error);
      return json({
        success: false,
        error: 'An unexpected error occurred',
        details: error?.message,
      });
    }
  }

  if (actionType === 'update' && id) {
    if (!id.startsWith('gid://shopify/MailingAddress/')) {
      return json({success: false, error: 'Invalid address ID format'});
    }
    
    const firstName = formData.get('firstName');
    const lastName = formData.get('lastName');
    const company = formData.get('company');
    const address1 = formData.get('address1');
    const address2 = formData.get('address2');
    const city = formData.get('city');
    const country = formData.get('country');
    const zip = formData.get('zip');
    const phone = formData.get('phone');

    if (!firstName || !lastName || !address1 || !city || !country || !zip) {
      return json({
        success: false,
        error: 'All required fields must be filled out.',
      });
    }

    const customer = {
      firstName,
      lastName,
      company,
      address1,
      address2,
      city,
      country,
      zip,
      phone,
    };

    try {
      const response = await storefront.mutate(UPDATE_CUSTOMER_ADDRESS, {
        variables: {customer, customerAccessToken, id},
      });

      const {customerAddressUpdate, errors} = response;

      if (errors || customerAddressUpdate?.customerUserErrors?.length > 0) {
        return json({
          success: false,
          error: 'Error updating address',
          details: errors || customerAddressUpdate.customerUserErrors,
        });
      }

      return json({
        success: true,
        address: customerAddressUpdate?.customerAddress,
      });
    } catch (error) {
      console.error('Error:', error);
      return json({
        success: false,
        error: 'An unexpected error occurred',
        details: error?.message,
      });
    }
  }

  // Handle adding a new address
  const firstName = formData.get('firstName');
  const lastName = formData.get('lastName');
  const company = formData.get('company');
  const address1 = formData.get('address1');
  const address2 = formData.get('address2');
  const city = formData.get('city');
  const country = formData.get('country');
  const zip = formData.get('zip');
  const phone = formData.get('phone');
  const isDefault = formData.get('defaultAddress') === 'on';
  if (!firstName || !lastName || !address1 || !city || !country || !zip) {
    return json({
      success: false,
      error: 'All required fields must be filled out.',
    });
  }

  const input = {
    firstName,
    lastName,
    company,
    address1,
    address2,
    city,
    country,
    zip,
    phone,
  };

  try {
    const response = await storefront.mutate(ADD_CUSTOMER_ADDRESS, {
      variables: {input, customerAccessToken},
    });

    const {customerAddressCreate, errors} = response;

    if (errors || customerAddressCreate?.userErrors?.length > 0) {
      return json({
        success: false,
        error: 'Error adding address',
        details: errors || customerAddressCreate.userErrors,
      });
    }

    const newAddressId = customerAddressCreate.customerAddress.id;

    // Set the address as default if required
    if (isDefault) {
      const defaultResponse = await storefront.mutate(SET_DEFAULT_ADDRESS, {
        variables: {addressId: newAddressId, customerAccessToken},
      });

      const {customerDefaultAddressUpdate, errors: defaultErrors} =
        defaultResponse;

      if (
        defaultErrors ||
        customerDefaultAddressUpdate?.userErrors?.length > 0
      ) {
        return json({
          success: false,
          error: 'Error setting default address',
          details: defaultErrors || customerDefaultAddressUpdate?.userErrors,
        });
      }
    }

    return json({
      success: true,
      address: customerAddressCreate?.customerAddress,
    });
  } catch (error) {
    console.error('Error:', error);
    return json({
      success: false,
      error: 'An unexpected error occurred',
      details: error?.message,
    });
  }
}

export async function loader({context, request}: {context: any; request: any}) {
  const {storefront} = context;
  const cookieHeader = request.headers.get('Cookie');
  const cookies = parse(cookieHeader || '');
  const customerAccessToken = cookies.customerAccessToken;

  if (!customerAccessToken) {
    console.error('Customer access token is missing.');
    return json({addresses: []});
  }

  try {
    const {customer, errors} = await storefront.query(GET_CUSTOMER_ADDRESSES, {
      variables: {customerAccessToken},
    });

    if (errors) {
      console.error(
        'Error fetching addresses:',
        JSON.stringify(errors, null, 2),
      );
      return json({addresses: []});
    }

    console.log('GraphQL Response Data:', JSON.stringify(customer, null, 2));
    const {addresses, defaultAddress} = customer;

    const normalAddresses = addresses.edges
      .map((edge: any) => edge.node)
      .filter((address: any) => address.id !== defaultAddress?.id);
    return json({
      addresses: normalAddresses,
      defaultAddress,
    });
  } catch (error) {
    console.error('Error in loader:', error);
    return json({addresses: []});
  }
}

export default function AccountAddress() {
  const actionData: any = useActionData<ActionData>();
//   const {customer} = useLoaderData<typeof loader>();
//   console.log('data', customer);
  console.log('actionData', actionData);
  const [editAddressPopupStatus, setEditAddressPopupStatus] = useState(false);
  const [activeTabValue, setActiveTabValue] = useState('');
  const [addressData, setAddressData] = useState({
    id: '',
    firstName: '',
    lastName: '',
    company: '',
    address1: '',
    address2: '',
    city: '',
    country: '',
    zip: '',
    phone: '',
    defaultAddress: false,
  });

  const { addresses, defaultAddress } = useLoaderData();
  const handleChange = (e: any) => {
    const {name, value, type, checked} = e.target;
    setAddressData({
      ...addressData,
      [name]: type === 'checkbox' ? checked : value,
    });
  };

//   useEffect(() => {
//     if (actionData?.success) {
//       if (actionData?.deletedAddressId) {
//         setAddresses((prevAddresses: any) =>
//           prevAddresses.filter(
//             (address: any) => address?.node?.id !== actionData.deletedAddressId,
//           ),
//         );
//       }
//       if (actionData?.defaultAddressDeleted) {
//         setDefaultAddress(null);
//       }
//     }
//   }, [actionData]);

//   useEffect(() => {
//     setAddresses(customer?.addresses?.edges || []);
//     setDefaultAddress(customer?.defaultAddress || null);
//   }, [customer]);

  return (
    <div className="customer-address-top">
      <h1 id="login" className="customer-address-heading">
        Addresses
      </h1>
      <p className="customer-address-main">
        <Link className="customer-address-text" to="/customer/account">
          Return to Account details
        </Link>
      </p>
      <div className="customer-new-address-top">
        <button
          className="customer-new-address-button"
          type="submit"
          onClick={() => {
            setAddressData({
              id: '',
              firstName: '',
              lastName: '',
              company: '',
              address1: '',
              address2: '',
              city: '',
              country: '',
              zip: '',
              phone: '',
              defaultAddress: false,
            });
            setActiveTabValue('add');
            setEditAddressPopupStatus(true);
          }}
        >
          Add A New Address
        </button>
      </div>
      <div className="customer-default-address">
        {defaultAddress && (
          <div className="customer-default-address-list">
            <h2 className="default-address-title">Default</h2>
            <p className="customer-addresses">
              {defaultAddress?.firstName} {defaultAddress?.lastName}
              <br />
              {defaultAddress?.company} <br />
              {defaultAddress?.address1}
              <br />
              {defaultAddress?.zip}
              <br />
              {defaultAddress?.city}
              <br />
              {defaultAddress?.country}
            </p>
            <div className="edit-delete-address">
              <Form method="post">
              <input type="hidden" name="actionType" value="update" />
                <input
                  type="hidden"
                  name="addressId"
                  value={defaultAddress?.id}
                />
                <button
                  className="button-edit-address"
                  type="submit"
                  onClick={() => {
                    setActiveTabValue('edit');
                    setEditAddressPopupStatus(true);
                    setAddressData({
                      id: defaultAddress?.id || '', 
                      firstName: defaultAddress?.firstName,
                      lastName: defaultAddress?.lastName,
                      company: defaultAddress?.company,
                      address1: defaultAddress?.address1,
                      address2: defaultAddress?.address2 || '',
                      city: defaultAddress?.city,
                      country: defaultAddress?.country,
                      zip: defaultAddress?.zip,
                      phone: defaultAddress?.phone || '',
                      defaultAddress: true,
                    });
                  }}
                >
                  Edit
                </button>
              </Form>
              <Form method="post">
                <input type="hidden" name="actionType" value="delete" />
                <input
                  type="hidden"
                  name="addressId"
                  value={defaultAddress?.id}
                />
                <button className="button-delete-address" type="submit">
                  Delete
                </button>
              </Form>
            </div>
          </div>
        )}
        <ul className="customer-default-address-list-top">
            {console.log("addresses",addresses)}
          {addresses?.map((item: any) => (
            <li className="customer-default-address-list" key={item?.id}>
              <p className="customer-addresses">
                {item?.firstName} {item?.lastName}
                <br />
                {item?.company} <br />
                {item?.address1}
                <br />
                {item?.zip}
                <br />
                {item?.city}
                <br />
                {item?.country}
              </p>
              <div className="edit-delete-address">
                <Form method="post">
                  <input type="hidden" name="actionType" value='update' />
                  <input
                    type="hidden"
                    name="addressId"
                    value={item?.id}
                  />
                  {console.log("item?.id",item?.id)}
                  <button
                    className="button-edit-address"
                    type="submit"
                    onClick={() => {
                      setActiveTabValue('edit');
                      setEditAddressPopupStatus(true);
                      setAddressData({
                        id: item?.id || '',
                        firstName: item?.firstName,
                        lastName: item?.lastName,
                        company: item?.company,
                        address1: item?.address1,
                        address2: item?.address2 || '',
                        city: item?.city,
                        country: item?.country,
                        zip: item?.zip,
                        phone: item?.phone || '',
                        defaultAddress: false,
                      });
                    }}
                  >
                    Edit
                  </button>
                </Form>
                <Form method="post">
                  <input type="hidden" name="actionType" value="delete" />
                  <input
                    type="hidden"
                    name="addressId"
                    value={item?.id}
                  />
                  <button className="button-delete-address" type="submit">
                    Delete
                  </button>
                </Form>
              </div>
            </li>
          ))}
        </ul>
      </div>

      {/* edit address popup */}
      <EditAddressPopup isOpen={editAddressPopupStatus}>
        {/* Content of your popup */}
        <div className="edit-popup-modal-main">
          <p
            title="Close"
            className="address-popup-close"
            onClick={() => setEditAddressPopupStatus(false)}
          >
            X
          </p>
          <h2 className="edit-add-adress-title">
            {activeTabValue === 'add' ? 'Add a new Address' : 'Edit Address'}
          </h2>
          <form method="post" id="customer-edit-add-address">
            <div className="customer-name-block">
              <div className="field first-name">
                <input
                  type="text"
                  id="AddressFirstName"
                  name="firstName"
                  value={addressData?.firstName}
                  placeholder="First name*"
                  className="field-input"
                  onChange={handleChange}
                  required
                />
              </div>
              <div className="field last-name">
                <input
                  type="text"
                  id="AddressLastName"
                  name="lastName"
                  value={addressData?.lastName}
                  placeholder="Last name*"
                  className="field-input"
                  onChange={handleChange}
                  required
                />
              </div>
            </div>
            <div className="field full-width">
              <input
                type="text"
                id="AddressCompanyNew"
                name="company"
                value={addressData?.company}
                placeholder="Company*"
                className="field-input"
                onChange={handleChange}
                required
              />
            </div>
            <div className="field full-width">
              <input
                type="text"
                id="address[address1]"
                name="address1"
                value={addressData?.address1}
                placeholder="Address 1*"
                className="field-input"
                onChange={handleChange}
                required
              />
            </div>
            <div className="field full-width">
              <input
                type="text"
                id="address[address2]"
                name="address2"
                value={addressData?.address2}
                placeholder="Address 2"
                className="field-input"
                onChange={handleChange}
              />
            </div>
            <div className="field full-width">
              <input
                type="text"
                id="address[city]"
                name="city"
                value={addressData?.city}
                placeholder="City*"
                className="field-input"
                onChange={handleChange}
                required
              />
            </div>
            <div className="field full-width">
              <select
                name="country"
                id="country"
                onChange={handleChange}
                value={addressData.country}
                required
              >
                {addressCountryOptions?.map((item: any) => (
                  <option
                    value={item}
                    className="address-country-values"
                    key={item}
                  >
                    {item}
                  </option>
                ))}
              </select>
            </div>
            <div className="field full-width">
              <input
                type="text"
                id="address[zip]"
                name="zip"
                value={addressData?.zip}
                placeholder="Postal/ZIP code*"
                className="field-input"
                onChange={handleChange}
                required
              />
            </div>
            <div className="field full-width">
              <input
                type="text"
                id="phone"
                name="phone"
                value={addressData?.phone}
                placeholder="Phone"
                className="field-input"
                onChange={handleChange}
              />
            </div>
            <div className="default-address-main">
              {/* <input type="checkbox" id="address_default_address_new" name="defaultAddress" value="1" className="default-address-checkbox" onChange={handleChange} /> */}
              <input
                type="checkbox"
                name="defaultAddress"
                checked={addressData.defaultAddress}
                onChange={handleChange}
              />
              <span className="set-as-default-text">
                Set as default address
              </span>
            </div>

            <button className="customer-new-address-button" type="submit">
              {activeTabValue === 'add' ? 'Add Address' : 'Update Address'}
            </button>
          </form>
        </div>
      </EditAddressPopup>
    </div>
  );
}

and this is my update query:

export const UPDATE_CUSTOMER_ADDRESS = `
mutation customerUpdate($customer: CustomerUpdateInput!, $customerAccessToken: String!,  $addressId: ID!) {
  customerUpdate(customer: $customer, customerAccessToken: $customerAccessToken,   addressId: $addressId) {
    customer {
      id
      firstName
      lastName
      email
      phone
      addresses {
        edges {
          node {
            id
            firstName
            lastName
            address1
            address2
            city
            country
            zip
            phone
          }
        }
      }
    }
    customerAccessToken {
      accessToken
      expiresAt
    }
    customerUserErrors {
      field
      message
    }
    userErrors {
      field
      message
    }
  }
}

i have tried setting actionType for adding new address but its not working, delete is working fine and add is also working but in case of update instead of updating its adding new data.