src/pages/blocks/index.page.tsx from DeFiCh/scan

src/pages/blocks/index.page.tsx
Summary

Maintainability

2 hrs
Test Coverage

Issues
import {
  CursorPage,
  CursorPagination,
} from "@components/commons/CursorPagination";
import { Head } from "@components/commons/Head";
import { getWhaleApiClient } from "@contexts/WhaleContext";
import { Block } from "@defichain/whale-api-client/dist/api/blocks";
import {
  GetServerSidePropsContext,
  GetServerSidePropsResult,
  InferGetServerSidePropsType,
} from "next";
import { Container } from "@components/commons/Container";
import { BlocksTable } from "./_components/BlocksTable";
import { BlocksCards } from "./_components/BlocksCards";

interface BlocksPageData {
  blocks: {
    items: Block[];
    pages: CursorPage[];
  };
}

export default function Blocks({
  blocks,
}: InferGetServerSidePropsType<typeof getServerSideProps>): JSX.Element {
  return (
    <Container className="pt-12 pb-20">
      <Head title="Blocks" />

      <h1 className="text-2xl font-medium dark:text-dark-gray-900">Blocks</h1>

      <div className="my-6 hidden md:block">
        <BlocksTable blocks={blocks.items} />
      </div>

      <div className="my-6 md:hidden">
        <BlocksCards blocks={blocks.items} />
      </div>

      <div className="flex justify-end mt-8">
        <CursorPagination pages={blocks.pages} path="/blocks" />
      </div>
    </Container>
  );
}

export async function getServerSideProps(
  context: GetServerSidePropsContext
): Promise<GetServerSidePropsResult<BlocksPageData>> {
  const next = CursorPagination.getNext(context);
  const items = await getWhaleApiClient(context).blocks.list(50, next);
  return {
    props: {
      blocks: {
        items,
        pages: CursorPagination.getPages(context, items),
      },
    },
  };
}