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}>
        <PageWrapper>
          <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
            <RepositoryHero
              forkedFromRepo={repo.forkedFromRepo}
              forksCount={repo.forks.length}
              parentOrg={parentOrg}
              path={`Pull Requests`}
              repo={repo}
            />
          </IslandWrapper>
          <Grid.Col fluid style={{ marginTop: 32 }}>
            <a
              href={buildRouteLink(AppRoute.REPOSITORY_PULL_REQUEST_CREATE, {
                orgSlug: parentOrg.slug,
                repoSlug: repo.slug,
              })}
            >
              New Pull Request
            </a>
          </Grid.Col>
          <Grid.Col fluid style={{ marginTop: 24 }}>
            <Grid.Row fluid alignItems={"center"} gap={16}>
              <a
                style={{
                  textDecoration:
                    pullRequestsFilter === "all" ? "underline" : "none",
                }}
                href={`/${parentOrg.slug}/${repo.slug}/pulls?filter=${
                  "all" as PullRequestsFilter
                }`}
              >
                All
              </a>
              <a
                style={{
                  textDecoration:
                    pullRequestsFilter === "opened" ? "underline" : "none",
                }}
                href={`/${parentOrg.slug}/${repo.slug}/pulls?filter=${
                  "opened" as PullRequestsFilter
                }`}
              >
                Opened
              </a>
              <a
                style={{
                  textDecoration:
                    pullRequestsFilter === "merged" ? "underline" : "none",
                }}
                href={`/${parentOrg.slug}/${repo.slug}/pulls?filter=${
                  "merged" as PullRequestsFilter
                }`}
              >
                Merged
              </a>
              <a
                style={{
                  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: 32 }}>
            {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;