.ts
TypeScript
(application/typescript)
// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[prisma:generate]
import type { Organization, Repository, User } from "@prisma/client";
// app
import type { CommonProps, RepositoryFileDiff } from "../../types";
import { Grid, Layout, PageWrapper } from "../../components";
// app islands
import RepositoryFilesDiffsList from "../../islands/RepositoryFilesDiffsList";

export interface RepositoryCompareViewProps extends CommonProps {
  currentUser: null | User;
  filesDiffs: RepositoryFileDiff[];
  parentOrg: Organization;
  repo: Repository;
  refA: string;
  refB: string;
}

const RepositoryCompareView: ReactView<RepositoryCompareViewProps> = ({
  commonProps,
  filesDiffs,
  parentOrg,
  repo,
  refA,
  refB,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <h1 style={{ margin: 0 }}>
          <a href={`/${parentOrg.slug}`}>
            {parentOrg.displayName || parentOrg.slug}
          </a>
          {" / "}
          <a href={`/${parentOrg.slug}/${repo.slug}`}>
            {repo.displayName || repo.slug}
          </a>
          {" / "}
          {refA}..{refB}
        </h1>
        {/*getThemedCodeCss(commonProps.themeScheme)*/}
        <Grid.Col
          fluid
          data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
          style={{ marginTop: 32 }}
        >
          <RepositoryFilesDiffsList
            filesDiffs={filesDiffs}
            themeScheme={commonProps.themeScheme}
            orgSlug={parentOrg.slug}
            repoSlug={repo.slug}
            commitHash={refB}
          />
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

RepositoryCompareView.displayName = "RepositoryCompareView";
export default RepositoryCompareView;