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 } 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";

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

const UserDetailsView: ReactView<UserDetailsViewProps> = ({
  commonProps,
  user,
  currentUser,
  repositories,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <Grid.Row fluid gap={8}>
          <Grid.Col fluid nowrap gap={4}>
            <h1 style={{ margin: 0 }}>{user.displayName || user.username}</h1>
            <h2 style={{ margin: 0, opacity: 0.67 }}>
              {currentUser != null && currentUser.id === user.id
                ? "Your repositories"
                : `Public repositories from ${
                    user.displayName || user.username
                  }`}
            </h2>
          </Grid.Col>
          <ButtonAnchor
            href={buildRouteLink(
              AppRoute.SETTINGS,
              { username: user.username },
              { encodeURIComponent: 0 }
            )}
          >
            Settings
          </ButtonAnchor>
          <ButtonAnchor
            href={buildRouteLink(AppRoute.AUTH_LOGOUT_ACTION, {})}
            style={{ backgroundColor: "#f44d4d" }}
          >
            Logout
          </ButtonAnchor>
        </Grid.Row>
        <IslandWrapper data-islandid={`${RepositoriesList.name}$$0`}>
          <RepositoriesList
            repositories={repositories}
            themeScheme={commonProps.themeScheme}
          />
        </IslandWrapper>
      </PageWrapper>
    </Layout>
  );
};

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