From 596566a51061ba868ffd2306658f01030e52316f Mon Sep 17 00:00:00 2001 From: Kasper Fabricius Kristensen <45367945+kasperkristensen@users.noreply.github.com> Date: Wed, 3 May 2023 19:40:04 +0800 Subject: [PATCH] fix(admin-ui): Navigating to tax settings should not break URL (#3989) * fix navigation to taxes page, and switch out react-helmet with react-helemt-async * add changeset * pinpoint react-hot-toast --- .changeset/thin-owls-give.md | 5 ++ packages/admin-ui/package.json | 4 +- .../admin-ui/ui/src/components/seo/index.tsx | 13 ++-- .../admin-ui/ui/src/domain/settings/index.tsx | 2 +- .../regions/region-overview/index.tsx | 37 ++++------ .../ui/src/domain/settings/taxes/index.tsx | 44 ++++++++---- .../admin-ui/ui/src/providers/providers.tsx | 21 +++--- yarn.lock | 70 +++++++++---------- 8 files changed, 110 insertions(+), 86 deletions(-) create mode 100644 .changeset/thin-owls-give.md diff --git a/.changeset/thin-owls-give.md b/.changeset/thin-owls-give.md new file mode 100644 index 0000000000..f51c7ea65a --- /dev/null +++ b/.changeset/thin-owls-give.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +fix(admin-ui): fixes an issue where navigating to tax settings would append the basename multiple times. Removes `react-helmet` for `react-helmet-async` to get rid off error caused by unsafe sideeffects" diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json index c90470b327..6cab4c12ce 100644 --- a/packages/admin-ui/package.json +++ b/packages/admin-ui/package.json @@ -62,10 +62,10 @@ "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", - "react-helmet": "^6.0.0", + "react-helmet-async": "^1.3.0", "react-highlight-words": "^0.18.0", "react-hook-form": "7.38.0", - "react-hot-toast": "^2.4.0", + "react-hot-toast": "2.4.0", "react-hotkeys-hook": "^3.4.7", "react-json-tree": "^0.17.0", "react-jwt": "^1.1.4", diff --git a/packages/admin-ui/ui/src/components/seo/index.tsx b/packages/admin-ui/ui/src/components/seo/index.tsx index 958460eb51..3298ff6920 100644 --- a/packages/admin-ui/ui/src/components/seo/index.tsx +++ b/packages/admin-ui/ui/src/components/seo/index.tsx @@ -1,4 +1,5 @@ -import { Helmet } from "react-helmet" +import React from "react" +import { Helmet } from "react-helmet-async" const site = { siteMetadata: { @@ -11,12 +12,15 @@ const site = { function SEO({ description, lang, - meta, + meta = [], title, }: { description?: string lang?: string - meta?: any[] + meta?: React.DetailedHTMLProps< + React.MetaHTMLAttributes, + HTMLMetaElement + >[] title: string }) { const metaDescription = description || site.siteMetadata.description @@ -61,7 +65,8 @@ function SEO({ name: `twitter:description`, content: metaDescription, }, - ].concat(meta)} + ...meta, + ]} /> ) } diff --git a/packages/admin-ui/ui/src/domain/settings/index.tsx b/packages/admin-ui/ui/src/domain/settings/index.tsx index 3e2055a3ea..97c71d900f 100644 --- a/packages/admin-ui/ui/src/domain/settings/index.tsx +++ b/packages/admin-ui/ui/src/domain/settings/index.tsx @@ -108,7 +108,7 @@ const Settings = () => ( } /> } /> } /> - } /> + } /> ) diff --git a/packages/admin-ui/ui/src/domain/settings/regions/region-overview/index.tsx b/packages/admin-ui/ui/src/domain/settings/regions/region-overview/index.tsx index e0ab0ed42b..8063bcd429 100644 --- a/packages/admin-ui/ui/src/domain/settings/regions/region-overview/index.tsx +++ b/packages/admin-ui/ui/src/domain/settings/regions/region-overview/index.tsx @@ -1,5 +1,5 @@ import { useAdminRegions } from "medusa-react" -import React, { useEffect } from "react" +import React, { useCallback, useEffect } from "react" import { useNavigate } from "react-router-dom" import Fade from "../../../../components/atoms/fade-wrapper" import Button from "../../../../components/fundamentals/button" @@ -18,7 +18,7 @@ type Props = { const RegionOverview = ({ id }: Props) => { const navigate = useNavigate() const { trackRegions } = useAnalytics() - const { regions, isLoading } = useAdminRegions(undefined, { + const { regions } = useAdminRegions(undefined, { onSuccess: ({ regions, count }) => { trackRegions({ regions: regions.map((r) => r.name), count }) }, @@ -27,6 +27,18 @@ const RegionOverview = ({ id }: Props) => { string | undefined >(id) + const handleChange = useCallback( + (id: string) => { + if (id !== selectedRegion) { + setSelectedRegion(id) + navigate(`/a/settings/regions/${id}`, { + replace: true, + }) + } + }, + [navigate, selectedRegion] + ) + useEffect(() => { if (id) { handleChange(id) @@ -35,26 +47,7 @@ const RegionOverview = ({ id }: Props) => { if (!id && regions && regions.length > 0) { handleChange(regions[0].id) } - }, [id, regions]) - - useEffect(() => { - if (isLoading) { - return - } - - if (!selectedRegion && regions && regions.length > 0) { - navigate(`/a/settings/regions/${regions[0].id}`, { - replace: true, - }) - } - }, [regions, isLoading, selectedRegion]) - - const handleChange = (id: string) => { - if (id !== selectedRegion) { - setSelectedRegion(id) - navigate(`/a/settings/regions/${id}`) - } - } + }, [handleChange, id, regions]) const { state, toggle, close } = useToggleState() diff --git a/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx b/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx index 883243e4d4..3ca2155299 100644 --- a/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx +++ b/packages/admin-ui/ui/src/domain/settings/taxes/index.tsx @@ -1,6 +1,6 @@ import { useAdminRegions } from "medusa-react" -import { useEffect } from "react" -import { useNavigate, useSearchParams } from "react-router-dom" +import { useCallback, useEffect, useState } from "react" +import { useNavigate, useParams } from "react-router-dom" import BackButton from "../../../components/atoms/back-button" import Spinner from "../../../components/atoms/spinner" import GearIcon from "../../../components/fundamentals/icons/gear-icon" @@ -9,19 +9,39 @@ import RadioGroup from "../../../components/organisms/radio-group" import TwoSplitPane from "../../../components/templates/two-split-pane" import TaxDetails from "./details" -const SEARCH_PARAM = "reg_id" - const Taxes = () => { + const params = useParams() + const regId: string | undefined = params["*"] + const navigate = useNavigate() - const [searchParams, setSearchParams] = useSearchParams() const { regions, isLoading } = useAdminRegions() + const [selectedRegion, setSelectedRegion] = useState( + regId + ) + + const handleChange = useCallback( + (id: string) => { + if (id !== selectedRegion) { + setSelectedRegion(id) + navigate(`/a/settings/taxes/${id}`, { + replace: true, + }) + } + }, + [navigate, selectedRegion] + ) + useEffect(() => { - if (!isLoading && regions?.length && !searchParams.get(SEARCH_PARAM)) { - setSearchParams({ [SEARCH_PARAM]: regions[0].id }) + if (regId) { + handleChange(regId) } - }, [regions, isLoading, searchParams, setSearchParams]) + + if (!regId && regions && regions.length > 0) { + handleChange(regions[0].id) + } + }, [handleChange, regId, regions]) return ( <> @@ -50,10 +70,8 @@ const Taxes = () => { ) : ( - setSearchParams({ [SEARCH_PARAM]: value }) - } + value={selectedRegion} + onValueChange={handleChange} > {regions.map((r) => { return ( @@ -75,7 +93,7 @@ const Taxes = () => { )} - + diff --git a/packages/admin-ui/ui/src/providers/providers.tsx b/packages/admin-ui/ui/src/providers/providers.tsx index 8d647fc6e9..04e2d1cad7 100644 --- a/packages/admin-ui/ui/src/providers/providers.tsx +++ b/packages/admin-ui/ui/src/providers/providers.tsx @@ -1,4 +1,5 @@ import { PropsWithChildren } from "react" +import { HelmetProvider } from "react-helmet-async" import { LayeredModalProvider } from "../components/molecules/modal/layered-modal" import { SteppedProvider } from "../components/molecules/modal/stepped-modal" import { FeatureFlagProvider } from "./feature-flag-provider" @@ -10,14 +11,16 @@ import { PollingProvider } from "./polling-provider" */ export const Providers = ({ children }: PropsWithChildren) => { return ( - - - - - {children} - - - - + + + + + + {children} + + + + + ) } diff --git a/yarn.lock b/yarn.lock index 54eb0fc777..6bbc7aea73 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5883,10 +5883,10 @@ __metadata: react-dnd: ^16.0.1 react-dnd-html5-backend: ^16.0.1 react-dom: ^18.2.0 - react-helmet: ^6.0.0 + react-helmet-async: ^1.3.0 react-highlight-words: ^0.18.0 react-hook-form: 7.38.0 - react-hot-toast: ^2.4.0 + react-hot-toast: 2.4.0 react-hotkeys-hook: ^3.4.7 react-json-tree: ^0.17.0 react-jwt: ^1.1.4 @@ -7969,10 +7969,10 @@ __metadata: languageName: node linkType: hard -"@remix-run/router@npm:1.3.1": - version: 1.3.1 - resolution: "@remix-run/router@npm:1.3.1" - checksum: 9140a87b04429dbc5f02eb0a4550d7b284516c3daa8ffa71e4f21c87c15846a8dc5c7253f70955b497c721e91344877cf74c0037eeac6ff8bdd3e08c32a44f86 +"@remix-run/router@npm:1.6.0": + version: 1.6.0 + resolution: "@remix-run/router@npm:1.6.0" + checksum: 109f72bc7550bde225f2a5070b210f66b23ac83154ba155b8cc3ecb05c2770548cedb4746f8d4f70dfdce18ec3a0967bac862dbe2cf19cffea18e9b0a1574219 languageName: node linkType: hard @@ -34642,24 +34642,33 @@ __metadata: languageName: node linkType: hard -"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.1.1": +"react-fast-compare@npm:^3.0.1": version: 3.2.0 resolution: "react-fast-compare@npm:3.2.0" checksum: 2a7d75ce9fb5da1e3c01f74a5cd592f3369a8cc8d44e93654bf147ab221f430238e8be70677e896f2bfcb96a1cb7a47a8d05d84633de764a9d57d27005a4bb9e languageName: node linkType: hard -"react-helmet@npm:^6.0.0": - version: 6.1.0 - resolution: "react-helmet@npm:6.1.0" +"react-fast-compare@npm:^3.2.0": + version: 3.2.1 + resolution: "react-fast-compare@npm:3.2.1" + checksum: 81e805b9cde58a49e37ecb7361a4c97a24e869182761ceda9428c9f4de4b26e461a33c155bfe8fad67c8ae26c6355750671ff6335df80c5d3fe9c537ff2d6ffb + languageName: node + linkType: hard + +"react-helmet-async@npm:^1.3.0": + version: 1.3.0 + resolution: "react-helmet-async@npm:1.3.0" dependencies: - object-assign: ^4.1.1 + "@babel/runtime": ^7.12.5 + invariant: ^2.2.4 prop-types: ^15.7.2 - react-fast-compare: ^3.1.1 - react-side-effect: ^2.1.0 + react-fast-compare: ^3.2.0 + shallowequal: ^1.1.0 peerDependencies: - react: ">=16.3.0" - checksum: 1d2831d9c3b4f5c91f020076aeb6502437a4788077d0c438421e466eb9633d5dc2aacedf7b779a970b807d61cf87793c5ff76ee3190a185d71c90b5cfb367e96 + react: ^16.6.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0 + checksum: 8f3e6d26beff61d2ed18f7b41561df3e4d83a7582914c7196aa65158c7f3cce939276547d7a0b8987952d9d44131406df74efba02d1f8fa8a3940b49e6ced70b languageName: node linkType: hard @@ -34685,7 +34694,7 @@ __metadata: languageName: node linkType: hard -"react-hot-toast@npm:^2.4.0": +"react-hot-toast@npm:2.4.0": version: 2.4.0 resolution: "react-hot-toast@npm:2.4.0" dependencies: @@ -34890,26 +34899,26 @@ __metadata: linkType: hard "react-router-dom@npm:^6.8.0": - version: 6.8.0 - resolution: "react-router-dom@npm:6.8.0" + version: 6.11.0 + resolution: "react-router-dom@npm:6.11.0" dependencies: - "@remix-run/router": 1.3.1 - react-router: 6.8.0 + "@remix-run/router": 1.6.0 + react-router: 6.11.0 peerDependencies: react: ">=16.8" react-dom: ">=16.8" - checksum: 95dd9cc65606934134b14908c80bd4267f6bdd8ad44c9fc5b941d70a37e8d35d852649f3d5789fefa33ab74f99448a71d54f498b8055e860dfd3c328aea73624 + checksum: b5894d7d16ed57ac8ccea3ee3154972dc2c3a34708c7c2b337239e402645eca21ac9bb046f1a3b7f09db36cf4b8c2d3b02d846ac5b7753222578a41798fd6510 languageName: node linkType: hard -"react-router@npm:6.8.0": - version: 6.8.0 - resolution: "react-router@npm:6.8.0" +"react-router@npm:6.11.0": + version: 6.11.0 + resolution: "react-router@npm:6.11.0" dependencies: - "@remix-run/router": 1.3.1 + "@remix-run/router": 1.6.0 peerDependencies: react: ">=16.8" - checksum: bdf0fc1938a8cfa12455db0f6dc5ede884101f267b3bf538df778455515c84ec261a6611e7b815170b8a01a57f6cc03fa6eaf054b34102c201305f965031fa3e + checksum: c1bca326d78a8aa9a0de56d9298ca4f639d03c1047239b02c35744b41e37ae5dae6c38b4337ebd8546485c300c18b8605778c26d2239294ba0b60f9d488c7888 languageName: node linkType: hard @@ -34933,15 +34942,6 @@ __metadata: languageName: node linkType: hard -"react-side-effect@npm:^2.1.0": - version: 2.1.2 - resolution: "react-side-effect@npm:2.1.2" - peerDependencies: - react: ^16.3.0 || ^17.0.0 || ^18.0.0 - checksum: 5d934cae438f701ce646f566750ae6a445e99185ce1a026108f9db728147f7962a22ecf8db79ff26089953a3799b3607766904f4f10194ce42bcd5a1aa0215e8 - languageName: node - linkType: hard - "react-style-singleton@npm:^2.2.1": version: 2.2.1 resolution: "react-style-singleton@npm:2.2.1"