From ea18382165952c426b0c3eb4acb66421fa742b57 Mon Sep 17 00:00:00 2001
From: Brian 'bdougie' Douglas <brian@opensauced.pizza>
Date: Thu, 15 Aug 2024 19:21:50 -0700
Subject: [PATCH 1/3] replaces velocity with oscr

---
 src/popup/pages/profile.tsx | 407 +++++++++++++++++++-----------------
 1 file changed, 214 insertions(+), 193 deletions(-)

diff --git a/src/popup/pages/profile.tsx b/src/popup/pages/profile.tsx
index 2c0a80e7..50b880b2 100644
--- a/src/popup/pages/profile.tsx
+++ b/src/popup/pages/profile.tsx
@@ -1,13 +1,28 @@
 import { useEffect, useState } from "react";
 import { FaBrain, FaChevronLeft, FaRobot } from "react-icons/fa";
 import { RiLinkedinFill, RiLinkM, RiTwitterFill } from "react-icons/ri";
-import { SiC, SiCplusplus, SiCsharp, SiGoland, SiJavascript, SiPhp, SiPython, SiReact, SiRuby, SiRust, SiTypescript } from "react-icons/si";
+import {
+  SiC,
+  SiCplusplus,
+  SiCsharp,
+  SiGoland,
+  SiJavascript,
+  SiPhp,
+  SiPython,
+  SiReact,
+  SiRuby,
+  SiRust,
+  SiTypescript,
+} from "react-icons/si";
 import { DiJava } from "react-icons/di";
 import OpenSaucedLogo from "../../assets/opensauced-logo.svg";
-import { getUserData, getUserPRData, getUserHighlightsData } from "../../utils/fetchOpenSaucedApiData";
+import {
+  getUserData,
+  getUserPRData,
+  getUserHighlightsData,
+} from "../../utils/fetchOpenSaucedApiData";
 import { emojify } from "node-emoji";
 import { goBack, goTo } from "react-chrome-extension-router";
-import { getRelativeDays } from "../../utils/dateUtils";
 import { countUniqueRepos, PRResponse } from "../../utils/getContributedRepos";
 import { getUserPRVelocity } from "../../utils/getUserPRVelocity";
 import { BiExit } from "react-icons/bi";
@@ -16,200 +31,206 @@ import { optLogOut } from "../../utils/checkAuthentication";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
 
 const interestIcon = {
-    python: <SiPython />,
-    java: <DiJava />,
-    javascript: <SiJavascript />,
-    typescript: <SiTypescript />,
-    csharp: <SiCsharp />,
-    cpp: <SiCplusplus />,
-    c: <SiC />,
-    php: <SiPhp />,
-    ruby: <SiRuby />,
-    react: <SiReact />,
-    ml: <FaBrain />,
-    ai: <FaRobot />,
-    golang: <SiGoland />,
-    rust: <SiRust />,
+  python: <SiPython />,
+  java: <DiJava />,
+  javascript: <SiJavascript />,
+  typescript: <SiTypescript />,
+  csharp: <SiCsharp />,
+  cpp: <SiCplusplus />,
+  c: <SiC />,
+  php: <SiPhp />,
+  ruby: <SiRuby />,
+  react: <SiReact />,
+  ml: <FaBrain />,
+  ai: <FaRobot />,
+  golang: <SiGoland />,
+  rust: <SiRust />,
 };
 
 type InterestIconKeys = keyof typeof interestIcon;
 
 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<PRResponse | null>(null);
