From 7742154715151e05c16601e3c087f1695df26193 Mon Sep 17 00:00:00 2001 From: LeonardoRick Date: Fri, 25 Jul 2025 12:11:49 +0100 Subject: [PATCH] chore(routing): remove routing hooks and related context and providers --- .../src/react/contexts/index.ts | 2 - .../contexts/polymorphic-navigate-context.tsx | 60 ------------------ .../contexts/polymorphic-router-context.tsx | 45 -------------- .../src/react/hooks/index.ts | 2 - .../src/react/hooks/providers/index.ts | 2 - .../react/hooks/providers/use-ember-router.ts | 40 ------------ .../src/react/hooks/providers/use-navigate.ts | 61 ------------------- .../src/react/hooks/use-navigate.ts | 15 ----- .../src/react/hooks/use-router.ts | 15 ----- test-app/app/react/custom-providers.tsx | 18 +----- test-app/app/react/example-routing.tsx | 42 +------------ test-app/tests/acceptance/links-test.js | 55 ----------------- .../tests/integration/components/link-test.js | 1 + 13 files changed, 4 insertions(+), 354 deletions(-) delete mode 100644 react-migration-toolkit/src/react/contexts/polymorphic-navigate-context.tsx delete mode 100644 react-migration-toolkit/src/react/contexts/polymorphic-router-context.tsx delete mode 100644 react-migration-toolkit/src/react/hooks/providers/use-ember-router.ts delete mode 100644 react-migration-toolkit/src/react/hooks/providers/use-navigate.ts delete mode 100644 react-migration-toolkit/src/react/hooks/use-navigate.ts delete mode 100644 react-migration-toolkit/src/react/hooks/use-router.ts diff --git a/react-migration-toolkit/src/react/contexts/index.ts b/react-migration-toolkit/src/react/contexts/index.ts index 8d7e86c..aa89bcd 100644 --- a/react-migration-toolkit/src/react/contexts/index.ts +++ b/react-migration-toolkit/src/react/contexts/index.ts @@ -1,3 +1 @@ -export { PolymorphicRouterContextProvider } from './polymorphic-router-context'; -export { PolymorphicNavigateProvider } from './polymorphic-navigate-context'; export { ApplicationProvider } from './application-context'; diff --git a/react-migration-toolkit/src/react/contexts/polymorphic-navigate-context.tsx b/react-migration-toolkit/src/react/contexts/polymorphic-navigate-context.tsx deleted file mode 100644 index 20edc12..0000000 --- a/react-migration-toolkit/src/react/contexts/polymorphic-navigate-context.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import type { ReactNode } from 'react'; -import { createContext, useContext } from 'react'; - -export interface PolymorphicNavigate { - ( - to: string | Path, - options?: NavigateOptions, - ): void | Promise | Promise; -} - -export interface Path - extends Partial<{ - hash: string; - pathname: string; - search: string; - }> { - pathname: string; -} - -export type RelativeRoutingType = 'route' | 'path'; - -export interface NavigateOptions { - flushSync?: boolean; - preventScrollReset?: boolean; - relative?: RelativeRoutingType; - replace?: boolean; - // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This type comes from react-router - state?: any; - viewTransition?: boolean; -} - -interface NavigateContextProviderProps { - children: ReactNode; - navigate: PolymorphicNavigate; -} - -export const PolymorphicNavigateContext = - createContext(null); - -export function PolymorphicNavigateProvider({ - children, - navigate, -}: NavigateContextProviderProps): ReactNode { - return ( - - {children} - - ); -} - -export function useNavigate(): PolymorphicNavigate { - const navigate = useContext(PolymorphicNavigateContext); - - if (!navigate) - throw new Error( - 'this hook can only be used with PolymorphicNavigateProvider', - ); - - return navigate; -} diff --git a/react-migration-toolkit/src/react/contexts/polymorphic-router-context.tsx b/react-migration-toolkit/src/react/contexts/polymorphic-router-context.tsx deleted file mode 100644 index 33eba5f..0000000 --- a/react-migration-toolkit/src/react/contexts/polymorphic-router-context.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { createContext, type ReactNode } from 'react'; - -export interface PolymorphicRouter { - pathname: string; - query: object; - asPath: string; - basePath: string; - push: ( - url: string, - as?: string, - options?: TransitionOptions, - ) => Promise; - replace: ( - url: string, - as?: string, - options?: TransitionOptions, - ) => Promise; -} - -export interface TransitionOptions { - shallow?: boolean; - locale?: string | false; - scroll?: boolean; - unstable_skipClientCache?: boolean; -} - -interface RouterContextProviderProps { - router: PolymorphicRouter; - children: React.ReactNode; -} - -export const PolymorphicRouterContext = createContext( - null, -); - -export function PolymorphicRouterContextProvider({ - children, - router, -}: RouterContextProviderProps): ReactNode { - return ( - - {children} - - ); -} diff --git a/react-migration-toolkit/src/react/hooks/index.ts b/react-migration-toolkit/src/react/hooks/index.ts index 7b249a3..230bd76 100644 --- a/react-migration-toolkit/src/react/hooks/index.ts +++ b/react-migration-toolkit/src/react/hooks/index.ts @@ -1,4 +1,2 @@ export { useEmberService } from './use-ember-service'; export { useApplicationInstance } from './use-application-instance'; -export { useNavigate } from './use-navigate'; -export { useRouter } from './use-router'; diff --git a/react-migration-toolkit/src/react/hooks/providers/index.ts b/react-migration-toolkit/src/react/hooks/providers/index.ts index 2c3533d..54ae317 100644 --- a/react-migration-toolkit/src/react/hooks/providers/index.ts +++ b/react-migration-toolkit/src/react/hooks/providers/index.ts @@ -1,3 +1 @@ export { useEmberIntl } from './use-ember-intl'; -export { useEmberRouter } from './use-ember-router'; -export { useNavigate } from './use-navigate'; diff --git a/react-migration-toolkit/src/react/hooks/providers/use-ember-router.ts b/react-migration-toolkit/src/react/hooks/providers/use-ember-router.ts deleted file mode 100644 index 8708b07..0000000 --- a/react-migration-toolkit/src/react/hooks/providers/use-ember-router.ts +++ /dev/null @@ -1,40 +0,0 @@ -import type { RouteModel } from '@ember/routing/router-service'; -import type Transition from '@ember/routing/transition'; -import { useEmberService } from '../use-ember-service'; -import type { UrlObject } from '../../types/router'; -import type { PolymorphicRouter } from '../../contexts/polymorphic-router-context'; -import { parseUrl } from '../../utils/url'; - -export const useEmberRouter = (): PolymorphicRouter => { - const emberRouter = useEmberService('router'); - - const push = (url: string | UrlObject): Promise => { - const parsedUrl = parseUrl(url); - const { queryParams, params } = emberRouter.recognize(parsedUrl); - const models = Object.values(params) as RouteModel[]; - const transition = emberRouter.transitionTo(parsedUrl, models, { - queryParams, - }) as Transition; - return transition.promise; - }; - - const replace = (url: string | UrlObject): Promise => { - const parsedUrl = parseUrl(url); - const { queryParams, params } = emberRouter.recognize(parsedUrl); - const models = Object.values(params) as RouteModel[]; - const transition = emberRouter.replaceWith(parsedUrl, models, { - queryParams, - }) as Transition; - return transition.promise; - }; - - const router: PolymorphicRouter = { - pathname: emberRouter.currentURL, - query: emberRouter.currentRoute?.queryParams || {}, - asPath: emberRouter.currentURL, - basePath: emberRouter.rootURL, - push, - replace, - }; - return router; -}; diff --git a/react-migration-toolkit/src/react/hooks/providers/use-navigate.ts b/react-migration-toolkit/src/react/hooks/providers/use-navigate.ts deleted file mode 100644 index 868cb33..0000000 --- a/react-migration-toolkit/src/react/hooks/providers/use-navigate.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { useCallback } from 'react'; -import type { RouteModel } from '@ember/routing/router-service'; -import type Transition from '@ember/routing/transition'; -import { useEmberService } from '../../hooks'; -import { parseUrl } from '../../utils/url'; -import type { UrlObject } from '../../types/router'; - -interface PolymorphicNavigate { - ( - to: string | Path, - options?: NavigateOptions, - ): void | Promise | Promise; -} - -interface Path - extends Partial<{ - hash: string; - pathname: string; - search: string; - }> { - pathname: string; -} - -type RelativeRoutingType = 'route' | 'path'; - -interface NavigateOptions { - flushSync?: boolean; - preventScrollReset?: boolean; - relative?: RelativeRoutingType; - replace?: boolean; - // eslint-disable-next-line @typescript-eslint/no-explicit-any -- this comes from react router - state?: any; - viewTransition?: boolean; -} - -export const useNavigate = (): PolymorphicNavigate => { - const emberRouter = useEmberService('router'); - - return useCallback( - ( - url: string | UrlObject, - options: NavigateOptions = {}, - ): Promise => { - const parsedUrl = parseUrl(url); - const { queryParams, params } = emberRouter.recognize(parsedUrl); - const models = Object.values(params) as RouteModel[]; - let transition: Transition; - if (options.replace) { - transition = emberRouter.replaceWith(parsedUrl, models, { - queryParams, - }) as Transition; - } else { - transition = emberRouter.transitionTo(parsedUrl, models, { - queryParams, - }) as Transition; - } - return transition.promise; - }, - [emberRouter], - ); -}; diff --git a/react-migration-toolkit/src/react/hooks/use-navigate.ts b/react-migration-toolkit/src/react/hooks/use-navigate.ts deleted file mode 100644 index b29f011..0000000 --- a/react-migration-toolkit/src/react/hooks/use-navigate.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { useContext } from 'react'; -import { - PolymorphicNavigateContext, - type PolymorphicNavigate, -} from '../contexts/polymorphic-navigate-context'; - -export const useNavigate = (): PolymorphicNavigate => { - const navigate = useContext(PolymorphicNavigateContext); - if (!navigate) { - throw new Error( - 'this hook can only be used with PolymorphicNavigateProvider', - ); - } - return navigate; -}; diff --git a/react-migration-toolkit/src/react/hooks/use-router.ts b/react-migration-toolkit/src/react/hooks/use-router.ts deleted file mode 100644 index 46dd403..0000000 --- a/react-migration-toolkit/src/react/hooks/use-router.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { useContext } from 'react'; -import { - PolymorphicRouterContext, - type PolymorphicRouter, -} from '../contexts/polymorphic-router-context'; - -export const useRouter = (): PolymorphicRouter => { - const router = useContext(PolymorphicRouterContext); - if (!router) { - throw new Error( - 'this hook can only be used with PolymorphicRouterProvider', - ); - } - return router; -}; diff --git a/test-app/app/react/custom-providers.tsx b/test-app/app/react/custom-providers.tsx index 3181c52..5626d55 100644 --- a/test-app/app/react/custom-providers.tsx +++ b/test-app/app/react/custom-providers.tsx @@ -1,28 +1,14 @@ import type { PropsWithChildren, ReactNode } from "react"; import { ThemeProvider } from "./theme-context.tsx"; -import { - PolymorphicNavigateProvider, - PolymorphicRouterContextProvider, -} from "@qonto/react-migration-toolkit/react/providers"; -import { - useEmberIntl, - useEmberRouter, - useNavigate, -} from "@qonto/react-migration-toolkit/react/hooks/providers"; +import { useEmberIntl } from "@qonto/react-migration-toolkit/react/hooks/providers"; import { RawIntlProvider } from "react-intl"; export function CustomProviders({ children }: PropsWithChildren): ReactNode { const intl = useEmberIntl(); - const router = useEmberRouter(); - const navigate = useNavigate(); return ( - - - {children} - - + {children} ); } diff --git a/test-app/app/react/example-routing.tsx b/test-app/app/react/example-routing.tsx index 7b8bf6c..7bc0162 100644 --- a/test-app/app/react/example-routing.tsx +++ b/test-app/app/react/example-routing.tsx @@ -1,9 +1,5 @@ import { Link } from "@qonto/react-migration-toolkit/react/components"; -import { useNavigate } from "@qonto/react-migration-toolkit/react/hooks"; - export function ExampleRouting() { - const navigate = useNavigate(); - return (
@@ -11,44 +7,8 @@ export function ExampleRouting() { - Visit About page + Visit About page replacing - - - - - - - -
); } diff --git a/test-app/tests/acceptance/links-test.js b/test-app/tests/acceptance/links-test.js index 884f3c5..e6a584b 100644 --- a/test-app/tests/acceptance/links-test.js +++ b/test-app/tests/acceptance/links-test.js @@ -2,7 +2,6 @@ import { module, test } from 'qunit'; import { visit, click } from '@ember/test-helpers'; import { setupApplicationTest } from 'test-app/tests/helpers'; import { setupIntl } from 'ember-intl/test-support'; -import sinon from 'sinon'; module('Acceptance | links', function (hooks) { setupApplicationTest(hooks); @@ -20,58 +19,4 @@ module('Acceptance | links', function (hooks) { assert.dom().hasText('Welcome to the About page'); }); - - module('when navigating with Polymorphic router', function (hooks) { - hooks.beforeEach(async function () { - await visit('/links'); - }); - - test('should use push', async function (assert) { - const router = this.owner.lookup('service:router'); - const transitionToSpy = sinon.spy(router, 'transitionTo'); - - await click('[data-test-about-button-push]'); - - assert.dom().hasText('Welcome to the About page'); - assert.ok(transitionToSpy.calledWith('/about', [], { queryParams: {} })); - }); - - test('should use push and keep query params', async function (assert) { - const router = this.owner.lookup('service:router'); - const transitionToSpy = sinon.spy(router, 'transitionTo'); - - await click('[data-test-about-button-push-query]'); - - assert.dom().hasText('Welcome to the About page'); - assert.ok( - transitionToSpy.calledWith('/about?foo=bar&baz=qux', [], { - queryParams: { foo: 'bar', baz: 'qux' }, - }), - ); - }); - - test('should use replace', async function (assert) { - const router = this.owner.lookup('service:router'); - const replaceWith = sinon.spy(router, 'replaceWith'); - - await click('[data-test-about-button-replace]'); - - assert.dom().hasText('Welcome to the About page'); - assert.ok(replaceWith.calledWith('/about', [], { queryParams: {} })); - }); - - test('should use replace and keep query params', async function (assert) { - const router = this.owner.lookup('service:router'); - const replaceWith = sinon.spy(router, 'replaceWith'); - - await click('[data-test-about-button-replace-query]'); - - assert.dom().hasText('Welcome to the About page'); - assert.ok( - replaceWith.calledWith('/about?foo=bar&baz=qux', [], { - queryParams: { foo: 'bar', baz: 'qux' }, - }), - ); - }); - }); }); diff --git a/test-app/tests/integration/components/link-test.js b/test-app/tests/integration/components/link-test.js index e77d979..b33451c 100644 --- a/test-app/tests/integration/components/link-test.js +++ b/test-app/tests/integration/components/link-test.js @@ -21,6 +21,7 @@ module('Integration | Component | Link', function (hooks) { return 'result'; }, }; + this.router.transitionTo = sinon.spy(transitionTo, 'promise'); this.setProperties({ link: Link,