.ts
TypeScript
(application/typescript)
// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[generate:prisma]
import type { Organization, Repository } from "@prisma/client";
// app
import type { CommonProps, RepositoryLog } from "../../types";
import { Card, Layout, PageWrapper } from "../../components";

export interface RepositoryCommitsLogViewProps extends CommonProps {
  history: RepositoryLog[];
  parentOrg: Organization;
  repo: Repository;
}

const RepositoryCommitsLogView: ReactView<RepositoryCommitsLogViewProps> = ({
  commonProps,
  history,
  parentOrg,
  repo,
}) => {
  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>
          {" / Commits"}
        </h1>
        <Card style={{ width: "100%" }} themeScheme={commonProps.themeScheme}>
          {history.map((log) => (
            <a
              key={log.tree}
              href={`/${parentOrg.slug}/${repo.slug}/compare/${log.abbreviated_parent}..${log.abbreviated_commit}`}
              style={{ marginTop: 8 }}
            >
              <strong>{log.author.name}</strong>
              {" ∙ "}
              <span>{log.subject}</span>
              {" - "}
              <span>
                {log.abbreviated_commit}
                {log.abbreviated_parent.trim() != ""
                  ? ` ∙ parent ${log.abbreviated_parent}`
                  : ""}
              </span>
              {" ∙ "}
              <span>{new Date(log.author.date).toUTCString()}</span>
            </a>
          ))}
        </Card>
      </PageWrapper>
    </Layout>
  );
};

RepositoryCommitsLogView.displayName = "RepositoryCommitsLogView";
export default RepositoryCommitsLogView;