import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
import type { Organization, Repository, User } from "@prisma/client";
import type {
CommonProps,
RepositoryHead,
RepositoryFile,
RepositoryFileContent,
RepositoryLog,
} from "../../types";
import {
Card,
Grid,
Layout,
MarkdownToJsx,
PageWrapper,
} from "../../components";
import RepositoryCommitSummaryLine from "../../islands/RepositoryCommitSummaryLine";
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: Repository;
repoHead: null | RepositoryHead;
repoFiles: RepositoryFile[];
tags: string[];
}
const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
branches,
currentRef,
currentUser,
commonProps,
cloneUrl,
lastCommit,
parentOrg,
path,
readmeFileContent,
repo,
repoHead,
repoFiles,
tags,
}) => {
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}
currentRef={currentRef}
repo={repo}
/>
</Card>
) : (
<Grid.Col fluid>
<Card
data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
style={{ width: "100%" }}
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 }}
themeScheme={commonProps.themeScheme}
>
<RepositoryTreeView
currentRef={currentRef}
currentPath={path}
lastCommit={lastCommit}
orgSlug={parentOrg.slug}
repoFiles={repoFiles}
repoSlug={repo.slug}
/>
</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={{ marginLeft: 24 }}>
<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 - 2 ? ", " : "."}
</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;