GitFOSS

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

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

const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
  currentUser,
  commonProps,
  cloneUrl,
  lastCommit,
  parentOrg,
  path,
  readmeFileContent,
  ref,
  repo,
  repoHead,
  repoFiles,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <h1>
          <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 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}
                  ref={ref}
                  repo={repo}
                />
              </Card>
            ) : (
              <Card
                data-islandid={`${RepositoryTreeView.name}$$0`}
                style={{ width: "100%" }}
                themeScheme={commonProps.themeScheme}
              >
                <RepositoryTreeView
                  currPath={path}
                  lastCommit={lastCommit}
                  orgSlug={parentOrg.slug}
                  repoFiles={repoFiles}
                  repoSlug={repo.slug}
                />
              </Card>
            )}
            {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}
            >
              <div>
                <p>{repo.shortDescription}</p>
                {repo.websiteUrl != null && (
                  <p>
                    <a
                      href={repo.websiteUrl}
                      target={"_blank"}
                      rel={"noopener noreferer noreferrer"}
                    >
                      {repo.websiteUrl}
                    </a>
                  </p>
                )}
              </div>
              <div>
                {repo.keywords.map((keyword, idx, arr) => (
                  <React.Fragment key={[idx, keyword].join(":")}>
                    <span>{keyword}</span>
                    {idx < arr.length - 1 ? ", " : "."}
                  </React.Fragment>
                ))}
              </div>
              <div>
                <p>
                  <strong>HTTP Clone:</strong>
                  <br />
                  <code>{cloneUrl.http}</code>
                </p>
                <p>
                  <strong>SSH Clone:</strong>
                  <br />
                  <code>{cloneUrl.ssh}</code>
                </p>
              </div>
            </Card>
          </Grid.Col>
        </Grid.Row>
      </PageWrapper>
    </Layout>
  );
};

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