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, UserContextProps } from '../../hooks/userContext'
import { MonthlyNews } from '../../models/monthlyNews.model'
import Poll from '../Poll/Poll'

const Editing: React.FC = () => {
  const [date, setDate] = useState<Date>(new Date())
  const [header, setHeader] = useState<string>('')
  const [quote, setQuote] = useState<string>('')
  const [isTouched, setIsTouched] = useState<boolean>(false)
  const { user }: Partial<UserContextProps> = useContext(UserContext)

  const handleSave = async (): Promise<void> => {
    if (user) {
      const monthlyNewsService = new MonthlyNewsService()
      await monthlyNewsService.createMonthlyReport(
        date,
        header,
        quote,
        user.xsrftoken
      )
    }
  }
  const handleCancel = useCallback(() => {
    setQuote('')
    setHeader('')
  }, [])

  const isEmpty = (): boolean => {
    if ((quote !== '' || header !== '') && isTouched) {
      return false
    } else return true
  }

  const handleEditorChange = (
    value: string,
    type: 'header' | 'quote'
  ): void => {
    setIsTouched(true)
    if (type === 'header') {
      setHeader(value)
    } else {
      setQuote(value)
    }
  }

  useEffect(() => {
    let subscribed = true
    async function getCurrentMonthlyNews() {
      if (user) {
        const monthlyNewsService = new MonthlyNewsService()
        const news: MonthlyNews =
          await monthlyNewsService.getSingleMonthlyReport(
            date.getFullYear(),
            date.getMonth(),
            user.xsrftoken
          )
        if (news) {
          setHeader(news.header)
          setQuote(news.quote)
          setIsTouched(false)
        }
      }
    }
    if (subscribed) {
      getCurrentMonthlyNews()
    }
    return () => {
      subscribed = false
    }
  }, [date, user])

  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={header}
            init={{
              menubar: false,
              toolbar:
                'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
            }}
            value={header}
            onEditorChange={(newHeader, editor) =>
              handleEditorChange(newHeader, 'header')
            }
          />
          <div className="subtitle">
            <p className="title">Citation du mois</p>
          </div>

          <Editor
            initialValue={quote}
            init={{
              menubar: false,
              toolbar:
                'undo redo | bold italic underline | alignleft aligncenter alignright | code | ecolyoLink',
              setup: function (editor) {
                editor.ui.registry.addMenuButton('ecolyoLink', {
                  text: 'Lien Ecolyo',
                  fetch: function (callback) {
                    var items: any = [
                      {
                        type: 'menuitem',
                        text: 'consumption',
                        onAction: function () {
                          editor.insertContent(
                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/consumption">Page de consommation</a>'
                          )
                        },
                      },
                      {
                        type: 'menuitem',
                        text: 'challenges',
                        onAction: function () {
                          editor.insertContent(
                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/challenges">Page challenges</a>'
                          )
                        },
                      },
                      {
                        type: 'menuitem',
                        text: 'ecogestures',
                        onAction: function () {
                          editor.insertContent(
                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/ecogestures">Page ecogestures</a>'
                          )
                        },
                      },
                      {
                        type: 'menuitem',
                        text: 'analysis',
                        onAction: function () {
                          editor.insertContent(
                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/analysis">Page analyse</a>'
                          )
                        },
                      },
                      {
                        type: 'menuitem',
                        text: 'options',
                        onAction: function () {
                          editor.insertContent(
                            '&nbsp;<a href="https://ecolyo.{cozyUrl}/options">Page options</a>'
                          )
                        },
                      },
                    ]
                    callback(items)
                  },
                })
              },
            }}
            value={quote}
            onEditorChange={(newQuote, editor) =>
              handleEditorChange(newQuote, 'quote')
            }
          />
          <button className="btnCancel" onClick={handleCancel}>
            Annuler
          </button>
          <button className="btnValid" onClick={handleSave}>
            Sauvegarder
          </button>
        </div>
        <Poll />
      </div>
    </>
  )
}

export default Editing