-    const [userHighlights, setUserHighlights] = useState<null | { meta: { itemCount: number } }>(null);
-    const [userPRVelocity, setUserPRVelocity] = useState<number>(0);
-
-    useEffect(() => {
-        const fetchUserData = async () => {
-            const [userData, userPRData, userHighlightsData] = await Promise.all([getUserData(username), getUserPRData(username), getUserHighlightsData(username)]);
-
-            setUser(userData);
-            setUserPR(userPRData);
-            setUserHighlights(userHighlightsData);
-            setUserPRVelocity(getUserPRVelocity(userPRData?.data || []));
-        };
-
-        void fetchUserData();
-    }, []);
-
-
-    return (
-        <div className="p-4 bg-slate-800">
-            <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px] text-white">
-                <header className="flex justify-between">
-                    <div className="flex items-center gap-2">
-                        <button
-                            className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
-                            onClick={() => {
-                                goBack();
-                            }}
-                        >
-                            <FaChevronLeft className="text-osOrange" />
-                        </button>
-
-                        <img
-                            alt="OpenSauced logo"
-                            className="w-[100%]"
-                            src={OpenSaucedLogo}
-                        />
-                    </div>
-
-                    <button
-                        className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-red-600 text-white gap-1 p-1.5 px-2 w-fit rounded-md font-medium text-sm"
-                        onClick={() => {
-                            optLogOut();
-                            goTo(Start);
-                        }}
-                    >
-                        <BiExit />
-                        Log Out
-                    </button>
-                </header>
-
-                <main>
-                    <div className="flex flex-col items-center gap-1 mb-4">
-                        <a
-                            className="flex flex-col items-center hover:text-orange hover:scale-105"
-                            href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${username}`}
-                            rel="noopener noreferrer"
-                            target="_blank"
-                        >
-                            <img
-                                alt="User avatar"
-                                className="rounded-full w-14 aspect-square p-1 bg-slate-700"
-                                src={`https://github.com/${username}.png`}
-                            />
-
-                            <p className="font-medium">
-                                @
-                                {username}
-                            </p>
-                        </a>
-
-                        {(user?.linkedin_url || user?.twitter_username) &&
-                            <div className="social flex gap-0.5">
-                                {user.linkedin_url &&
-                                    <a
-                                        className="rounded-sm border bg-slate-700 hover:bg-slate-700/50 hover:text-cyan-400 p-1"
-                                        href={user.linkedin_url}
-                                        rel="noreferrer"
-                                        target="_blank"
-                                        title={user.linkedin_url}
-                                    >
-                                        <RiLinkedinFill className="text-lg" />
-                                    </a>}
-
-                                {user.twitter_username &&
-                                    <a
-                                        className="rounded-sm border bg-slate-700 hover:bg-slate-700/50 hover:text-cyan-400 p-1"
-                                        href={`https://twitter.com/${user.twitter_username}`}
-                                        rel="noreferrer"
-                                        target="_blank"
-                                        title={`https://twitter.com/${user.twitter_username}`}
-                                    >
-                                        <RiTwitterFill className="text-lg" />
-                                    </a>}
-                            </div>}
-
-                        {user?.bio && (
-                            <span>
-                                {emojify(user.bio)}
-                            </span>
-                        )}
-
-                        {user?.blog &&
-                            <a
-                                className="flex text-orange items-center gap-0.5"
-                                href={user.blog}
-                                rel="noreferrer"
-                                target="_blank"
-                            >
-                                <RiLinkM />
-
-                                {user.blog}
-                            </a>}
-                    </div>
-
-                    <div className="grid grid-cols-2 text-white bg-osOrange -mx-4 mb-4 p-4 py-8">
-                        <div className="flex flex-col items-center justify-center p-2 text-xs">
-                            <p>Total Highlights</p>
-
-                            <p className="font-medium text-5xl">
-                                {userHighlights?.meta.itemCount}
-                            </p>
-                        </div>
-
-                        <div className="flex flex-col items-center justify-center p-2 text-xs">
-                            <p>PR Count</p>
-
-                            <p className="font-medium text-5xl">
-                                {userPR?.meta.itemCount}
-                            </p>
-                        </div>
-
-                        <div className="flex flex-col items-center justify-center p-2 text-xs">
-                            <p>Avg PRs Velocity</p>
-
-                            <p className="font-medium text-5xl">
-                                {getRelativeDays(userPRVelocity)}
-                            </p>
-                        </div>
-
-                        <div className="flex flex-col items-center justify-center p-2 text-xs">
-                            <p>Contributed Repos</p>
-
-                            <p className="font-medium text-5xl">
-                                {countUniqueRepos(userPR)}
-                            </p>
-                        </div>
-                    </div>
-
-                    <div>
-                        <h2 className="font-medium text-lg mb-2">Current Interest</h2>
-
-                        <div
-                            className="flex gap-1.5"
-                            style={{ flexWrap: "wrap" }}
-                        >
-                            {user?.interests.split(",").map(interest => (
-                                <a
-                                    key={interest}
-                                    className="flex gap-1 items-center p-1.5 px-4 rounded-full bg-slate-700 hover:bg-slate-700/50"
-                                    href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/${interest}/dashboard/filter/recent`}
-                                    rel="noreferrer"
-                                    target="_blank"
-                                    title={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/${interest}/dashboard/filter/recent`}
-                                >
-                                    {interestIcon[interest as InterestIconKeys]}
-
-                                    {interest}
-                                </a>
-                            ))}
-                        </div>
-                    </div>
-                </main>
+  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;
+    oscr: number;
+  }>(null);
+  const [userPR, setUserPR] = useState<PRResponse | null>(null);
+  const [userHighlights, setUserHighlights] = useState<null | {
+    meta: { itemCount: number };
+  }>(null);
+  const [_, setUserPRVelocity] = useState<number>(0);
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      const [userData, userPRData, userHighlightsData] = await Promise.all([
+        getUserData(username),
+        getUserPRData(username),
+        getUserHighlightsData(username),
+      ]);
+
+      setUser(userData);
+      setUserPR(userPRData);
+      setUserHighlights(userHighlightsData);
+      setUserPRVelocity(getUserPRVelocity(userPRData?.data || []));
+    };
+
+    void fetchUserData();
+  }, []);
+
+  return (
+    <div className="p-4 bg-slate-800">
+      <div className="grid grid-cols-1 divide-y divider-y-center-2 min-w-[320px] text-white">
+        <header className="flex justify-between">
+          <div className="flex items-center gap-2">
+            <button
+              className="rounded-full p-2 bg-slate-700 hover:bg-slate-700/50"
+              onClick={() => {
+                goBack();
+              }}
+            >
+              <FaChevronLeft className="text-osOrange" />
+            </button>
+
+            <img
+              alt="OpenSauced logo"
+              className="w-[100%]"
+              src={OpenSaucedLogo}
+            />
+          </div>
+
+          <button
+            className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-red-600 text-white gap-1 p-1.5 px-2 w-fit rounded-md font-medium text-sm"
+            onClick={() => {
+              optLogOut();
+              goTo(Start);
+            }}
+          >
+            <BiExit />
+            Log Out
+          </button>
+        </header>
+
+        <main>
+          <div className="flex flex-col items-center gap-1 mb-4">
+            <a
+              className="flex flex-col items-center hover:text-orange hover:scale-105"
+              href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/user/${username}`}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <img
+                alt="User avatar"
+                className="rounded-full w-14 aspect-square p-1 bg-slate-700"
+                src={`https://github.com/${username}.png`}
+              />
+
+              <p className="font-medium">@{username}</p>
+            </a>
+
+            {(user?.linkedin_url || user?.twitter_username) && (
+              <div className="social flex gap-0.5">
+                {user.linkedin_url && (
+                  <a
+                    className="rounded-sm border bg-slate-700 hover:bg-slate-700/50 hover:text-cyan-400 p-1"
+                    href={user.linkedin_url}
+                    rel="noreferrer"
+                    target="_blank"
+                    title={user.linkedin_url}
+                  >
+                    <RiLinkedinFill className="text-lg" />
+                  </a>
+                )}
+
+                {user.twitter_username && (
+                  <a
+                    className="rounded-sm border bg-slate-700 hover:bg-slate-700/50 hover:text-cyan-400 p-1"
+                    href={`https://twitter.com/${user.twitter_username}`}
+                    rel="noreferrer"
+                    target="_blank"
+                    title={`https://twitter.com/${user.twitter_username}`}
+                  >
+                    <RiTwitterFill className="text-lg" />
+                  </a>
+                )}
+              </div>
+            )}
+
+            {user?.bio && <span>{emojify(user.bio)}</span>}
+
+            {user?.blog && (
+              <a
+                className="flex text-orange items-center gap-0.5"
+                href={user.blog}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <RiLinkM />
+
+                {user.blog}
+              </a>
+            )}
+          </div>
+
+          <div className="grid grid-cols-2 text-white bg-osOrange -mx-4 mb-4 p-4 py-8">
+            <div className="flex flex-col items-center justify-center p-2 text-xs">
+              <p>Total Highlights</p>
+
+              <p className="font-medium text-5xl">
+                {userHighlights?.meta.itemCount}
+              </p>
             </div>
-        </div>
-    );
+
+            <div className="flex flex-col items-center justify-center p-2 text-xs">
+              <p>PR Count</p>
+
+              <p className="font-medium text-5xl">{userPR?.meta.itemCount}</p>
+            </div>
+
+            <div className="flex flex-col items-center justify-center p-2 text-xs">
+              <p>OSCR</p>
+
+              {user?.bio && (
+                <p className="font-medium text-5xl">{Math.ceil(user.oscr)}</p>
+              )}
+            </div>
+
+            <div className="flex flex-col items-center justify-center p-2 text-xs">
+              <p>Contributed Repos</p>
+
+              <p className="font-medium text-5xl">{countUniqueRepos(userPR)}</p>
+            </div>
+          </div>
+
+          <div>
+            <h2 className="font-medium text-lg mb-2">Current Interest</h2>
+
+            <div className="flex gap-1.5" style={{ flexWrap: "wrap" }}>
+              {user?.interests.split(",").map((interest) => (
+                <a
+                  key={interest}
+                  className="flex gap-1 items-center p-1.5 px-4 rounded-full bg-slate-700 hover:bg-slate-700/50"
+                  href={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/${interest}/dashboard/filter/recent`}
+                  rel="noreferrer"
+                  target="_blank"
+                  title={`https://${OPEN_SAUCED_INSIGHTS_DOMAIN}/${interest}/dashboard/filter/recent`}
+                >
+                  {interestIcon[interest as InterestIconKeys]}
+
+                  {interest}
+                </a>
+              ))}
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
 };

