Fix outdated button link on popState (#105)

Author: filiptronicek

src/button/button.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useMemo } from "react";
 import Logo from "react:./logo-mark.svg"
 import type { SupportedApplication } from "./button-contributions";
 import classNames from "classnames";
 import { STORAGE_KEY_ADDRESS, STORAGE_KEY_ALWAYS_OPTIONS, STORAGE_KEY_NEW_TAB } from "~storage";
-import { DEFAULT_GITPOD_ENDPOINT } from "~constants";
+import { DEFAULT_GITPOD_ENDPOINT, EVENT_CURRENT_URL_CHANGED } from "~constants";
 import { useStorage } from "@plasmohq/storage/hook";
 import React from "react";
 
@@ -17,17 +17,30 @@ export const GitpodButton = ({ application, additionalClassNames }: GitpodButton
   const [openInNewTab] = useStorage<boolean>(STORAGE_KEY_NEW_TAB, true);
   const [disableAutostart] = useStorage<boolean>(STORAGE_KEY_ALWAYS_OPTIONS, false);
   const [showDropdown, setShowDropdown] = useState(false);
+  const [currentHref, setCurrentHref] = useState(window.location.href);
 
-  const actions = [
+  useEffect(() => {
+    const handleUrlChange = () => {
+      setCurrentHref(window.location.href)
+    };
+
+    document.addEventListener(EVENT_CURRENT_URL_CHANGED, handleUrlChange);
+
+    return () => {
+      document.removeEventListener(EVENT_CURRENT_URL_CHANGED, handleUrlChange);
+    };
+  }, []);
+
+  const actions = useMemo(() => [
     {
-      href: `${address}/?autostart=${!disableAutostart}#${window.location.toString()}`,
+      href: `${address}/?autostart=${!disableAutostart}#${currentHref}`,
       label: "Open",
     },
     {
-      href: `${address}/?autostart=false#${window.location.toString()}`,
+      href: `${address}/?autostart=false#${currentHref}`,
       label: "Open with options...",
     },
-  ];
+  ], [address, disableAutostart, currentHref]);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
   const firstActionRef = useRef<HTMLAnchorElement | null>(null);
 

src/constants.ts

@@ -1,2 +1,3 @@
 export const DEFAULT_GITPOD_ENDPOINT = "https://gitpod.io";
-export const ALL_ORIGINS_WILDCARD = "*://*/*";
+export const ALL_ORIGINS_WILDCARD = "*://*/*";
+export const EVENT_CURRENT_URL_CHANGED = "current-url-changed";

src/contents/button.tsx

@@ -3,6 +3,7 @@ import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo";
 import React, { type ReactElement } from "react";
 import { GitpodButton } from "../button/button";
 import { buttonContributions, isSiteSuitable, type ButtonContributionParams } from "../button/button-contributions";
+import { EVENT_CURRENT_URL_CHANGED } from "~constants";
 
 export const config: PlasmoCSConfig = {
   matches: [
@@ -26,6 +27,8 @@ class ButtonContributionManager {
     anchor: HTMLElement,
   }
 
+  private currentHref = window.location.href;
+
   _disabled = false;
 
   constructor(private contributions: ButtonContributionParams[]) {
@@ -45,7 +48,7 @@ class ButtonContributionManager {
   }
 
   private getContainerId(contribution: ButtonContributionParams) {
-    return "gp-btn-cnt-" + contribution.application + contribution.additionalClassNames?.map(c => "-" + c)?.join("");
+    return `gp-btn-cnt-${contribution.application}${contribution.additionalClassNames?.map(c => "-" + c)?.join("")}`;
   }
 
   private updateActive(active?: { contribution: ButtonContributionParams, anchor: HTMLElement }) {
@@ -63,6 +66,12 @@ class ButtonContributionManager {
       return null;
     }
 
+    if (this.currentHref !== window.location.href) {
+      this.currentHref = window.location.href;
+      const event = new CustomEvent(EVENT_CURRENT_URL_CHANGED);
+      document.dispatchEvent(event);
+    }
+
     for (const contribution of this.contributions) {
       const isActive = this.isActive(contribution);
       if (isActive) {