GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[generate:prisma]
import type { Organization, PullRequest } from "@prisma/client";
// app
import type {
  CommonProps,
  RepositoryFileDiff,
  RepositoryObject,
  RepositoryWithForkedFromRepo,
} from "../../types";
import {
  Card,
  Grid,
  InlineCode,
  IslandWrapper,
  Layout,
  MarkdownToJsx,
  PageWrapper,
} from "../../components";
// app islands
import RepositoryFilesDiffsList from "../../islands/RepositoryFilesDiffsList";
import RepositoryHero from "../../islands/RepositoryHero";

export interface RepositoryPullRequestDetailsViewProps extends CommonProps {
  filesDiffs: RepositoryFileDiff[];
  lastCommit: RepositoryObject | null;
  pullRequest: PullRequest;
  sourceParentOrg: Organization;
  sourceRepo: RepositoryWithForkedFromRepo;
  targetParentOrg: Organization;
  targetRepo: RepositoryWithForkedFromRepo;
}

const RepositoryPullRequestDetailsView: ReactView<RepositoryPullRequestDetailsViewProps> =
  ({
    commonProps,
    filesDiffs,
    lastCommit,
    pullRequest: pr,
    sourceParentOrg,
    sourceRepo,
    targetParentOrg: parentOrg,
    targetRepo: repo,
  }) => {
    return (
      <Layout {...commonProps}>
        <PageWrapper>
          <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
            <RepositoryHero
              forkedFromRepo={repo.forkedFromRepo}
              forksCount={repo.forks.length}
              parentOrg={parentOrg}
              path={`Pull Request / ${pr.uid}`}
              repo={repo}
            />
          </IslandWrapper>
          <Grid.Col fluid style={{ marginTop: 32 }}>
            <Grid.Col key={pr.id} fluid>
              <span>
                <InlineCode themeScheme={commonProps.themeScheme}>
                  {`[${pr.state}]`}
                </InlineCode>
              </span>
              <h1 style={{ margin: 0, marginTop: 8 }}>
                #{pr.uid} - {pr.summary}
              </h1>
              <span style={{ opacity: 0.67, marginTop: 8 }}>
                wants to merge{" "}
                <InlineCode themeScheme={commonProps.themeScheme}>
                  {`${sourceParentOrg.slug}/${sourceRepo.slug}@${pr.sourceBranch}`}
                </InlineCode>{" "}
                into{" "}
                <InlineCode themeScheme={commonProps.themeScheme}>
                  {pr.targetBranch}
                </InlineCode>
              </span>
              <Grid.Row
                fluid
                alignItems={"center"}
                style={{ opacity: 0.67, marginTop: 8 }}
              >
                {new Date(pr.createdAt).getTime() <=
                  new Date(pr.updatedAt).getTime() && (
                  <span>
                    opened on {new Date(pr.createdAt).toLocaleString()}
                  </span>
                )}
                {((pr.closedAt == null &&
                  new Date(pr.updatedAt).getTime() >
                    new Date(pr.createdAt).getTime()) ||
                  (pr.closedAt != null &&
                    new Date(pr.updatedAt).getTime() <
                      new Date(pr.closedAt).getTime())) && (
                  <span>
                    updated on {new Date(pr.updatedAt).toLocaleString()}
                  </span>
                )}
                {pr.closedAt != null && (
                  <span>
                    closed on
                    {new Date(pr.closedAt).toLocaleString()}
                  </span>
                )}
              </Grid.Row>
            </Grid.Col>
            <Grid.Col fluid style={{ marginTop: 32 }}>
              <a
                href={`/${parentOrg.slug}/${repo.slug}/pulls/${pr.uid}?action=edit`}
              >
                Edit PR
              </a>
              <a
                href={`/${parentOrg.slug}/${repo.slug}/pulls/${pr.uid}?action=delete`}
              >
                Delete PR
              </a>
            </Grid.Col>
            <Grid.Col fluid style={{ marginTop: 24 }}>
              <Card
                style={{ width: "100%" }}
                themeScheme={commonProps.themeScheme}
              >
                <MarkdownToJsx
                  markdown={
                    pr.textMd == null || pr.textMd.trim() === ""
                      ? "> &lt;no_description_yet /&gt;"
                      : pr.textMd
                  }
                  themeScheme={commonProps.themeScheme}
                />
              </Card>
            </Grid.Col>
            <Grid.Col
              fluid
              data-islandid={`${RepositoryFilesDiffsList.name}$$0`}
              style={{ marginTop: 24 }}
            >
              <RepositoryFilesDiffsList
                filesDiffs={filesDiffs}
                themeScheme={commonProps.themeScheme}
                orgSlug={parentOrg.slug}
                repoSlug={repo.slug}
                commitHash={lastCommit != null ? lastCommit.commit : "HEAD"}
              />
            </Grid.Col>
          </Grid.Col>
        </PageWrapper>
      </Layout>
    );
  };

RepositoryPullRequestDetailsView.displayName =
  "RepositoryPullRequestDetailsView";
export default RepositoryPullRequestDetailsView;