import React, { useEffect, Suspense } from 'react';
import MyAddressesSummary from '../components/Address/MyAddressesSummary';
import { useDispatch } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import { NetworkErrorBoundary } from 'rest-hooks';
import Loader from '../components/Loader';

function AddressesPage() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setBreadCrumbs([{ name: 'My Addresses' }]));
  }, [dispatch]);

  return (
    <div className="app__inner">
      <Suspense fallback={<Loader message="Loading addresses..." />}>
        <NetworkErrorBoundary>
          <MyAddressesSummary />
        </NetworkErrorBoundary>
      </Suspense>
    </div>
  );
}

export default AddressesPage;
