How to use rest-hooks - 10 common examples

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 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

static listShape(
    this: T,
  ): ReadShape>> {
    const schema = [
      new schemas.Union(
        {
          first: FirstUnionResource.getEntitySchema(),
          second: SecondUnionResource.getEntitySchema(),
        },
        (input: FirstUnionResource | SecondUnionResource) => input['type'],
      ),
    ];
    return {
      ...super.detailShape(),
      schema,
    };
  }
}

static detailShape(
    this: T,
  ): ReadShape>> {
    const schema = new schemas.Union(
      {
        first: FirstUnionResource.getEntitySchema(),
        second: SecondUnionResource.getEntitySchema(),
      },
      'type',
    );
    return {
      ...super.detailShape(),
      schema,
    };
  }
  static listShape(

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