Editing.tsx

import React, { useEffect, useState } from 'react'
import 'react-datepicker/dist/react-datepicker.css'
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<string>('')
  const [header, setHeader] = useState<string>('')
  const [quote, setQuote] = useState<string>('')

  const handleSave = async () => {
    const editorService = new EditorService()
    await editorService.sendQuotation(date, header, quote)
  }

  useEffect(() => {
    const today: string = new Date().toISOString()
    const formatted: string = today.split('-').slice(0, 2).join('-')
    setDate(formatted)
  }, [])
  return (
    <>
      <div className="header">
        <p className="title">
          Édition des informations et de la citation du mois
        </p>
      </div>
      <div className="content">
        <DateSelector date={date} setDate={setDate} />
        <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',
            }}
            onEditorChange={(newQuote, editor) => setQuote(newQuote)}
          />

          <button className="button is-link" onClick={handleSave}>
            Sauvegarder
          </button>
        </div>
      </div>
    </>
  )
}

export default Editing