feat: connect contributor page and graphs to the API (#1072) (#1112)

open-sauced · Apr 20, 2023 · 4fc471c · 4fc471c
1 parent 83d89bd
commit 4fc471c
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 45 deletions.
diff --git a/components/organisms/ContributorCard/contributor-card.tsx b/components/organisms/ContributorCard/contributor-card.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { useTopicContributorCommits } from "lib/hooks/useTopicContributorCommits";
+import { useContributorPullRequestsChart } from "lib/hooks/useContributorPullRequestsChart";
 
 import Card from "components/atoms/Card/card";
 import Text from "components/atoms/Typography/text";
@@ -12,10 +12,6 @@ import CardProfile from "components/molecules/CardProfile/card-profile";
 import CardRepoList, { RepoList } from "components/molecules/CardRepoList/card-repo-list";
 import PullRequestTable from "components/molecules/PullRequestTable/pull-request-table";
 
-/*
-  Use this hook in the Contributor Page componenttbecause it has all the mock data:
-  import useContributorCard from "lib/hooks/useContributorCard";
-*/
 export interface ContributorObject {
   profile: {
     githubAvatar: string;
@@ -38,7 +34,7 @@ const ContributorCard = ({ className, contributor, topic, repositories }: Contri
   const { profile, repoList, languageList } = contributor;
 
   const [showPRs, setShowPRs] = useState(false);
-  const { chart } = useTopicContributorCommits(profile.githubName, topic, repositories);
+  const { chart } = useContributorPullRequestsChart(profile.githubName, topic, repositories);
 
   return (
     <Card className={className && className}>

diff --git a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx
@@ -8,7 +8,7 @@ import PullRequestTable from "components/molecules/PullRequestTable/pull-request
 import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper";
 
 import color from "lib/utils/color.json";
-import { useTopicContributorCommits } from "lib/hooks/useTopicContributorCommits";
+import { useContributorPullRequestsChart } from "lib/hooks/useContributorPullRequestsChart";
 import { getRelativeDays } from "lib/utils/date-utils";
 import Pill from "components/atoms/Pill/pill";
 import getPercent from "lib/utils/get-percent";
@@ -17,6 +17,7 @@ import ContributorProfileTab from "../ContributorProfileTab/contributor-profile-
 import ProfileLanguageChart from "components/molecules/ProfileLanguageChart/profile-language-chart";
 import useFollowUser from "lib/hooks/useFollowUser";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
+import { getAvatarByUsername } from "lib/utils/github";
 
 const colorKeys = Object.keys(color);
 interface PrObjectType {
@@ -39,7 +40,6 @@ interface ContributorProfilePageProps {
   githubAvatar?: string;
   githubName: string;
   langList: string[];
-  repoList: RepoList[];
   recentContributionCount: number;
   user?: DbUser;
   prTotal: number;
@@ -57,7 +57,6 @@ const ContributorProfilePage = ({
   githubAvatar,
   githubName,
   langList,
-  repoList,
   openPrs,
   prTotal,
   loading,
@@ -74,8 +73,15 @@ const ContributorProfilePage = ({
   });
 
   const { user: loggedInUser, signIn } = useSupabaseAuth();
+  const { chart, data } = useContributorPullRequestsChart(githubName, "*", repositories);
+  const repoList: RepoList[] = Array.from(new Set(data.map(prData => prData.full_name))).map(repo => {
+    const [repoOwner, repoName] = repo.split("/");
 
-  const { chart } = useTopicContributorCommits(githubName, "*", repositories);
+    return {
+      repoName: repoName,
+      repoIcon: getAvatarByUsername(repoOwner)
+    };
+  });
   const prsMergedPercentage = getPercent(prTotal, prMerged || 0);
   const { data: Follower, isError: followError, follow, unFollow } = useFollowUser(user?.login || "");
 
@@ -164,7 +170,7 @@ const ContributorProfilePage = ({
                     <div className="flex flex-col justify-between gap-2 lg:flex-row md:gap-12 lg:gap-16">
                       <div>
                         <span className="text-xs text-light-slate-11">PRs opened</span>
-                        {openPrs ? (
+                        {openPrs >= 0 ? (
                           <div className="flex mt-1 lg:justify-center md:pr-8">
                             <Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
                               {openPrs} PRs
@@ -190,7 +196,7 @@ const ContributorProfilePage = ({
                       </div>
                       <div>
                         <span className="text-xs text-light-slate-11">Contributed Repos</span>
-                        {recentContributionCount ? (
+                        {recentContributionCount >= 0 ? (
                           <div className="flex mt-1 lg:justify-center">
                             <Text className="!text-lg md:!text-xl lg:!text-2xl !text-black !leading-none">
                               {`${recentContributionCount} Repo${recentContributionCount > 1 ? "s" : ""}`}
@@ -205,7 +211,7 @@ const ContributorProfilePage = ({
                       <CardLineChart lineChartOption={chart} className="!h-32" />
                     </div>
                     <div>
-                      <CardRepoList limit={7} repoList={repoList} />
+                      <CardRepoList limit={7} repoList={repoList} total={repoList.length} />
                     </div>
 
                     <div className="mt-6">

diff --git a/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx b/components/organisms/ContributorProfileTab/contributor-profile-tab.tsx
@@ -200,7 +200,7 @@ const ContributorProfileTab = ({
                   <div className="flex items-end justify-center mt-1"> - </div>
                 )}
               </div>
-              <div>
+              <div className="hidden">
                 <span className="text-xs text-light-slate-11">Avg PRs velocity</span>
                 {prVelocity ? (
                   <div className="flex items-center gap-2 lg:justify-center">

diff --git a/lib/hooks/api/useContributorPullRequests.ts b/lib/hooks/api/useContributorPullRequests.ts
@@ -9,7 +9,7 @@ interface PaginatedResponse {
   readonly meta: Meta;
 }
 
-const useContributorPullRequests = (contributor: string, topic: string, repoIds: number[] = [], limit = 8) => {
+const useContributorPullRequests = (contributor: string, topic: string, repoIds: number[] = [], limit = 8, range = 30) => {
   const router = useRouter();
   const { selectedFilter } = router.query;
   const filterQuery = getFilterQuery(selectedFilter);
@@ -27,6 +27,8 @@ const useContributorPullRequests = (contributor: string, topic: string, repoIds:
     query.set("repoIds", repoIds.join(","));
   }
 
+  query.set("range", `${range}`);
+
   const baseEndpoint = `users/${contributor}/prs`;
   const endpointString = `${baseEndpoint}?${query.toString()}`;
 

diff --git a/lib/hooks/useTopicContributorCommits.ts → lib/hooks/useContributorPullRequestsChart.ts b/lib/hooks/useTopicContributorCommits.ts → lib/hooks/useContributorPullRequestsChart.ts
@@ -1,14 +1,8 @@
 import { useEffect, useState } from "react";
-import useSWR from "swr";
-import { getCommitsLast30Days } from "lib/utils/get-recent-commits";
-import { useRouter } from "next/router";
-import getFilterQuery from "lib/utils/get-filter-query";
+import getPullRequestsToDays from "lib/utils/get-prs-to-days";
+import useContributorPullRequests from "./api/useContributorPullRequests";
 
-interface PaginatedTopicCommitResponse {
-  readonly data: DbRepoCommit[];
-  readonly meta: Meta;
-}
-const useTopicContributorCommits = (contributor: string, topic: string, repoIds: number[] = []) => {
+const useContributorPullRequestsChart = (contributor: string, topic: string, repoIds: number[] = []) => {
   const lineChart = {
     xAxis: {
       type: "category",
@@ -49,18 +43,11 @@ const useTopicContributorCommits = (contributor: string, topic: string, repoIds:
   };
 
   const [chart, setChart] = useState(lineChart);
-  const router = useRouter();
-  const baseEndpoint = `${topic}/${contributor}/commits`;
-  const { selectedFilter } = router.query;
-  const filterQuery = getFilterQuery(selectedFilter);
-  const reposQuery = repoIds.length > 0 ? `repoIds=${repoIds.join(",")}`: "";
-  const endpointString = `${baseEndpoint}?${filterQuery.replace("&", "")}${reposQuery}`;
-
-  const { data } = useSWR<PaginatedTopicCommitResponse, Error>(contributor ? endpointString : null);
+  const { data } = useContributorPullRequests(contributor, topic, repoIds, 100);
 
   useEffect(() => {
-    if (data && Array.isArray(data.data)) {
-      const graphData = getCommitsLast30Days(data.data);
+    if (data && Array.isArray(data)) {
+      const graphData = getPullRequestsToDays(data);
 
       setChart((prevChart) => ({
         ...prevChart,
@@ -77,8 +64,9 @@ const useTopicContributorCommits = (contributor: string, topic: string, repoIds:
   }, [data]);
 
   return {
-    chart
+    chart,
+    data
   };
 };
 
-export { useTopicContributorCommits };
+export { useContributorPullRequestsChart };
diff --git a/lib/hooks/useRepoList.ts b/lib/hooks/useRepoList.ts
@@ -1,5 +1,5 @@
 const useRepoList = (repos: string) => {
-  return repos.split(",").map((repo) => {
+  return repos.split(",").filter(rpo => !!rpo).map((repo) => {
     const [repoOwner, repoName] = repo.split("/");
 
     return {

diff --git a/lib/utils/get-prs-to-days.ts b/lib/utils/get-prs-to-days.ts
@@ -5,7 +5,7 @@ interface GraphData {
   y: number;
 }
 
-const getPullRequestsToDays = (pull_requests: DbRepoPR[]) => {
+const getPullRequestsToDays = (pull_requests: DbRepoPR[], range = 30) => {
   const graphDays = pull_requests.reduce((days: { [name: string]: number }, curr: DbRepoPR) => {
     const day = differenceInDays(new Date(), new Date(curr.updated_at));
 
@@ -19,7 +19,7 @@ const getPullRequestsToDays = (pull_requests: DbRepoPR[]) => {
   }, {});
 
   const days: GraphData[] = [];
-  for(let d=30;d>=0;d--) {
+  for(let d=range;d>=0;d--) {
     days.push({ x: d, y: graphDays[d] || 0 });
   }
 

diff --git a/pages/user/[username]/index.tsx b/pages/user/[username]/index.tsx
@@ -10,6 +10,7 @@ import SEO from "layouts/SEO/SEO";
 import { supabase } from "lib/utils/supabase";
 import dynamic from "next/dynamic";
 import { getAvatarByUsername } from "lib/utils/github";
+import useContributorPullRequests from "lib/hooks/api/useContributorPullRequests";
 
 // A quick fix to the hydration issue. Should be replaced with a real solution.
 // Slows down the page's initial client rendering as the component won't be loaded on the server.
@@ -28,8 +29,10 @@ const Contributor: WithPageLayout<ContributorSSRProps> = ({ username, user, ogIm
 
   const { data: contributor, isError: contributorError } = useSingleContributor(username);
 
+  const { data: contributorPRData, meta: contributorPRMeta } = useContributorPullRequests(username, "*", [], 100);
   const isError = contributorError;
-  const repoList = useRepoList(contributor[0]?.recent_repo_list || "");
+  const repoList = useRepoList(Array.from(new Set(contributorPRData.map(prData => prData.full_name))).join(","));
+  const mergedPrs = contributorPRData.filter(prData => prData.merged);
   const contributorLanguageList = (contributor[0]?.langs || "").split(",");
   const githubAvatar = getAvatarByUsername(username, 300);
 
@@ -62,17 +65,16 @@ const Contributor: WithPageLayout<ContributorSSRProps> = ({ username, user, ogIm
       </Head>
       <div className="w-full">
         <ClientOnlyContributorProfilePage
-          prMerged={contributor[0]?.recent_merged_prs}
+          prMerged={mergedPrs.length}
           error={isError}
           loading={false}
           user={user}
-          repoList={repoList}
           langList={contributorLanguageList}
           githubName={username}
           githubAvatar={githubAvatar}
-          prTotal={contributor[0]?.recent_pr_total}
-          openPrs={contributor[0]?.recent_opened_prs}
-          recentContributionCount={contributor[0]?.recent_contribution_count}
+          prTotal={contributorPRMeta.itemCount}
+          openPrs={contributorPRData.length}
+          recentContributionCount={repoList.length}
           prReviews={contributor[0]?.recent_pr_reviews}
           prVelocity={contributor[0]?.recent_pr_velocity}
         />