How to use the rest-hooks.useResource function in rest-hooks

function NamesContainer(props) {
  const pageOffset = (props.page - 1) * 25;
  const names = useResource(NameResource.listShape(), { offset: pageOffset });
  const { limit, total } = useResultCache(NameResource.listShape(), {
    offset: pageOffset
  });
  const pages = Math.ceil(total / limit);
  const nameRows = names.map((name, index) => (
    
  ));

  // 25 blocks per page
  return (
    <>
      
        
          TLD Names

function BlockContainer({ height, page }) {
  const block = useResource(BlockResource.detailShape(), {
    height
  });

  return (
    <>
      
      
      Loading...}>
        
      
    
  );

export default function BlocksContainer(props) {
  const pageOffset = (props.page - 1) * 25;
  const blocks = useResource(BlockResource.listShape(), { offset: pageOffset });
  const { limit, total } = useResultCache(BlockResource.listShape(), {
    offset: pageOffset
  });
  const pages = Math.ceil(total / limit);
  return (
    
  );
}

export default function Home() {
  //API Calls
  const summary = useResource(NetworkResource.detailShape(), {});
  const blocks = useResource(BlockResource.listShape(), { limit: 5 });
  const txs = useResource(TransactionResource.listShape(), { limit: 5 });

  return (
    
      
        
      
      
        
        
      
    
  );
}

const TransactionList = ({ url, page, from }) => {
  //@todo these will come from filtering options.
  const limit = 10;
  const offset = (page - 1) * limit;
  from.limit = limit;
  from.offset = offset;
  const txs = useResource(TransactionResource.listShape(), from);
  const { total } = useResultCache(TransactionResource.listShape(), from);
  const pages = Math.ceil(total / limit);
  const renderTransactions = txs.map((tx, index) => (
    
      
        Tx {index + 1}: {tx.hash}
      
      <div>
        <div>
          
        </div>
        <div>
          
        </div>
      </div>

function NameView({ name, page, changePage, url }) {
  //Run these in parallel
  const nameData = useResource(NameResource.detailShape(), { name });
  //@todo move this to NameHistory component, since we want to be able to filter it effectively.
  const history = useResource(NameHistoryResource.listShape(), { name });
  const { limit, total } = useResultCache(NameHistoryResource.listShape(), {
    name
  });
  const pages = Math.ceil(total / limit);
  return (
    <>
      
      
      {name.records && }

function BlocksView({ page }) {
  const pageOffset = (page - 1) * 25;
  const blocks = useResource(BlockResource.listShape(), { offset: pageOffset });
  const { limit, total } = useResultCache(BlockResource.listShape(), {
    offset: pageOffset
  });
  const pages = Math.ceil(total / limit);
  return (
    <>
      
        
          HNS Blocks

export default function Home() {
  //API Calls
  const summary = useResource(NetworkResource.detailShape(), {});
  const blocks = useResource(BlockResource.listShape(), { limit: 5 });
  const txs = useResource(TransactionResource.listShape(), { limit: 5 });

  return (
    
      
        
      
      
        
        
      
    
  );
}

export default function Home() {
  //API Calls
  const summary = useResource(NetworkResource.detailShape(), {});
  const blocks = useResource(BlockResource.listShape(), { limit: 5 });
  const txs = useResource(TransactionResource.listShape(), { limit: 5 });

  return (
    
      
        
      
      
        
        
      
    
  );
}

function HomeView() {
  //API Calls
  const [summary, blocks, txs] = useResource(
    [NetworkResource.detailShape(), {}],
    [BlockResource.listShape(), { limit: 5 }],
    [TransactionResource.listShape(), { limit: 5 }]
  );

  return (
    <>