import React from 'react';
import { useSelector } from 'react-redux';
import DataCollectionTable from '../components/DataCollection/DataCollectionTable';
import Loader from '../components/Loader';

function DataCollectionsContainer(props) {
  const { filterFunction } = props;
  const { data, fetching } = useSelector((state) => state.datacollections);

  if (fetching) {
    return <Loader inPanel />;
  }

  return (
    <DataCollectionTable
      datacollections={filterFunction ? filterFunction(data) : data}
    />
  );
}

export default DataCollectionsContainer;
