Created from Remix Form!

gist.new.tsx

import React from "react"
import { redirect } from "remix"
import type { ActionFunction } from "remix"

export const action: ActionFunction = async ({ request }) => {
  const token = "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"
  const body = new URLSearchParams(await request.text())

  const fileName = body.get("fileName") as string
  const content = body.get("content")

  await fetch("https://api.github.com/gists", {
    method: "post",
    body: JSON.stringify({
      description: "Created from Remix Form!",
      public: true,
      files: {[fileName]: {content}},
    }),
    headers: {
      "Content-Type": "application/json",
      "Authorization": `token ${token}`
    }
  })

  return redirect("/gists")
}


export default function NewGist() {
  return (
    <React.Fragment>
      <h2>New Gist!</h2>
      <form method="post">
        <p>
          <label>
            Gist file name:
            <br />
            <input required type="text" name="fileName" />
          </label>
        </p>
        <p>
          <label>
            Content:
            <br />
            <textarea required rows={10} name="content" />
          </label>
        </p>
        <p>
          <button type="submit">Create Gist</button>
        </p>
      </form>
    </React.Fragment>
  )
}