GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[prisma:generate]
import type { Organization, User } from "@prisma/client";
// app
import type {
  CommonProps,
  RepositoryHead,
  RepositoryFile,
  RepositoryFileContent,
  RepositoryLog,
  RepositoryWithForksAndParentRepo,
} from "../../types";
import {
  Card,
  Grid,
  Layout,
  MarkdownToJsx,
  PageWrapper,
} from "../../components";
// app islands
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
import RepositoryInitialSetup from "../../islands/RepositoryInitialSetup";
import RepositoryTreeView from "../../islands/RepositoryTreeView";

export interface RepositoryDetailsViewProps extends CommonProps {
  branches: string[];
  currentRef: string;
  currentUser: null | User;
  cloneUrl: {
    http: string;
    ssh: string;
  };
  lastCommit: null | RepositoryLog;
  parentOrg: Organization;
  path: string;
  readmeFileContent: null | RepositoryFileContent;
  repo: RepositoryWithForksAndParentRepo;
  repoHead: null | RepositoryHead;
  repoFiles: RepositoryFile[];
  tags: string[];
}

const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
  branches,
  currentRef,
  currentUser,
  commonProps,
  cloneUrl,
  lastCommit,
  parentOrg,
  path,
  readmeFileContent,
  repo,
  repoHead,
  repoFiles,
  tags,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <Grid.Col fluid>
          <h1 style={{ margin: 0, marginTop: 20 }}>
            <a href={`/${parentOrg.slug}`}>
              {parentOrg.displayName || parentOrg.slug}
            </a>
            {" / "}
            <a href={`/${parentOrg.slug}/${repo.slug}`}>
              {repo.displayName || repo.slug}
            </a>
            {path != null && path.trim() !== "" && path !== "/"
              ? ` / ${path}`
              : ""}
            {" ∙ "}
            <span style={{ textTransform: "capitalize" }}>
              ({repo.visibility.toLowerCase()})
            </span>
          </h1>
          <Grid.Row nowrap fluid style={{ marginTop: 8 }}>
            <div style={{ flex: 1 }}>
              {repo.isFork && repo.forkedFromRepo != null ? (
                <h5 style={{ margin: 0 }}>
                  <span>Forked From</span>
                  {" ∙ "}
                  <a href={`/${repo.forkedFromRepo.organization.slug}`}>
                    {repo.forkedFromRepo.organization.displayName ||
                      repo.forkedFromRepo.organization.slug}
                  </a>
                  {" / "}
                  <a
                    href={`/${repo.forkedFromRepo.organization.slug}/${repo.forkedFromRepo.slug}`}
                  >
                    {repo.forkedFromRepo.displayName ||
                      repo.forkedFromRepo.slug}
                  </a>
                </h5>
              ) : (
                <div />
              )}
            </div>
            <Grid.Row nowrap style={{ minWidth: 90 }}>
              <span>{repo.forks.length}</span>
              <a
                href={`/${parentOrg.slug}/${repo.slug}/fork`}
                style={{ marginLeft: 8 }}
              >
                Fork it!
              </a>
            </Grid.Row>
          </Grid.Row>
        </Grid.Col>
        <Grid.Row nowrap fluid style={{ marginTop: 32 }}>
          <Grid.Col fluid flex={1}>
            {repoHead == null || lastCommit == null ? (
              <Card
                data-islandid={`${RepositoryInitialSetup.name}$$0`}
                style={{ width: "100%" }}
                themeScheme={commonProps.themeScheme}
              >
                <RepositoryInitialSetup
                  cloneUrl={cloneUrl}
                  currentUser={currentUser}
                  currentRef={currentRef}
                  repo={repo}
                />
              </Card>
            ) : (
              <Grid.Col fluid style={{ height: "unset !important" }}>
                <Card
                  data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
                  style={{ width: "100%", padding: 8 }}
                  themeScheme={commonProps.themeScheme}
                >
                  <RepositoryCommitSummaryLine
                    orgSlug={parentOrg.slug}
                    repoSlug={repo.slug}
                    commit={lastCommit}
                  />
                </Card>
                <Card
                  data-islandid={`${RepositoryTreeView.name}$$0`}
                  style={{ width: "100%", marginTop: 16 }}
                  themeScheme={commonProps.themeScheme}
                >
                  <RepositoryTreeView
                    currentRef={currentRef}
                    currentPath={path}
                    lastCommit={lastCommit}
                    orgSlug={parentOrg.slug}
                    repoFiles={repoFiles}
                    repoSlug={repo.slug}
                  />
                </Card>
              </Grid.Col>
            )}
            {readmeFileContent != null && (
              <div style={{ width: "100%" }}>
                <h3>Read Me</h3>
                <Card
                  style={{ width: "100%" }}
                  themeScheme={commonProps.themeScheme}
                >
                  <MarkdownToJsx
                    markdown={readmeFileContent.content}
                    themeScheme={commonProps.themeScheme}
                  />
                </Card>
              </div>
            )}
          </Grid.Col>
          <Grid.Col flex={0.3} nowrap style={{ marginLeft: 24 }}>
            <Card
              style={{ width: "100%" }}
              themeScheme={commonProps.themeScheme}
            >
              <p>{repo.shortDescription}</p>
              {repo.websiteUrl != null && (
                <p>
                  <a
                    href={repo.websiteUrl}
                    target={"_blank"}
                    rel={"noopener noreferer noreferrer"}
                  >
                    {repo.websiteUrl}
                  </a>
                </p>
              )}
              <p>
                {repo.keywords.map(
                  (keyword, idx, arr) =>
                    keyword.trim() !== "" && (
                      <React.Fragment key={[idx, keyword].join(":")}>
                        <span>{keyword}</span>
                        {idx < arr.length - 2 ? ", " : "."}
                      </React.Fragment>
                    )
                )}
              </p>
              <p>
                <strong>HTTP Clone:</strong>
                <br />
                <code>{cloneUrl.http}</code>
              </p>
              <p>
                <strong>SSH Clone:</strong>
                <br />
                <code>{cloneUrl.ssh}</code>
              </p>
              <p>
                <strong>Branches:</strong>
                <br />
                {branches.map(
                  (branch, idx, self) =>
                    branch.trim() != "" && (
                      <React.Fragment key={branch}>
                        <a
                          href={`/${parentOrg.slug}/${repo.slug}/${branch}/tree/`}
                        >
                          {branch}
                        </a>
                        {idx < self.length - 2 ? ", " : "."}
                      </React.Fragment>
                    )
                )}
              </p>
              <p>
                <strong>Tags:</strong>
                <br />
                {tags.map(
                  (tag, idx, self) =>
                    tag.trim() != "" && (
                      <React.Fragment key={tag}>
                        <span>{tag}</span>
                        {idx < self.length - 2 ? ", " : "."}
                      </React.Fragment>
                    )
                )}
              </p>
            </Card>
          </Grid.Col>
        </Grid.Row>
      </PageWrapper>
    </Layout>
  );
};

RepositoryDetailsView.displayName = "RepositoryDetailsView";
export default RepositoryDetailsView;