Editing.tsx

import React, { useCallback, useContext, useEffect, useState } from 'react'
import { Editor } from '@tinymce/tinymce-react'
import DateSelector from '../DateSelector/DateSelector'
import './editing.scss'
import { MonthlyNewsService } from '../../services/monthlyNews.service'
import { UserContext } from '../../hooks/userContext'
import { MonthlyNews } from '../../models/monthlyNews.model'

const Editing: React.FC = () => {
  const [date, setDate] = useState<Date>(new Date())
  const [header, setHeader] = useState<string>('')
  const [quote, setQuote] = useState<string>('')
  const { user }: any = useContext(UserContext)
  const handleSave = async () => {
    const monthlyNewsService = new MonthlyNewsService()
    await monthlyNewsService.createMonthlyReport(
      date,
      header,
      quote,
      user.xsrftoken
    )
  }
  const handleCancel = useCallback(() => {
    setQuote('')
    setHeader('')
  }, [])
  const isEmpty = (): boolean => {
    if (quote !== '' || header !== '') {
      return false
    } else return true
  }
  useEffect(() => {
    async function getCurrentMonthlyNews() {
      const monthlyNewsService = new MonthlyNewsService()
      const news: MonthlyNews = await monthlyNewsService.getSingleMonthlyReport(
        date.getFullYear(),
        date.getMonth(),
        user.xsrftoken
      )
      console.log('news', news)
      if (news) {
        setHeader(news.header)
        setQuote(news.quote)
      }
    }
    getCurrentMonthlyNews()
  }, [date])

  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