From 1f429462a287f180df15923224c77f77c9003698 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Brandon=20P=C3=A9rez?= <bperez@sistecredito.com>
Date: Sun, 27 Oct 2024 19:18:11 -0500
Subject: [PATCH] feature: navigate component

---
 assets/react-router/README.md.template        | 13 +++++++++++
 assets/react-router/makeRoute.tsx             | 23 +++++++++++++++++++
 .../finished/src/routes/README.md             | 13 +++++++++++
 .../finished/src/routes/makeRoute.tsx         | 23 +++++++++++++++++++
 4 files changed, 72 insertions(+)

diff --git a/assets/react-router/README.md.template b/assets/react-router/README.md.template
index bf86726..539e774 100644
--- a/assets/react-router/README.md.template
+++ b/assets/react-router/README.md.template
@@ -37,6 +37,19 @@ return (
   </Home.NavLink>
 );
 ```
+
+For navigate when it is rendered, use the `Navigate` component (built on top of `Navigate`) to change the current location to other page. For example:
+
+```tsx
+import { SignIn, Home } from "{{routes}}";
+
+if (!isAuthorized) return <SignIn.Navigate />;
+
+return <Home.Navigate />;
+```
+
+This is the equivalent of doing `<Navigate to="/sign-in" />` with in a component.
+
 # Configure declarative-routing
 
 After running `npx declarative-routing init`, you don't need to configure anything to use it.
diff --git a/assets/react-router/makeRoute.tsx b/assets/react-router/makeRoute.tsx
index 4a45fde..63d03a2 100644
--- a/assets/react-router/makeRoute.tsx
+++ b/assets/react-router/makeRoute.tsx
@@ -5,6 +5,8 @@ import { ZodSchema, z } from "zod";
 import queryString from "query-string";
 import {
   Link,
+  Navigate,
+  NavigateProps,
   NavLink,
   useParams as useParmsRR,
   useSearchParams as useSearchParamsRR,
@@ -61,6 +63,9 @@ export type RouteBuilder<
       search?: z.input<Search>;
     } & { children?: React.ReactNode }
   >;
+  Navigate: React.FC<
+    Omit<NavigateProps, "to"> & z.input<Params> & { search?: z.input<Search> }
+  >;
 
   params: z.output<Params>;
   paramsSchema: Params;
@@ -274,6 +279,24 @@ export function makeRoute<
     );
   };
 
+  routeBuilder.Navigate = function RouteLink({
+    search: linkSearch,
+    ...props
+  }: Omit<NavigateProps, "to"> &
+    z.input<Params> & { search?: z.input<Search> }) {
+    const params = info.params.parse(props);
+    const extraProps = { ...props };
+    for (const key of Object.keys(params)) {
+      delete extraProps[key];
+    }
+    return (
+      <Navigate
+        {...props}
+        to={routeBuilder(info.params.parse(props), linkSearch)}
+      />
+    );
+  };
+
   routeBuilder.params = undefined as z.output<Params>;
   routeBuilder.paramsSchema = info.params;
   routeBuilder.search = undefined as z.output<Search>;
diff --git a/examples/react-router/finished/src/routes/README.md b/examples/react-router/finished/src/routes/README.md
index 2a7cee8..aa6d6d6 100644
--- a/examples/react-router/finished/src/routes/README.md
+++ b/examples/react-router/finished/src/routes/README.md
@@ -37,6 +37,19 @@ return (
   </Home.NavLink>
 );
 ```
+
+For navigate when it is rendered, use the `Navigate` component (built on top of `Navigate`) to change the current location to other page. For example:
+
+```tsx
+import { SignIn, Home } from "./src/routes";
+
+if (!isAuthorized) return <SignIn.Navigate />;
+
+return <Home.Navigate />;
+```
+
+This is the equivalent of doing `<Navigate to="/sign-in" />` with in a component.
+
 # Configure declarative-routing
 
 After running `npx declarative-routing init`, you don't need to configure anything to use it.
diff --git a/examples/react-router/finished/src/routes/makeRoute.tsx b/examples/react-router/finished/src/routes/makeRoute.tsx
index 4a45fde..63d03a2 100644
--- a/examples/react-router/finished/src/routes/makeRoute.tsx
+++ b/examples/react-router/finished/src/routes/makeRoute.tsx
@@ -5,6 +5,8 @@ import { ZodSchema, z } from "zod";
 import queryString from "query-string";
 import {
   Link,
+  Navigate,
+  NavigateProps,
   NavLink,
   useParams as useParmsRR,
   useSearchParams as useSearchParamsRR,
@@ -61,6 +63,9 @@ export type RouteBuilder<
       search?: z.input<Search>;
     } & { children?: React.ReactNode }
   >;
+  Navigate: React.FC<
+    Omit<NavigateProps, "to"> & z.input<Params> & { search?: z.input<Search> }
+  >;
 
   params: z.output<Params>;
   paramsSchema: Params;
@@ -274,6 +279,24 @@ export function makeRoute<
     );
   };
 
+  routeBuilder.Navigate = function RouteLink({
+    search: linkSearch,
+    ...props
+  }: Omit<NavigateProps, "to"> &
+    z.input<Params> & { search?: z.input<Search> }) {
+    const params = info.params.parse(props);
+    const extraProps = { ...props };
+    for (const key of Object.keys(params)) {
+      delete extraProps[key];
+    }
+    return (
+      <Navigate
+        {...props}
+        to={routeBuilder(info.params.parse(props), linkSearch)}
+      />
+    );
+  };
+
   routeBuilder.params = undefined as z.output<Params>;
   routeBuilder.paramsSchema = info.params;
   routeBuilder.search = undefined as z.output<Search>;