From 9ee2dcab3d85eef164b43b886a959c9aaff4cdc5 Mon Sep 17 00:00:00 2001
From: Anush <anushshetty90@gmail.com>
Date: Fri, 28 Apr 2023 23:24:11 +0530
Subject: [PATCH] fix: Duplicate buttons on GH profile page (#48)

---
 src/content-scripts/profileScreen.ts      |  9 +++++----
 src/utils/colorPreference.ts              |  9 +++------
 src/utils/dom-utils/inviteToOpenSauced.ts | 11 +++--------
 src/utils/dom-utils/viewOnOpenSauced.ts   | 11 +++--------
 4 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/content-scripts/profileScreen.ts b/src/content-scripts/profileScreen.ts
index 2727fb2c..1310dedf 100644
--- a/src/content-scripts/profileScreen.ts
+++ b/src/content-scripts/profileScreen.ts
@@ -2,15 +2,16 @@ import { getGithubUsername } from "../utils/urlMatchers";
 import { isOpenSaucedUser } from "../utils/fetchOpenSaucedApiData";
 import injectViewOnOpenSauced from "../utils/dom-utils/viewOnOpenSauced";
 import injectInviteToOpenSauced from "../utils/dom-utils/inviteToOpenSauced";
-import { getGHColorScheme } from "../utils/colorPreference";
+import { prefersDarkMode } from "../utils/colorPreference";
 
 const processProfilePage = async () => {
   const username = getGithubUsername(window.location.href);
   if (username != null) {
-    const colorScheme = getGHColorScheme(document.cookie);
+    const darkMode = prefersDarkMode(document.cookie);
+    if (darkMode) document.documentElement.classList.add("dark");
     const user = await isOpenSaucedUser(username);
-    if (user) injectViewOnOpenSauced(username, colorScheme);
-    else injectInviteToOpenSauced(username, colorScheme);
+    if (user) injectViewOnOpenSauced(username);
+    else injectInviteToOpenSauced(username);
   }
 };
 
diff --git a/src/utils/colorPreference.ts b/src/utils/colorPreference.ts
index b0737863..1bf453ec 100644
--- a/src/utils/colorPreference.ts
+++ b/src/utils/colorPreference.ts
@@ -1,13 +1,10 @@
-export type ColorScheme = "auto" | "light" | "dark";
+type ColorScheme = "auto" | "light" | "dark";
 
-export const getGHColorScheme = (cookieString: string) => {
+export const prefersDarkMode = (cookieString: string): boolean => {
   const regex = /(?<=\bcolor_mode=)[^;]+/g;
   const match = regex.exec(cookieString);
   const cookie = match && JSON.parse(decodeURIComponent(match[0]));
-  return (cookie.color_mode as ColorScheme) || "auto";
-};
-
-export const prefersDarkMode = (colorScheme: ColorScheme): boolean => {
+  const colorScheme: ColorScheme = cookie.color_mode ?? "auto";
   if (colorScheme === "auto") {
     return window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
diff --git a/src/utils/dom-utils/inviteToOpenSauced.ts b/src/utils/dom-utils/inviteToOpenSauced.ts
index 0643b03b..1aca5662 100644
--- a/src/utils/dom-utils/inviteToOpenSauced.ts
+++ b/src/utils/dom-utils/inviteToOpenSauced.ts
@@ -2,12 +2,8 @@ import { GITHUB_PROFILE_MENU_SELECTOR } from "../../constants";
 import { InviteToOpenSaucedButton } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedButton";
 import { InviteToOpenSaucedModal } from "../../content-scripts/components/InviteToOpenSauced/InviteToOpenSaucedModal";
 import { getTwitterUsername, getLinkedInUsername } from "../urlMatchers";
-import { ColorScheme, prefersDarkMode } from "../colorPreference";
 
-const injectOpenSaucedInviteButton = (
-  username: string,
-  colorScheme: ColorScheme
-) => {
+const injectOpenSaucedInviteButton = (username: string) => {
   const emailAddress: string | undefined = (
     document.querySelector(`a[href^="mailto:"]`) as HTMLAnchorElement
   )?.href.substr(7);
@@ -32,11 +28,10 @@ const injectOpenSaucedInviteButton = (
     inviteToOpenSaucedButton
   );
 
-  const darkMode = prefersDarkMode(colorScheme);
   const userBio = document.querySelector(GITHUB_PROFILE_MENU_SELECTOR);
   if (!userBio || !userBio.parentNode) return;
-  if (darkMode) userBio.parentElement?.classList.add("dark");
-  userBio.parentNode.replaceChild(inviteToOpenSaucedButton, userBio);
+  if (userBio.lastChild?.isEqualNode(inviteToOpenSaucedButton)) return;
+  userBio.append(inviteToOpenSaucedButton);
   document.body.appendChild(inviteToOpenSaucedModal);
 };
 
diff --git a/src/utils/dom-utils/viewOnOpenSauced.ts b/src/utils/dom-utils/viewOnOpenSauced.ts
index 857a9308..5c97137e 100644
--- a/src/utils/dom-utils/viewOnOpenSauced.ts
+++ b/src/utils/dom-utils/viewOnOpenSauced.ts
@@ -3,21 +3,16 @@ import {
   GITHUB_PROFILE_EDIT_MENU_SELECTOR,
 } from "../../constants";
 import { ViewOnOpenSaucedButton } from "../../content-scripts/components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
-import { ColorScheme, prefersDarkMode } from "../colorPreference";
 
-const injectViewOnOpenSaucedButton = (
-  username: string,
-  colorScheme: ColorScheme
-) => {
+const injectViewOnOpenSaucedButton = (username: string) => {
   const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
 
-  const darkMode = prefersDarkMode(colorScheme);
   const userBio = document.querySelector(
     `${GITHUB_PROFILE_MENU_SELECTOR}, ${GITHUB_PROFILE_EDIT_MENU_SELECTOR}`
   );
   if (!userBio || !userBio.parentNode) return;
-  if (darkMode) userBio.parentElement?.classList.add("dark");
-  userBio.parentNode.replaceChild(viewOnOpenSaucedButton, userBio);
+  if (userBio.lastChild?.isEqualNode(viewOnOpenSaucedButton)) return;
+  userBio.append(viewOnOpenSaucedButton);
 };
 
 export default injectViewOnOpenSaucedButton;