Adds contributors details page and private repo support (#7)

src/app/(dashboard)/contributors/[contributorUserName]/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ContributorDetailsDto } from "@/app/api/contributors/details/fetchContributorDetails";
+import BreadCrumb from "@/components/breadcrumbs";
+import { GithubRepoList } from "@/components/githubRepoList";
+import { TeamCardList } from "@/components/teamCardList";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Heading } from "@/components/ui/heading";
+import { Separator } from "@/components/ui/separator";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+
+interface ContributorDetailsPageProps {
+  params: { contributorUserName: string };
+}
+
+export default function ContributorDetailsPage({
+  params,
+}: ContributorDetailsPageProps) {
+  const contributorUserName = params.contributorUserName;
+  const breadcrumbItems = [
+    { title: "Contributors", link: "/contributors" },
+    {
+      title: "Contributor details",
+      link: `/contributors/${contributorUserName}`,
+    },
+  ];
+  const [contributorDetails, setContributorDetails] =
+    useState<ContributorDetailsDto>();
+
+  useEffect(() => {
+    if (contributorUserName) {
+      handleFetchContributorDetails();
+    }
+  }, []);
+
+  const handleFetchContributorDetails = async () => {
+    const { data } = await axios.get(
+      "/api/contributors/details?contributor_username=" + contributorUserName,
+    );
+    console.log("fetched");
+    console.log(data);
+    if (data.success) {
+      setContributorDetails(data.contributorDetails);
+    }
+  };
+
+  return (
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+      <BreadCrumb items={breadcrumbItems} />
+      <div className="flex items-start justify-between">
+        <Heading
+          title={contributorUserName}
+          description={`View the details of your contributor`}
+        />
+      </div>
+      <Separator />
+
+      <div className="pt-16 grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-7">
+        <Card className="col-span-4 md:col-span-3">
+          <CardHeader>
+            <CardTitle>Teams</CardTitle>
+            <CardDescription>
+              This contributor is part of {contributorDetails?.teams.length}{" "}
+              teams
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {contributorDetails?.teams && (
+              <TeamCardList teamArray={contributorDetails?.teams} />
+            )}
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-4 md:col-span-3">
+          <CardHeader>
+            <CardTitle>Repositories</CardTitle>
+            <CardDescription>
+              This contributor is part of{" "}
+              {contributorDetails?.github_repositories.length} repositories
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {contributorDetails?.github_repositories && (
+              <GithubRepoList
+                githubRepos={contributorDetails?.github_repositories}
+              />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/contributors/columns.tsx

@@ -13,6 +13,7 @@ import {
 import { ColumnDef } from "@tanstack/react-table";
 import { ContributorDto } from "@/app/api/contributors/fetchUserContributors";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useRouter } from "next/navigation";
 
 export const contributorsColumns: ColumnDef<ContributorDto>[] = [
   {
@@ -83,7 +84,9 @@ export const contributorsColumns: ColumnDef<ContributorDto>[] = [
   },
   {
     id: "actions",
-    cell: () => {
+    cell: ({ row }) => {
+      const contributor = row.original;
+      const router = useRouter();
       return (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -95,7 +98,13 @@ export const contributorsColumns: ColumnDef<ContributorDto>[] = [
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>Actions</DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>View contributor details</DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                router.push(`/contributors/${contributor.userName}`);
+              }}
+            >
+              View contributor details
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       );

src/app/api/auth/[...nextauth]/options.ts

@@ -9,6 +9,11 @@ export const options: AuthOptions = {
     GithubProvider({
       clientId: process.env.GITHUB_ID!,
       clientSecret: process.env.GITHUB_SECRET!,
+      authorization: {
+        params: {
+          scope: "read:user user:email repo",
+        },
+      },
     }),
   ],
   pages: {

src/app/api/contributors/details/fetchContributorDetails.ts

@@ -0,0 +1,56 @@
+import { GithubRepo, Team } from "@prisma/client";
+import prisma from "db";
+
+export type ContributorDetailsDto = {
+  userName: string;
+  teams: Team[];
+  github_repositories: GithubRepo[];
+};
+
+/**
+ * Fetch contributor details by userName
+ * Fetches the teams in which the username is a contributor (case insensitive) and the github repositories of those teams
+ * @param {string} contributorUserName
+ * @returns {Object} ContributorDetailsDto
+ */
+export async function fetchContributorDetails(
+  contributorUserName: string,
+): Promise<ContributorDetailsDto | null> {
+  try {
+    const foundContributorTeams = await prisma.team.findMany({
+      where: {
+        ContributionCalculation: {
+          some: {
+            UserScore: {
+              some: {
+                username: {
+                  equals: contributorUserName,
+                  mode: "insensitive",
+                },
+              },
+            },
+          },
+        },
+      },
+    });
+    const contributorTeams = foundContributorTeams.map((team) => team.name);
+    const foundContributorRepositories = await prisma.githubRepo.findMany({
+      where: {
+        Team: {
+          name: {
+            in: contributorTeams,
+          },
+        },
+      },
+    });
+    const contributorDetailsDto: ContributorDetailsDto = {
+      userName: contributorUserName,
+      teams: foundContributorTeams,
+      github_repositories: foundContributorRepositories,
+    };
+    return contributorDetailsDto;
+  } catch (error) {
+    console.log(error);
+  }
+  return null;
+}

src/app/api/contributors/details/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from "next/server";
+import { fetchContributorDetails } from "./fetchContributorDetails";
+
+export async function GET(req: NextRequest) {
+  const contributorUserName = req.nextUrl.searchParams.get(
+    "contributor_username",
+  );
+  if (contributorUserName) {
+    const contributorDetails =
+      await fetchContributorDetails(contributorUserName);
+    return NextResponse.json({
+      success: true,
+      contributorDetails: contributorDetails,
+    });
+  }
+  return NextResponse.json({ success: false, contributorDetails: null });
+}

src/app/api/github/repo/fetchRepositories.ts

@@ -2,13 +2,12 @@ import { GithubRepoDto } from "./types/githubRepo.dto";
 
 export async function fetchPaginatedGithubRepoResult(
   githubAccessToken: string,
-  githubLogin: string,
 ): Promise<GithubRepoDto[]> {
   let currentPage = 1;
   let mergedGithubRepos: GithubRepoDto[] = [];
   while (true) {
     const fetchGithubReposRequest = await fetch(
-      `https://api.github.com/users/${githubLogin}/repos?&per_page=100&sort=updated&page=${currentPage}`,
+      `https://api.github.com/user/repos?&per_page=100&sort=updated&page=${currentPage}`,
       {
         method: "GET",
         headers: {
@@ -22,7 +21,6 @@ export async function fetchPaginatedGithubRepoResult(
     const parsedGithubRepos = JSON.parse(fetchedGithubRepos) as GithubRepoDto[];
     mergedGithubRepos = mergedGithubRepos.concat(parsedGithubRepos);
     currentPage = currentPage + 1;
-    if (parsedGithubRepos.length == 0)
-      return mergedGithubRepos.filter((githuRepo) => !githuRepo.private);
+    if (parsedGithubRepos.length == 0) return mergedGithubRepos;
   }
 }

src/app/api/github/repo/route.ts

@@ -9,7 +9,6 @@ export async function GET() {
   if (session?.accessToken && session?.githubLogin) {
     const githubRepos = await fetchPaginatedGithubRepoResult(
       session.accessToken,
-      session.githubLogin,
     );
     return NextResponse.json({ success: true, gitRepos: githubRepos });
   }

src/components/githubRepoList.tsx

@@ -1,14 +1,14 @@
 import { RegisteredGitRepo } from "@/app/api/github/repo/registered/fetchRegisteredRepos";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { ScrollArea } from "@radix-ui/react-scroll-area";
+import { ScrollArea } from "./ui/scroll-area";
 
 interface GithubRepoListProps {
   githubRepos: RegisteredGitRepo[];
 }
 
 export function GithubRepoList({ githubRepos }: GithubRepoListProps) {
   return (
-    <ScrollArea className="max-h-96">
+    <ScrollArea className="h-72 rounded-md">
       <div className="space-y-8">
         {githubRepos.map((repo) => (
           <div className="flex items-center">

src/components/teamCardList.tsx

@@ -0,0 +1,28 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { ScrollArea } from "./ui/scroll-area";
+import { Team } from "@prisma/client";
+
+interface TeamCardListProps {
+  teamArray: Team[];
+}
+
+export function TeamCardList({ teamArray }: TeamCardListProps) {
+  return (
+    <ScrollArea className="h-72 rounded-md">
+      <div className="space-y-8">
+        {teamArray.map((team) => (
+          <div className="flex items-center">
+            <Avatar className="h-9 w-9">
+              <AvatarImage src="/avatars/01.png" alt="Avatar" />
+              <AvatarFallback>{team.name[0]}</AvatarFallback>
+            </Avatar>
+            <div className="ml-4 space-y-1">
+              <p className="text-sm font-medium leading-none">{team.name}</p>
+            </div>
+            <div className="ml-auto font-medium">Active</div>
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}