fix: Duplicate buttons on GH profile page (#48)

open-sauced · Apr 28, 2023 · 9ee2dca · 9ee2dca
1 parent 41188a3
commit 9ee2dca
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;