import type { ReactView } from "@ethicdevs/react-monolith";
import React from "react";
import type { Organization, User } from "@prisma/client";
import type {
CommonProps,
RepositoryHead,
RepositoryFile,
RepositoryFileContent,
RepositoryLog,
RepositoryWithForkedFromRepo,
} from "../../types";
import { NamedColors } from "../../utils/style";
import {
Card,
Grid,
IslandWrapper,
Layout,
MarkdownToJsx,
PageWrapper,
} from "../../components";
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
forkedFromRepo={forkedFromRepo}
forksCount={repo.forks.length}
parentOrg={parentOrg}
repo={repo}
/>
</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={{
backdropFilter: "blur(8px)",
backgroundColor:
NamedColors.CARD_ALPHA_01[commonProps.themeScheme],
width: "100%",
padding: 8,
position: "sticky",
top: 80,
zIndex: 9000,
borderRadius: 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 id="readme">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: 768,
position: "sticky",
top: 80,
zIndex: 9000,
}}
>
<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;