feat: add PR velocity to profile page (#111)

* add date-fns library for proper date calculations

* add getRelativeDays as a new date util

* fetch PR data and calculate user PR Velocity

* add PR velocity in profile page

* remove getContributorPullRequestVelocity from fetchOpenSaucedApiData.ts

* add IUserPR type for PR API responses

* add getUserPRVelocity utility function

* use getUserPRVelocity function in the profile page

* export IUserPR from types

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@types/chrome": "^0.0.231",
     "@types/node-emoji": "^1.8.2",
+    "date-fns": "^2.30.0",
     "gpt-tokenizer": "^1.0.5",
     "node-emoji": "^1.11.0",
     "react": "^18.0.0",

src/pages/profile.tsx

@@ -8,6 +8,8 @@ import OpenSaucedLogo from "../assets/opensauced-logo.svg";
 import { getUserData, getUserPRData, getUserHighlightsData } from "../utils/fetchOpenSaucedApiData";
 import { emojify } from "node-emoji";
 import { goBack } from "react-chrome-extension-router";
+import { getRelativeDays } from "../utils/dateUtils";
+import { getUserPRVelocity } from "../utils/getUserPRVelocity";
 
 const interestIcon = {
   python: <SiPython />,
@@ -28,10 +30,11 @@ const interestIcon = {
 
 type InterestIconKeys = keyof typeof interestIcon;
 
-export const Profile = ({ username }: {username: string}) => {
+export const Profile = ({ username }: { username: string }) => {
   const [user, setUser] = useState<null | { id: string, user_name: string, bio: string, created_at: string, linkedin_url: string, twitter_username: string, blog: string, interests: string, open_issues: number }>(null);
   const [userPR, setUserPR] = useState<null | { meta: { itemCount: number } }>(null);
   const [userHighlights, setUserHighlights] = useState<null | { meta: { itemCount: number } }>(null);
+  const [userPRVelocity, setUserPRVelocity] = useState<number>(0);
 
   useEffect(() => {
     const fetchUserData = async () => {
@@ -40,6 +43,7 @@ export const Profile = ({ username }: {username: string}) => {
       setUser(userData);
       setUserPR(userPRData);
       setUserHighlights(userHighlightsData);
+      setUserPRVelocity(getUserPRVelocity(userPRData?.data || []));
     };
 
     void fetchUserData();
@@ -163,7 +167,9 @@ export const Profile = ({ username }: {username: string}) => {
           <div className="flex flex-col items-center justify-center p-2 text-xs">
             <p>Avg PRs Velocity</p>
 
-            <p className="font-medium text-5xl">-</p>
+            <p className="font-medium text-5xl">
+              {getRelativeDays(userPRVelocity)}
+            </p>
           </div>
 
           <div className="flex flex-col items-center justify-center p-2 text-xs">

src/ts/types.ts

@@ -0,0 +1,19 @@
+export interface IUserPR {
+  readonly title: string;
+  readonly author_login: string;
+  readonly state: string;
+  readonly created_at: string;
+  readonly closed_at: string;
+  readonly merged_at: string;
+  readonly updated_at: string;
+  readonly filesCount: number;
+  linesCount: number;
+  readonly merged: boolean;
+  readonly draft: boolean;
+  readonly full_name: string;
+  readonly number: number;
+  readonly additions: number;
+  readonly deletions: number;
+  readonly changed_files: number;
+  readonly repo_id: number;
+}

src/utils/dateUtils.ts

@@ -0,0 +1,15 @@
+export const getRelativeDays = (days: number) => {
+    if (days === 0) {
+        return "-";
+    }
+
+    if (days >= 365) {
+        return `${Math.floor(days / 365)}y`;
+    }
+
+    if (days > 30 && days < 365) {
+        return `${Math.floor(days / 30)}mo`;
+    }
+
+    return `${days}d`;
+};

src/utils/fetchOpenSaucedApiData.ts

@@ -1,5 +1,11 @@
+import differenceInDays from "date-fns/differenceInDays";
 import { cachedFetch } from "./cache";
-import { OPEN_SAUCED_USERS_ENDPOINT, OPEN_SAUCED_SESSION_ENDPOINT, OPEN_SAUCED_REPOS_ENDPOINT, OPEN_SAUCED_USER_INSIGHTS_ENDPOINT } from "../constants";
+import {
+  OPEN_SAUCED_USERS_ENDPOINT,
+  OPEN_SAUCED_SESSION_ENDPOINT,
+  OPEN_SAUCED_REPOS_ENDPOINT,
+  OPEN_SAUCED_USER_INSIGHTS_ENDPOINT,
+} from "../constants";
 import { IInsight } from "../ts/InsightDto";
 
 export const isOpenSaucedUser = async (username: string) => {

src/utils/getUserPRVelocity.ts

@@ -0,0 +1,16 @@
+import { differenceInDays } from "date-fns";
+import { IUserPR } from "../ts/types";
+
+export const getUserPRVelocity = ((prDetails: IUserPR[]) => {
+    const mergedPRs = prDetails.filter((prState: IUserPR) => prState.state.toLowerCase() === "merged");
+
+    const totalDays = mergedPRs.reduce((total: number, pr: IUserPR) => {
+        const daysBetween = differenceInDays(new Date(pr.closed_at), new Date(pr.created_at));
+
+        return (total += daysBetween);
+    }, 0);
+
+    const averageVelocity: number = mergedPRs.length > 0 ? Math.round(totalDays / mergedPRs.length) : 0;
+
+    return averageVelocity;
+});