should i just send it as a``` return res

[rare bronze]

no just do it normally like res.json({ id: transactionId })

and use 2xx status codes for this

your api route is not actually redirecting anything so don't use 3xx

[upbeat crystal]

alr

so i do the json and then i statuys code?

[rare bronze]

no you don't need to worry about status codes here

[upbeat crystal]

just res.json?

[rare bronze]

router.push is a client-side redirection

so no need to worry about status codes

just use 2xx codes, like 200, or nothing at all (implicit 200)

[upbeat crystal]

return res.json({ id: transactionID })

so that defaults to 200 code right

alr imma first log the res to see if the id came through

damn i dont see the id anywhere
do i log response.body

[rare bronze]

const res = await fetch();
const json = await res.json();
console.log(json);

[upbeat crystal]

        const response = await fetch(endpoint, options);
        const formError = await response.json().then(res => res.error).catch(err => console.error(err));
        console.log(response.json())
        const code = response.status;```

only when i log the .json

[rare bronze]

you can only call .json once

[upbeat crystal]

shoot ok
so i need to get the id and the error i send

[rare bronze]

the error should be in the json as well

so just do this

const res = await fetch();
const json = await res.json();
console.log(json);

and handle error toast logic with the json object

[upbeat crystal]

alr it worked

lemme try the redirect

where should i declare this?

const router = useRouter()```

cause rn im using the hook wrong

[rare bronze]

function MyClientComponent() {
  const router = useRouter();
  ...
}

[upbeat crystal]

export default function Form() {
  const formSubmit = async (event) => {
    const router = useRouter();
    event.preventDefault();
//...```

ok so now it "redirected"

but the url is
http://localhost:3000/app?senderFullName=John+Smith&senderUsername=Jsmith72&senderEmail=johnsmith72%40gmail.com&senderPhoneNumber=5195195199&senderAmount=22&bridgeMethod=Paypal+to+Venmo&recipientFullName=Ben+Evans&recipientUsername=Bene22&recipientEmail=benevans22%40gmail.com&recipientPhoneNumber=2262262266&agreeBox=on

[rare bronze]

no incorrect. Move const router = useRouter() outside

[upbeat crystal]

but then it says not inside of next app

[rare bronze]

import { useRouter } from "next/navigation"

not from next/router

[upbeat crystal]

💀

mb

wait is it cuase of app dir

alr it worked, but it showed the toast and then redirected

[rare bronze]

well that depends on how you set up your toast

you can also try calling showToast after router.push

[upbeat crystal]

i did

same thing still

using this

https://www.npmjs.com/package/react-toastify

[upbeat crystal]

sorry to bother, but any idea how to show the toasrt after redirect?>

[rare bronze]

Set your toasters up properly

Then it will work

[upbeat crystal]

wdym
like the containers?

[rare bronze]

What containers? Just follow their guide and set the toasts up

[upbeat crystal]

ye but then everything needs to be clinet side right

if i do
<ToastContainer/>

inside of my root

[rare bronze]

Yes

[upbeat crystal]

so every comp is then client side

[rare bronze]

No

You can use a client component inside a server component

[upbeat crystal]

so do i put this on my highets page.jsx

[rare bronze]

https://beta.nextjs.org/docs/rendering/server-and-client-components#third-party-packages

[rare bronze]

No, in your root layout

[upbeat crystal]

ok

ok so now in the root everything works with toast container
but when i submit form, it redirects but no toast shows up

[rare bronze]

call showtoast in the event handler

before redirecting

[upbeat crystal]

i dont have show toast tho

[rare bronze]

call whatever you need to show the toast

[upbeat crystal]

Ok so call it before the redirect

Alr will try