GitFOSS

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

export interface RepositoryDetailsViewProps extends CommonProps {
  currentUser: null | User;
  cloneUrl: {
    http: string;
    ssh: string;
  };
  ref: string;
  repo: Repository;
  repoHead: null | RepositoryHead;
  repoFiles: RepositoryFile[];
}

const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
  currentUser,
  commonProps,
  cloneUrl,
  ref,
  repo,
  repoHead,
  repoFiles,
}) => {
  return (
    <Layout {...commonProps} showSideMenu={false}>
      <PageWrapper>
        <h1>{ref}</h1>
        <code>
          <pre style={{ maxWidth: 600 }}>{JSON.stringify(repo, null, 2)}</pre>
        </code>
        {repoHead == null ? (
          <div>
            <p>It looks like this repository is empty.</p>
            <p>Get started easily:</p>
            <h3>Clone and initialize</h3>
            <code>
              <pre
                style={{ maxWidth: 600 }}
              >{`# Clone and enter the repository directory
$ git clone ${cloneUrl.http}
$ cd ${repo.slug}/
${
  currentUser != null
    ? `
# Setup committer identity for this project
$ git config user.name "${currentUser.displayName || currentUser.username}"
$ git config user.email "${currentUser.email}"`
    : ""
}

# Create some base files
$ echo "# ${repo.displayName || repo.slug}" > README.md
$ echo "The MIT License" > LICENSE

# Commit and send to GitFOSS remote repository
$ git commit -am 'feat: initial commit'
$ git push
`}</pre>
            </code>
          </div>
        ) : (
          <>
            <code>
              <pre style={{ maxWidth: 600 }}>
                {JSON.stringify(repoHead, null, 2)}
              </pre>
            </code>
            {repoFiles.map((file) => (
              <div key={file.id}>
                <code>
                  {file.name}
                  {file.type === "tree" ? "/" : ""}
                </code>
              </div>
            ))}
          </>
        )}
      </PageWrapper>
    </Layout>
  );
};

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