GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[generate:prisma]
import type {
  Organization,
  Repository,
  User,
  UserSSHKey,
} from "@prisma/client";
// app
import type { CommonProps } from "../../types";
import { buildRouteLink } from "../../utils/shared";
import { AppRoute } from "../../routes.defs";
import {
  ButtonAnchor,
  Grid,
  IslandWrapper,
  Layout,
  PageWrapper,
} from "../../components";
// app islands
import RepositoriesList from "../../islands/RepositoriesList";
import SSHKeyItem from "../../islands/SSHKeyItem";

export interface UserDetailsViewProps extends CommonProps {
  user: User;
  currentUser: User | null;
  repositories: (Repository & { parentOrg: Organization })[];
  sshKeys: UserSSHKey[];
}

const UserDetailsView: ReactView<UserDetailsViewProps> = ({
  commonProps,
  currentUser,
  user,
  repositories,
  sshKeys,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <h1>{user.displayName || user.username}</h1>
        <h2 style={{ opacity: 0.67 }}>
          {currentUser != null && currentUser.id === user.id
            ? "Your repositories"
            : `Public repositories from ${user.displayName || user.username}`}
        </h2>
        <IslandWrapper data-islandid={`${RepositoriesList.name}$$0`}>
          <RepositoriesList
            repositories={repositories}
            themeScheme={commonProps.themeScheme}
          />
        </IslandWrapper>
        {currentUser != null && (
          <>
            <Grid.Row
              fluid
              nowrap
              gap={24}
              justifyContent="space-between"
              alignItems="center"
            >
              <h2 style={{ marginBottom: 16 }}>Your SSH key</h2>
              <ButtonAnchor
                style={{ fontSize: 16, minHeight: 40, padding: "0 16px" }}
                href={buildRouteLink(
                  AppRoute.USER_SSH_KEY_ADD,
                  {
                    username: currentUser.username,
                  },
                  {
                    encodeURIComponent: false,
                  }
                )}
              >
                Add
              </ButtonAnchor>
            </Grid.Row>
            {sshKeys.map((key, idx) => (
              <IslandWrapper
                data-islandid={`${SSHKeyItem.name}$$${idx}`}
                key={key.id}
              >
                <SSHKeyItem
                  sshKey={key}
                  themeScheme={commonProps.themeScheme}
                />
              </IslandWrapper>
            ))}
          </>
        )}
      </PageWrapper>
    </Layout>
  );
};

UserDetailsView.displayName = "UserDetailsView";
export default UserDetailsView;