Merge pull request #46 from qonto/use-navigate-provider-hook

feat(useNavigate): add hook and its provider

Author: AntoineMoues

react-migration-toolkit/src/react/contexts/index.ts

@@ -1,3 +1,4 @@
 export { LDProvider, type LDFlagSet } from './launchdarkly-context';
 export { PolymorphicRouterContextProvider } from './polymorphic-router-context';
+export { PolymorphicNavigateProvider } from './polymorphic-navigate-context';
 export { ApplicationProvider } from './application-context';

react-migration-toolkit/src/react/contexts/polymorphic-navigate-context.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { createContext, useContext } from 'react';
+
+export interface PolymorphicNavigate {
+  (
+    to: string | Path,
+    options?: NavigateOptions,
+  ): void | Promise<void> | Promise<boolean>;
+}
+
+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<PolymorphicNavigate | null>(null);
+
+export function PolymorphicNavigateProvider({
+  children,
+  navigate,
+}: NavigateContextProviderProps): ReactNode {
+  return (
+    <PolymorphicNavigateContext.Provider value={navigate}>
+      {children}
+    </PolymorphicNavigateContext.Provider>
+  );
+}
+
+export function useNavigate(): PolymorphicNavigate {
+  const navigate = useContext(PolymorphicNavigateContext);
+
+  if (!navigate)
+    throw new Error(
+      'this hook can only be used with PolymorphicNavigateProvider',
+    );
+
+  return navigate;
+}

react-migration-toolkit/src/react/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useEmberService } from './use-ember-service';
 export { useApplicationInstance } from './use-application-instance';
 export { useFlags } from './use-flags';
+export { useNavigate } from './use-navigate';
 export { useRouter } from './use-router';

react-migration-toolkit/src/react/hooks/providers/index.ts

@@ -1,2 +1,3 @@
 export { useEmberIntl } from './use-ember-intl';
 export { useEmberRouter } from './use-ember-router';
+export { useNavigate } from './use-navigate';

react-migration-toolkit/src/react/hooks/providers/use-navigate.ts

@@ -0,0 +1,61 @@
+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<void> | Promise<boolean>;
+}
+
+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<boolean> => {
+      const parsedUrl = parseUrl(url);
+      const { queryParams, params } = emberRouter.recognize(parsedUrl);
+      const models = Object.values(params) as RouteModel[];
+      let transition: Transition<boolean>;
+      if (options.replace) {
+        transition = emberRouter.replaceWith(parsedUrl, models, {
+          queryParams,
+        }) as Transition<boolean>;
+      } else {
+        transition = emberRouter.transitionTo(parsedUrl, models, {
+          queryParams,
+        }) as Transition<boolean>;
+      }
+      return transition.promise;
+    },
+    [emberRouter],
+  );
+};

react-migration-toolkit/src/react/hooks/use-navigate.ts

@@ -0,0 +1,15 @@
+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;
+};

test-app/app/react/custom-providers.tsx

@@ -1,21 +1,28 @@
 import type { PropsWithChildren, ReactNode } from "react";
 import { ThemeProvider } from "./theme-context.tsx";
-import { PolymorphicRouterContextProvider } from "@qonto/react-migration-toolkit/react/providers";
+import {
+  PolymorphicNavigateProvider,
+  PolymorphicRouterContextProvider,
+} from "@qonto/react-migration-toolkit/react/providers";
 import {
   useEmberIntl,
   useEmberRouter,
+  useNavigate,
 } 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 (
     <ThemeProvider theme={{ current: "light" }} data-test-providers>
-      <PolymorphicRouterContextProvider router={router}>
-        <RawIntlProvider value={intl}>{children}</RawIntlProvider>
-      </PolymorphicRouterContextProvider>
+      <PolymorphicNavigateProvider navigate={navigate}>
+        <PolymorphicRouterContextProvider router={router}>
+          <RawIntlProvider value={intl}>{children}</RawIntlProvider>
+        </PolymorphicRouterContextProvider>
+      </PolymorphicNavigateProvider>
     </ThemeProvider>
   );
 }

test-app/app/react/example-routing.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@qonto/react-migration-toolkit/react/components";
-import { useRouter } from "@qonto/react-migration-toolkit/react/hooks";
+import { useNavigate } from "@qonto/react-migration-toolkit/react/hooks";
 
 export function ExampleRouting() {
-  const router = useRouter();
+  const navigate = useNavigate();
 
   return (
     <div>
@@ -17,7 +17,7 @@ export function ExampleRouting() {
       <button
         data-test-about-button-push
         onClick={() => {
-          router.push("/about");
+          navigate("/about");
         }}
       >
         Push to About page
@@ -26,7 +26,7 @@ export function ExampleRouting() {
       <button
         data-test-about-button-push-query
         onClick={() => {
-          router.push("/about?foo=bar&baz=qux");
+          navigate("/about?foo=bar&baz=qux");
         }}
       >
         Push to About page with query params
@@ -35,7 +35,7 @@ export function ExampleRouting() {
       <button
         data-test-about-button-replace
         onClick={() => {
-          router.replace("/about");
+          navigate("/about", { replace: true });
         }}
       >
         Replace to About page
@@ -44,7 +44,7 @@ export function ExampleRouting() {
       <button
         data-test-about-button-replace-query
         onClick={() => {
-          router.replace("/about?foo=bar&baz=qux");
+          navigate("/about?foo=bar&baz=qux", { replace: true });
         }}
       >
         Replace to About page with query params