fix: correct url params in update-url (#17)

* Respond to query string version changes in version selector

* fix typo in url param

Missed the difference in naming between the url
params and the parameters in code, which broke url
updating.

* skip updating the history for no-op URL updates

package.json

@@ -11,7 +11,6 @@
     "date-fns": "^2.23.0",
     "framer-motion": "^2.0.0-beta.52",
     "markdown-to-jsx": "6.11.0",
-    "query-string": "6.11.1",
     "react": "16.13.0",
     "react-content-loader": "5.0.2",
     "react-copy-to-clipboard": "5.0.2",

src/components/common/VersionSelector.js

@@ -2,7 +2,7 @@ import React, { Fragment, useState, useMemo, useEffect, useRef } from 'react'
 import styled from '@emotion/styled'
 import { Popover } from 'antd'
 import semver from 'semver/preload'
-import queryString from 'query-string'
+import { useSearchParam } from 'react-use'
 import { Select } from './'
 import UpgradeButton from './UpgradeButton'
 // import { useFetchReleaseVersions } from '../../hooks/fetch-release-versions'
@@ -49,18 +49,6 @@ const ToVersionSelector = styled(({ popover, ...props }) =>
   }
 `
 
-const getVersionsInURL = () => {
-  // Parses `/?from=VERSION&to=VERSION` from URL
-  const { from: fromVersion, to: toVersion } = queryString.parse(
-    window.location.search
-  )
-
-  return {
-    fromVersion,
-    toVersion
-  }
-}
-
 const compareReleaseCandidateVersions = ({ version, versionToCompare }) =>
   ['prerelease', 'prepatch', null].includes(
     semver.diff(version, versionToCompare)
@@ -237,27 +225,26 @@ const VersionSelector = ({
     [releases]
   )
 
-  useEffect(() => {
-    const versionsInURL = getVersionsInURL()
+  const fromVersion = useSearchParam('from')
+  const toVersion = useSearchParam('to')
 
+  useEffect(() => {
     const fetchVersions = async () => {
       // Check if the versions provided in the URL are valid
       const hasFromVersionInURL = doesVersionExist({
-        version: versionsInURL.fromVersion,
+        version: fromVersion,
         allVersions: releaseVersions
       })
 
       const hasToVersionInURL = doesVersionExist({
-        version: versionsInURL.toVersion,
+        version: toVersion,
         allVersions: releaseVersions,
-        minVersion: versionsInURL.fromVersion
+        minVersion: fromVersion
       })
 
       const latestVersion = releaseVersions[0]
       // If the version from URL is not valid then fallback to the latest
-      const toVersionToBeSet = hasToVersionInURL
-        ? versionsInURL.toVersion
-        : latestVersion
+      const toVersionToBeSet = hasToVersionInURL ? toVersion : latestVersion
 
       // Remove `rc` versions from the array of versions
       const sanitizedVersionsWithReleases = getReleasedVersionsWithCandidates({
@@ -274,7 +261,7 @@ const VersionSelector = ({
       setAllVersions(sanitizedVersionsWithReleases)
 
       const fromVersionToBeSet = hasFromVersionInURL
-        ? versionsInURL.fromVersion
+        ? fromVersion
         : // Get first major release before latest
           getFirstRelease(
             {
@@ -316,6 +303,8 @@ const VersionSelector = ({
       fetchVersions()
     }
   }, [
+    fromVersion,
+    toVersion,
     isDone,
     releaseVersions,
     setLocalFromVersion,

src/utils/update-url.js

@@ -11,11 +11,11 @@ export function updateURL({
   const newURL = new URL(window.location.href)
 
   if (fromVersion) {
-    newURL.searchParams.set('fromVersion', fromVersion)
+    newURL.searchParams.set('from', fromVersion)
   }
 
   if (toVersion) {
-    newURL.searchParams.set('toVersion', toVersion)
+    newURL.searchParams.set('to', toVersion)
   }
 
   if (yarnPlugin !== undefined) {
@@ -30,12 +30,14 @@ export function updateURL({
     newURL.searchParams.set('language', language)
   }
 
-  window.history.pushState('', '', newURL.toString())
+  if (window.location.href !== newURL.toString()) {
+    window.history.pushState('', '', newURL.toString())
 
-  // The popstate event is not triggered by window.history.pushState,
-  // so we need to dispatch the event ourselves in order for listeners
-  // to pick it up.
-  //
-  // https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event#the_history_stacks
-  dispatchEvent(new PopStateEvent('popstate'))
+    // The popstate event is not triggered by window.history.pushState,
+    // so we need to dispatch the event ourselves in order for listeners
+    // to pick it up.
+    //
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event#the_history_stacks
+    dispatchEvent(new PopStateEvent('popstate'))
+  }
 }

yarn.lock

@@ -9748,15 +9748,6 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-query-string@6.11.1:
-  version "6.11.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.11.1.tgz#ab021f275d463ce1b61e88f0ce6988b3e8fe7c2c"
-  integrity sha512-1ZvJOUl8ifkkBxu2ByVM/8GijMIPx+cef7u3yroO3Ogm4DOdZcF5dcrWTIlSHe3Pg/mtlt6/eFjObDfJureZZA==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    split-on-first "^1.0.0"
-    strict-uri-encode "^2.0.0"
-
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -11440,11 +11431,6 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-split-on-first@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
-  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -11591,11 +11577,6 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
-strict-uri-encode@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
-  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
-
 string-convert@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"