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 { AppRoute } from "../../routes.defs";
import { Grid, IslandWrapper, Layout, PageWrapper } from "../../components";
import { buildRouteLink } from "../../utils/shared";
// app islands
import RepositoryHero from "../../islands/RepositoryHero";

type PullRequestsFilter = "opened" | "closed" | "merged" | "all" | "search";

export interface RepositoryPullRequestsViewProps extends CommonProps {
  parentOrg: Organization;
  pullRequests: PullRequest[];
  repo: RepositoryWithForkedFromRepo;
  pullRequestsFilter?: PullRequestsFilter;
}

const RepositoryPullRequestsView: ReactView<
  RepositoryPullRequestsViewProps
> = ({
  commonProps,
  parentOrg,
  pullRequests,
  repo,
  pullRequestsFilter = "all",
}) => {
  return (
    <Layout
      {...commonProps}
      showDrawerPrimary
      orgSlug={parentOrg.slug}
      repoSlug={repo.slug}
    >
      <PageWrapper>
        <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
          <RepositoryHero
            themeScheme={commonProps.themeScheme}
            forkedFromRepo={repo.forkedFromRepo}
            forksCount={repo.forks.length}
            parentOrg={parentOrg}
            path={`Pull Requests`}
            repo={repo}
            showForkButton={false}
            showNewButton
            newButtonText={"New Pull Request"}
            newButtonUrl={buildRouteLink(
              AppRoute.REPOSITORY_PULL_REQUEST_CREATE,
              {
                orgSlug: parentOrg.slug,
                repoSlug: repo.slug,
              },
            )}
          />
        </IslandWrapper>
        <Grid.Col fluid style={{ marginTop: 16 }}>
          <Grid.Row fluid alignItems={"center"} gap={12}>
            <a
              style={{
                fontWeight: "bold",
                textDecoration:
                  pullRequestsFilter === "all" ? "underline" : "none",
              }}
              href={`/${parentOrg.slug}/${repo.slug}/pulls?filter=${
                "all" as PullRequestsFilter
              }`}
            >
              All
            </a>
            <a
              style={{
                fontWeight: "normal",
                textDecoration:
                  pullRequestsFilter === "opened" ? "underline" : "none",
              }}
              href={`/${parentOrg.slug}/${repo.slug}/pulls?filter=${
                "opened" as PullRequestsFilter
              }`}
            >
              Opened
            </a>
            <a
              style={{
                fontWeight: "normal",
                textDecoration:
                  pullRequestsFilter === "merged" ? "underline" : "none",
              }}
              href={`/${parentOrg.slug}/${repo.slug}/pulls?filter=${
                "merged" as PullRequestsFilter
              }`}
            >
              Merged
            </a>
            <a
              style={{
                fontWeight: "normal",
                textDecoration:
                  pullRequestsFilter === "closed" ? "underline" : "none",
              }}
              href={`/${parentOrg.slug}/${repo.slug}/pulls?filter=${
                "closed" as PullRequestsFilter
              }`}
            >
              Closed
            </a>
          </Grid.Row>
        </Grid.Col>
        <Grid.Col fluid style={{ marginTop: 8 }}>
          {pullRequests != null && pullRequests.length >= 1 ? (
            pullRequests.map((pr, idx) => (
              <Grid.Col
                key={pr.id}
                fluid
                style={{ marginTop: idx === 0 ? 0 : 16 }}
              >
                <a
                  href={buildRouteLink(
                    AppRoute.REPOSITORY_PULL_REQUEST_DETAILS,
                    {
                      orgSlug: parentOrg.slug,
                      repoSlug: repo.slug,
                      pullUid: pr.uid,
                    },
                  )}
                >
                  #{pr.uid} - {pr.summary} [{pr.state}]
                </a>
                <span style={{ opacity: 0.67 }}>
                  wants to merge <code>{pr.sourceBranch}</code> into{" "}
                  <code>{pr.targetBranch}</code>
                </span>
                <Grid.Row
                  fluid
                  alignItems={"center"}
                  style={{ opacity: 0.67, marginTop: 4 }}
                >
                  {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>
            ))
          ) : (
            <div>
              <h1>No Pull Request Yet</h1>
              <p>
                <span>Be the change you want to see, </span>
                <a
                  href={buildRouteLink(
                    AppRoute.REPOSITORY_PULL_REQUEST_CREATE,
                    {
                      orgSlug: parentOrg.slug,
                      repoSlug: repo.slug,
                    },
                  )}
                >
                  open the first Pull Request
                </a>
                <span> to this repository 🚀.</span>
              </p>
            </div>
          )}
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

RepositoryPullRequestsView.displayName = "RepositoryPullRequestsView";
export default RepositoryPullRequestsView;