bitlyApicall.tsx

import { useState } from 'react'
import './App.css'

export default function App() {
  const [url, setUrl] = useState("")
  const [shurl, setShUrl] = useState("")

  // https://api-ssl.bitly.com/v4/shorten


  const postUrl = () => {
    fetch("https://api-ssl.bitly.com/v4/shorten", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
        "Authorization": 'Bearer ' + import.meta.env.VITE_BITLY
      }, body: JSON.stringify({ long_url: url })
    }).then(res => res.json()).then(data => {
      console.log(data)
      setShUrl(data.link)
    })
  }

  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    console.log("called")
    postUrl()


  }
  return (
    <main>
      SHort URL:{shurl} <br />
      Input Url: <input type="text" value={url} onChange={(e) => setUrl(e.target.value)} /> <br />

      <button onClick={(e) => handleSubmit(e)}>Generate Short URL</button>

    </main>
  )
}