import React, { Suspense } from 'react';
import { useParams } from 'react-router';
import { NetworkErrorBoundary } from 'rest-hooks';
import Loader from '../components/Loader';
import ParcelDetails from '../components/Parcels/ParcelDetails';

function ParcelPage() {
  const { investigationId, parcelId } = useParams();

  return (
    <div className="app__inner">
      <Suspense fallback={<Loader message="Loading parcel..." />}>
        <NetworkErrorBoundary>
          <ParcelDetails
            investigationId={investigationId}
            parcelId={parcelId}
          />
        </NetworkErrorBoundary>
      </Suspense>
    </div>
  );
}

export default ParcelPage;
