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,
  RepositoryWithForkedFromRepo,
} from "../../types";
import {
  Card,
  Grid,
  IslandWrapper,
  Layout,
  MarkdownToJsx,
  PageWrapper,
} from "../../components";
// app islands
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
import RepositoryHero from "../../islands/RepositoryHero";
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: RepositoryWithForkedFromRepo;
  repoHead: null | RepositoryHead;
  repoFiles: RepositoryFile[];
  tags: string[];
}

const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
  branches,
  currentRef,
  currentUser,
  commonProps,
  cloneUrl,
  lastCommit,
  parentOrg,
  path,
  readmeFileContent,
  repo: repoWithForkedFromRepoMetas,
  repoHead,
  repoFiles,
  tags,
}) => {
  const { forkedFromRepo, ...repo } = repoWithForkedFromRepoMetas;
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
          <RepositoryHero
            parentOrg={parentOrg}
            repo={repo}
            forkedFromRepo={forkedFromRepo}
            forksCount={repo.forks.length}
          />
        </IslandWrapper>
        <style
          dangerouslySetInnerHTML={{
            __html: `
          @media only screen and (max-width: 768px) {
            .mobile-column {
              flex-flow: column nowrap;
            }

            .mobile-full-width {
              min-width: 100%;
              width: 100%;
              max-width: 100%;
            }

            .mobile-column > div {
              margin-left: 0;
            }
          }
        `,
          }}
        />
        <Grid.Row
          nowrap
          fluid
          style={{ marginTop: 32 }}
          gap={16}
          className={"mobile-column mobile-full-width"}
        >
          <Grid.Col
            fluid
            style={{ maxWidth: "calc(100% - 30%)" }}
            className={"mobile-full-width"}
          >
            {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
                    commit={lastCommit}
                    currentRef={currentRef}
                    orgSlug={parentOrg.slug}
                    repoSlug={repo.slug}
                  />
                </Card>
                <Card
                  data-islandid={`${RepositoryTreeView.name}$$0`}
                  style={{ width: "100%", marginTop: 16, padding: 0 }}
                  themeScheme={commonProps.themeScheme}
                >
                  <RepositoryTreeView
                    currentRef={currentRef}
                    currentPath={path}
                    lastCommit={lastCommit}
                    orgSlug={parentOrg.slug}
                    repoFiles={repoFiles}
                    repoSlug={repo.slug}
                    themeScheme={commonProps.themeScheme}
                  />
                </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={{ minWidth: 320, width: "100%", maxWidth: 380 }}
          >
            <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 - 1 ? ", " : "."}
                      </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
                          }/${encodeURIComponent(branch)}/tree/${
                            path != null && path.trim() !== "" && path !== "/"
                              ? path
                              : ""
                          }`}
                        >
                          {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;