feat(redirect): add external redirect type

varianter · Sep 10, 2024 · ac7b932 · ac7b932
1 parent e458c10
commit ac7b932
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -26,9 +26,9 @@ export async function middleware(request: NextRequest) {
   if (redirectRes.ok) {
     const redirect: RedirectDestinationSlugPage | null =
       await redirectRes.json();
-    if (redirect?.destinationSlug) {
+    if (redirect?.destination) {
       return NextResponse.redirect(
-        new URL(redirect.destinationSlug, request.url),
+        new URL(redirect.destination, request.url),
         HTTP_STATUSES.TEMPORARY_REDIRECT,
       );
     }

diff --git a/studio/lib/payloads/redirect.ts b/studio/lib/payloads/redirect.ts
@@ -1,3 +1,3 @@
 export interface RedirectDestinationSlugPage {
-  destinationSlug: string;
+  destination: string;
 }
diff --git a/studio/lib/queries/redirects.ts b/studio/lib/queries/redirects.ts
@@ -2,9 +2,10 @@ import { groq } from "next-sanity";
 
 export const REDIRECT_BY_SOURCE_SLUG_QUERY = groq`
   *[_type == "redirect" && source.current == $slug][0]{
-    "destinationSlug": select(
+    "destination": select(
       destination.type == "slug" => destination.slug.current,
-      destination.type == "reference" => destination.reference->slug.current
+      destination.type == "reference" => destination.reference->slug.current,
+      destination.type == "external" => destination.external
     )
   }
 `;
diff --git a/studio/schemas/documents/redirect.ts b/studio/schemas/documents/redirect.ts
@@ -39,7 +39,7 @@ const redirect = defineType({
     defineField({
       name: "source",
       title: "Source",
-      description: "Which url should this redirect apply for",
+      description: "The url slug to be redirected to the destination",
       type: "slug",
       validation: (rule) => slugRequired(rule),
       components: {
@@ -54,13 +54,13 @@ const redirect = defineType({
         defineField({
           name: "type",
           title: "Type",
-          description: "Choose between an internal page or a static slug",
           type: "string",
           initialValue: "reference",
           options: {
             layout: "radio",
             list: [
               { value: "reference", title: "Internal Page" },
+              { value: "external", title: "External URL" },
               { value: "slug", title: "Slug" },
             ],
           },
@@ -81,6 +81,17 @@ const redirect = defineType({
               requiredIfDestinationType("reference", document, value),
             ),
         }),
+        defineField({
+          name: "external",
+          title: "External URL",
+          description: "Where should the user be redirected?",
+          type: "url",
+          hidden: ({ parent }) => parent?.type !== "external",
+          validation: (rule) =>
+            rule.custom((value, { document }) =>
+              requiredIfDestinationType("external", document, value),
+            ),
+        }),
         defineField({
           name: "slug",
           title: "Slug",
@@ -109,22 +120,34 @@ const redirect = defineType({
   ],
   preview: {
     select: {
-      source: "source",
+      sourceSlug: "source.current",
       destinationType: "destination.type",
       destinationSlug: "destination.slug.current",
       destinationReferenceSlug: "destination.reference.slug.current",
+      destinationExternalURL: "destination.external",
     },
     prepare({
-      source,
+      sourceSlug,
       destinationType,
       destinationSlug,
       destinationReferenceSlug,
+      destinationExternalURL,
+    }: {
+      sourceSlug: string;
+      destinationType: string;
+      destinationSlug: string;
+      destinationReferenceSlug: string;
+      destinationExternalURL: string;
     }) {
-      const destination =
-        destinationType === "slug" ? destinationSlug : destinationReferenceSlug;
+      const destination = {
+        slug: `/${destinationSlug}`,
+        reference: `/${destinationReferenceSlug}`,
+        external: destinationExternalURL,
+      }[destinationType];
+      console.log(destination);
       const title =
-        source && destination
-          ? `/${source.current} → /${destination}`
+        sourceSlug && destination
+          ? `/${sourceSlug} → ${destination}`
           : undefined;
       return {
         title,