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

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

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

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

export default MyParcelsPage;
