fix: Button.Redirect (#49)

.changeset/hip-penguins-work.md

@@ -0,0 +1,5 @@
+---
+"frog": patch
+---
+
+Fixed Button.Redirect behavior

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)

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
 }
 

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">

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'))