fix: jokes tutorial actions should return 400 status for errors

[Graham42]

Why make this change?

When a request is sent to the server and there's something invalid about
the request, the server should return a 4xx status to accurately
represent the response.

We could have all the error cases use the json function directly, but
then we loose the advantage of the helpful typechecking ActionData
provides.

export const action: ActionFunction = async ({ request }) => {
  //...
  return json({ wrongActionDataErrorKey: "oops!" }, { status: 400 }));

For this reason, I've introduced the badRequest helper function so
that we can still get typechecking for ActionFunction returns, while
returning the accurate status in the Response.

const badRequest = (data: ActionData) => json(data, { status: 400 });

export const action: ActionFunction = async ({ request }) => {
  //...
  // and then TypeScript will alert us
  return badRequest({ wrongActionDataErrorKey: "oops!" });
  //                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400

Notes for the reviewer

I'm pretty sure I've updated all the line highlights correctly, but if you have any way of rendering a preview of the docs, that would help to increase confidence.

Thanks for your time reviewing this! 🙏

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[kentcdodds]

Super 👍 Thank you for this improvement 👏