From 9ff5a4f5f07ad8e881b837d5435cc6a634202f37 Mon Sep 17 00:00:00 2001
From: Brian 'bdougie' Douglas <brian@opensauced.pizza>
Date: Thu, 15 Aug 2024 19:28:57 -0700
Subject: [PATCH 2/3] adds context on 30 days

---
 src/popup/pages/profile.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/popup/pages/profile.tsx b/src/popup/pages/profile.tsx
index 50b880b2..00b8c884 100644
--- a/src/popup/pages/profile.tsx
+++ b/src/popup/pages/profile.tsx
@@ -189,7 +189,7 @@ export const Profile = ({ username }: { username: string }) => {
             </div>
 
             <div className="flex flex-col items-center justify-center p-2 text-xs">
-              <p>PR Count</p>
+              <p>PR Count (30 days)</p>
 
               <p className="font-medium text-5xl">{userPR?.meta.itemCount}</p>
             </div>
@@ -203,7 +203,7 @@ export const Profile = ({ username }: { username: string }) => {
             </div>
 
             <div className="flex flex-col items-center justify-center p-2 text-xs">
-              <p>Contributed Repos</p>
+              <p>Contributed Repos (30 days)</p>
 
               <p className="font-medium text-5xl">{countUniqueRepos(userPR)}</p>
             </div>

From 717c60d57534b58462cec5b51849339d563adebf Mon Sep 17 00:00:00 2001
From: Brian Douglas <bdougie@users.noreply.github.com>
Date: Fri, 16 Aug 2024 07:21:57 -0700
Subject: [PATCH 3/3] Update profile.tsx

Co-authored-by: Nick Taylor <nick@nickyt.co>
---
 src/popup/pages/profile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/pages/profile.tsx b/src/popup/pages/profile.tsx
index 00b8c884..524ebf4e 100644
--- a/src/popup/pages/profile.tsx
+++ b/src/popup/pages/profile.tsx
@@ -197,7 +197,7 @@ export const Profile = ({ username }: { username: string }) => {
             <div className="flex flex-col items-center justify-center p-2 text-xs">
               <p>OSCR</p>
 
-              {user?.bio && (
+              {user && (
                 <p className="font-medium text-5xl">{Math.ceil(user.oscr)}</p>
               )}
             </div>