Editing.tsx

import React, { useCallback, useState } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import DateSelector from '../DateSelector/DateSelector'
import './editing.scss'
import { EditorService } from '../../services/editor.service'

const Editing: React.FC = () => {
  const [date, setDate] = useState<Date>(new Date())
  const [header, setHeader] = useState<string>('')
  const [quote, setQuote] = useState<string>('')

  const handleSave = async () => {
    const editorService = new EditorService()
    await editorService.sendQuotation(date, header, quote)
  }
  const handleCancel = useCallback(() => {
    setQuote('')
    setHeader('')
  }, [])
  const isEmpty = (): boolean => {
    if (quote !== '' || header !== '') {
      return false
    } else return true
  }

  return (
    <>
      <div className="header">
        <p className="title pagetitle">
          Édition des informations et de la citation du mois
        </p>
      </div>
      <div className="content">
        <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
        <div className="subtitle">
          <p className="title">Informations du mois</p>
        </div>
        <div>
          <Editor
            initialValue=""
            init={{
              menubar: false,
              toolbar:
                'undo redo | bold italic underline | alignleft aligncenter alignright | code',
            }}
            value={header}
            onEditorChange={(newHeader, editor) => setHeader(newHeader)}
          />
          <div className="subtitle">
            <p className="title">Citation du mois</p>
          </div>

          <Editor
            initialValue=""
            init={{
              menubar: false,
              toolbar:
                'undo redo | bold italic underline | alignleft aligncenter alignright | code',
            }}
            value={quote}
            onEditorChange={(newQuote, editor) => setQuote(newQuote)}
          />
          <button className="btnCancel" onClick={handleCancel}>
            Annuler
          </button>
          <button className="btnValid" onClick={handleSave}>
            Sauvegarder
          </button>
        </div>
      </div>
    </>
  )
}

export default Editing