Untitled

import React from "react";
import { useEffect, useState } from "react"
import { Editor } from 'primereact/editor';
import { Button } from 'primereact/button';
import { FloatLabel } from "primereact/floatlabel";
import { ProgressSpinner } from 'primereact/progressspinner';
import { InputText } from 'primereact/inputtext'
import Navbar from "../components/Navbar"
import tokenAxios from "../api/tokenAxios";
import { useNavigate } from "react-router";

const NewStory = () => {
  const navigate = useNavigate()
  const [title, setTitle] = useState('')
  const [storyContent, setStoryContent ] = useState('')
  const [infoMessage, setInfoMessage] = useState('')
  const [saving, setSaving] = useState(false)

  const header = (
    <span className="ql-formats">
        <button className="ql-bold" aria-label="Bold"></button>
        <button className="ql-italic" aria-label="Italic"></button>
        <button className="ql-underline" aria-label="Underline"></button>
    </span>
  )

  const saveSotry = async () => {
    if (title === '' || storyContent === '')
    {
      setInfoMessage("Title or Content is empty")
      return 
    }
    try{
      setSaving(true)
      const response = await tokenAxios.post('story/', {'title': title, 'content': storyContent})
      if (response.status === 201){
        setSaving(false)
        alert("Your story has been saved to Draft in your dashboard.")
        navigate('/dashboard')
      }
    }catch (error) {
      console.error(error);
      setSaving(false)
      alert("Somthing went wrong. Try again.")
    }
  }

  return (
    <div>
      <Navbar />
      <div className="mbl2 mil2">
        <p>Write your story.</p>
        <div>
          {infoMessage && <p className="mbl1-5">{infoMessage}</p>}
        </div>
        <FloatLabel className="mt2">
          <InputText className="full-width"  type="text"
            id="title" 
            value={title} 
            onChange={(e) => {setTitle(e.target.value)}} />
          <label htmlFor="title">Title</label>
        </FloatLabel>
        <Editor  className="mt2" style={{ height: '300px' }} value={storyContent} onTextChange={(e) => setStoryContent(e.htmlValue)} headerTemplate={header}/>
        <div className="flex flex-end align-items-center">
          {saving ? 
            <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" />
             :
            <Button className="mt2" onClick = {saveSotry} label='Save' size="small"/>
          }
        </div>
      </div>
    </div>
  )
}

export default NewStory