GitFOSS

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

export interface OrganizationDetailsViewProps extends CommonProps {
  organization: Organization & { repositories: Repository[] };
}

const OrganizationDetailsView: ReactView<OrganizationDetailsViewProps> = ({
  commonProps,
  organization,
}) => {
  const orgRepositories = useMemo(
    () =>
      organization.repositories.map((repo) => ({
        ...repo,
        parentOrg: organization,
      })),
    [organization]
  );

  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <h1>{organization.displayName || organization.slug}</h1>
        {organization.websiteUrl != null && (
          <p>
            <a
              href={organization.websiteUrl}
              target={"_blank"}
              rel={"noopener noreferer noreferrer"}
            >
              {organization.websiteUrl}
            </a>
          </p>
        )}
        <div
          data-islandid={`${RepositoriesList.name}$$0`}
          style={{ width: "100%" }}
        >
          <RepositoriesList repositories={orgRepositories} />
        </div>
      </PageWrapper>
    </Layout>
  );
};

OrganizationDetailsView.displayName = "OrganizationDetailsView";
export default OrganizationDetailsView;