Editing.tsx

import React, { useState } from 'react'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import { Editor } from '@tinymce/tinymce-react'

const Editing: React.FC = () => {
  const [date, setDate] = useState<Date>(new Date())
  const [header, setHeader] = useState<string>('')
  const [quote, setQuote] = useState<string>('')
  const months = [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre',
  ]
  const locale = {
    localize: {
      month: (n: number) => months[n],
    },
    formatLong: {},
  }

  async function handleSave() {
    try {
      const response = await fetch(
        'https://localhost:1443/api/admin/monthlyNews',
        {
          method: 'POST',
          body: JSON.stringify({
            month: date.getMonth(),
            year: date.getFullYear(),
            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)
    }
  }

  return (
    <>
      <DatePicker
        selected={date}
        onChange={(date: React.SetStateAction<Date>) => setDate(date)}
        dateFormat="MM/yyyy"
        showMonthYearPicker
        showFullMonthYearPicker
        locale={locale}
      />
      <section className="hero is-link">
        <div className="hero-body">
          <p className="title">Partie Marion</p>
          <p className="subtitle">
            Édition des informations et de la citation du mois
          </p>
        </div>
      </section>

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

export default Editing