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'

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

  async function handleSave() {
    try {
      const response = await fetch(
        'https://localhost:1443/api/admin/monthlyNews',
        {
          method: 'POST',
          body: JSON.stringify({
            month: date.split('-')[0],
            year: date.split('-')[1],
            header: header,
            quote: quote,
          }),
        }
      )
      if (response.status !== 201) {
        throw new Error(
          `Le post n'a pas pu être créé (code ${response.status})`
        )
      }
      console.log('Le post a été créé avec succès')
    } catch (e) {
      console.log(e)
    }
  }

  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} />

        <section className="hero is-small is-info">
          <div className="hero-body">
            <p className="title">Informations du mois</p>
            <p className="subtitle"></p>
          </div>
        </section>

        <div>
          <Editor
            initialValue=""
            init={{
              menubar: false,
              toolbar:
                'undo redo | bold italic underline | alignleft aligncenter alignright | code',
            }}
            value={header}
            onEditorChange={(newHeader, editor) => setHeader(newHeader)}
          />

          <section className="hero is-small is-info">
            <div className="hero-body">
              <p className="title">Citation du mois</p>
              <p className="subtitle"></p>
            </div>
          </section>

          <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