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,
} from "../../types";
import { Card, 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;
  };
  parentOrg: Organization;
  path: string;
  readmeFileContent: null | RepositoryFileContent;
  ref: string;
  repo: Repository;
  repoHead: null | RepositoryHead;
  repoFiles: RepositoryFile[];
}

const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
  currentUser,
  commonProps,
  cloneUrl,
  parentOrg,
  path,
  readmeFileContent,
  ref,
  repo,
  repoHead,
  repoFiles,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <h1>
          {parentOrg.displayName || parentOrg.slug}
          {" / "}
          {repo.displayName || repo.slug}
          {" ∙ "}
          <span style={{ textTransform: "capitalize" }}>
            ({repo.visibility.toLowerCase()})
          </span>
        </h1>
        <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>
            HTTP Clone: <code>{cloneUrl.http}</code>
          </p>
          <p>
            SSH Clone: <code>{cloneUrl.ssh}</code>
          </p>
        </div>
        {repoHead == null ? (
          <div data-islandid={`${RepositoryInitialSetup.name}$$0`}>
            <RepositoryInitialSetup
              cloneUrl={cloneUrl}
              currentUser={currentUser}
              ref={ref}
              repo={repo}
            />
          </div>
        ) : (
          <div data-islandid={`${RepositoryTreeView.name}$$0`}>
            <RepositoryTreeView
              currPath={path}
              orgSlug={parentOrg.slug}
              repoHead={repoHead}
              repoFiles={repoFiles}
              repoSlug={repo.slug}
            />
          </div>
        )}
        {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>
        )}
      </PageWrapper>
    </Layout>
  );
};

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