feat: implement PR and issue devstats to repo pages (#3253)

open-sauced · Apr 25, 2024 · caa7eea · caa7eea
2 parents e51e7e1 + 5720814
commit caa7eea
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/components/Workspaces/RepositoryStatCard.tsx b/components/Workspaces/RepositoryStatCard.tsx
@@ -14,11 +14,11 @@ type RepositoryStatCardProps = {
 } & (
   | {
       type: "pulls";
-      stats: { opened: number; merged: number; velocity: number } | undefined;
+      stats: { opened: number; merged: number; velocity: number; range?: number } | undefined;
     }
   | {
       type: "issues";
-      stats: { opened: number; closed: number; velocity: number } | undefined;
+      stats: { opened: number; closed: number; velocity: number; range?: number } | undefined;
     }
   | {
       type: "engagement";
@@ -113,7 +113,7 @@ const EmptyState = ({ type, hasError }: { type: CardType; hasError: boolean }) =
           {getStatPropertiesByType(type).map((stat) => (
             <tr key={stat} className="flex flex-col">
               <th className="capitalize font-normal text-sm text-light-slate-11 text-left">{stat}</th>
-              <td className="font-medium text-2xl mt-1">
+              <td className="font-medium text-3xl lg:text-2xl">
                 <SkeletonWrapper width={40} height={20} />
               </td>
             </tr>
@@ -127,6 +127,7 @@ const EmptyState = ({ type, hasError }: { type: CardType; hasError: boolean }) =
 export const RepositoryStatCard = ({ stats, type, isLoading, hasError }: RepositoryStatCardProps) => {
   const loadEmptyState = isLoading || hasError || !stats;
 
+  const rangeText = (type === "pulls" || type === "issues") && stats?.range ? `(${stats?.range} days)` : "";
   return (
     <Card className="w-full">
       {loadEmptyState ? (
@@ -135,7 +136,10 @@ export const RepositoryStatCard = ({ stats, type, isLoading, hasError }: Reposit
         <table className="grid gap-4 p-2">
           <caption className="flex items-center gap-1.5 lg:text-sm font-medium">
             {getIcon(type)}
-            <span className="text-slate-700">{titles[type]}</span>
+            <span className="flex gap-1 items-center text-slate-700">
+              {titles[type]}
+              {rangeText && <span className="text-slate-500">{rangeText}</span>}
+            </span>
           </caption>
           <tbody className="grid grid-cols-3 items center">
             {Object.entries(stats)

diff --git a/next-types.d.ts b/next-types.d.ts
@@ -24,6 +24,9 @@ interface DbRepo {
   readonly draft_prs_count?: number;
   readonly spam_prs_count?: number;
   readonly pr_velocity_count?: number;
+  readonly opened_issues_count?: number;
+  readonly closed_issues_count?: number;
+  readonly issues_velocity_count?: number;
   readonly churnTotalCount?: number;
   readonly activity_ratio?: number;
   readonly language: string;

diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
@@ -20,9 +20,10 @@ import Button from "components/shared/Button/button";
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const { org, repo } = context.params ?? { org: "", repo: "" };
+  const range = (context.query.range ? Number(context.query.range) : 30) as Range;
 
   const { data: repoData, error } = await fetchApiData<DbRepo>({
-    path: `repos/${org}/${repo}`,
+    path: `repos/${org}/${repo}?range=${range}`,
   });
 
   if (!repoData || error) {
@@ -32,7 +33,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const response = await fetch(repoData.url || `https://api.github.com/repos/${org}/${repo}`);
   const { owner } = await response.json();
 
-  const range = (context.query.range ? Number(context.query.range) : 30) as Range;
   const { href: ogImageUrl } = new URL(
     getRepositoryOgImage(repoData, range),
     process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"
@@ -154,6 +154,28 @@ export default function RepoPage({ repoData, image, ogImageUrl }: RepoPageProps)
                   average_over_range: Math.round(forksRangedTotal! / range),
                 }}
               />
+              <RepositoryStatCard
+                type="pulls"
+                isLoading={false}
+                hasError={false}
+                stats={{
+                  opened: repoData.open_prs_count!,
+                  merged: repoData.merged_prs_count!,
+                  velocity: repoData.pr_velocity_count!,
+                  range,
+                }}
+              />
+              <RepositoryStatCard
+                type="issues"
+                isLoading={false}
+                hasError={false}
+                stats={{
+                  opened: repoData.opened_issues_count!,
+                  closed: repoData.closed_issues_count!,
+                  velocity: repoData.issues_velocity_count!,
+                  range,
+                }}
+              />
             </section>
             <StarsChart
               stats={starsData}