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, RepositoryWithForkedFromRepo } from "../../types";
import {
  Grid,
  InlineCode,
  IslandWrapper,
  Layout,
  PageWrapper,
} from "../../components";
// app islands
import RepositoryHero from "../../islands/RepositoryHero";

export interface RepositoryPullRequestDetailsViewProps extends CommonProps {
  parentOrg: Organization;
  pullRequest: PullRequest;
  repo: RepositoryWithForkedFromRepo;
}

const RepositoryPullRequestDetailsView: ReactView<RepositoryPullRequestDetailsViewProps> =
  ({ commonProps, parentOrg, pullRequest: pr, 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}>
                  {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>
              <pre>
                <code>{JSON.stringify(pr, null, 2)}</code>
              </pre>
            </Grid.Col>
          </Grid.Col>
        </PageWrapper>
      </Layout>
    );
  };

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