From 79bb79d9644851009c2c9700f7c42b26649f5fbd Mon Sep 17 00:00:00 2001
From: awkweb <tom@meagher.co>
Date: Sat, 2 Mar 2024 19:20:01 -0500
Subject: [PATCH] fix: Button.Redirect (#49)

---
 .changeset/hip-penguins-work.md |  5 +++++
 playground/src/index.tsx        | 17 +++++++++++++++++
 src/components/Button.tsx       |  5 ++---
 src/dev/components/Tabs.tsx     |  6 +++++-
 src/frog-base.tsx               | 12 +++++++-----
 5 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/hip-penguins-work.md

diff --git a/.changeset/hip-penguins-work.md b/.changeset/hip-penguins-work.md
new file mode 100644
index 00000000..a9f74665
--- /dev/null
+++ b/.changeset/hip-penguins-work.md
@@ -0,0 +1,5 @@
+---
+"frog": patch
+---
+
+Fixed Button.Redirect behavior
diff --git a/playground/src/index.tsx b/playground/src/index.tsx
index 9dab63bb..2acea83f 100644
--- a/playground/src/index.tsx
+++ b/playground/src/index.tsx
@@ -207,5 +207,22 @@ app.frame('/image-only', (c) => {
   })
 })
 
+app.frame('/redirect-buttons', (c) => {
+  return c.res({
+    image: <div tw="flex">foo</div>,
+    intents: [
+      <Button.Redirect location={`https://example.com/${c.frameData?.fid}`}>
+        FID
+      </Button.Redirect>,
+      <Button.Redirect
+        location={`https://example.com/${c.frameData?.castId?.fid}`}
+      >
+        Cast ID
+      </Button.Redirect>,
+      <Button.Reset>Reset</Button.Reset>,
+    ],
+  })
+})
+
 app.route('/todos', todoApp)
 app.route('/routing', routingApp)
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index d541d188..a8280147 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -96,9 +96,8 @@ export function ButtonRedirect({
       property={`fc:frame:button:${index}:action`}
       content="post_redirect"
     />,
-    location && (
-      <meta property={`fc:frame:button:${index}:target`} content={location} />
-    ),
+    // TODO: Add `target` prop so folks can `'post_redirect'` to a different frame
+    // <meta property={`fc:frame:button:${index}:target`} content={target} />,
   ] as unknown as HtmlEscapedString
 }
 
diff --git a/src/dev/components/Tabs.tsx b/src/dev/components/Tabs.tsx
index cf6db571..7b8c8374 100644
--- a/src/dev/components/Tabs.tsx
+++ b/src/dev/components/Tabs.tsx
@@ -274,7 +274,11 @@ export function Tabs() {
 
           <div class={rowClass} x-cloak x-show="data.response.location">
             <div class={labelClass}>Location</div>
-            <div class={valueClass} x-text="data.response.location" />
+            <div
+              class={valueClass}
+              x-text="data.response.location"
+              {...{ ':title': 'data.response.location' }}
+            />
           </div>
 
           <div class={rowClass} x-cloak x-show="data.response.error">
diff --git a/src/frog-base.tsx b/src/frog-base.tsx
index c8d2b249..ebc0d7e7 100644
--- a/src/frog-base.tsx
+++ b/src/frog-base.tsx
@@ -238,11 +238,6 @@ export class FrogBase<
         req: c.req,
       })
 
-      if (context.status === 'redirect') {
-        const location = context.buttonValue
-        if (!location) throw new Error('location required to redirect')
-        return c.redirect(location, 302)
-      }
       if (context.url !== parsePath(c.req.url)) return c.redirect(context.url)
 
       const {
@@ -256,6 +251,13 @@ export class FrogBase<
       } = await handler(context)
       const buttonValues = getButtonValues(parseIntents(intents))
 
+      if (context.status === 'redirect' && context.buttonIndex) {
+        const buttonValue = buttonValues[context.buttonIndex - 1]
+        const location = buttonValue?.replace(/^_r:/, '')
+        if (!location) throw new Error('location required to redirect')
+        return c.redirect(location, 302)
+      }
+
       // If the user is coming from a browser, and a `browserLocation` is set,
       // then we will redirect the user to that location.
       const browser = detect(c.req.header('user-agent'))