Editing.tsx

import React, { useCallback, useContext, useEffect, useState } from 'react'
import DateSelector from '../DateSelector/DateSelector'
import './editing.scss'
import { MonthlyNewsService } from '../../services/monthlyNews.service'
import { UserContext, UserContextProps } from '../../hooks/userContext'
import { IMonthlyNews } from '../../models/monthlyNews.model'
import Poll from '../Poll/Poll'
import MonthlyNews from '../MonthlyNews/MonthlyNews'
import { IPoll } from '../../models/poll.model'

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

  const handleSaveMonthlyNews = async (): Promise<void> => {
    if (user) {
      const monthlyNewsService = new MonthlyNewsService()
      await monthlyNewsService.createMonthlyReport(
        date,
        header,
        quote,
        user.xsrftoken
      )
      console.log('saved')
      setIsTouched(false)
    }
  }
  const handleSavePoll = async (): Promise<void> => {
    if (user) {
      const monthlyNewsService = new MonthlyNewsService()
      await monthlyNewsService.createPoll(date, question, link, user.xsrftoken)
      console.log('saved')
      setIsTouched(false)
    }
  }
  const handleCancelMonthlyNews = useCallback(() => {
    setQuote('')
    setHeader('')
  }, [])

  const handleCancelPoll = useCallback(() => {
    setLink('')
    setQuestion('')
  }, [])

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

  const handleEditorChange = (
    value: string,
    type: 'header' | 'quote' | 'question' | 'link'
  ): void => {
    setIsTouched(true)
    if (type === 'header') {
      setHeader(value)
    }
    if (type === 'quote') {
      setQuote(value)
    }
    if (type === 'question') {
      setQuestion(value)
    }
    if (type === 'link') {
      setLink(value)
    }
  }
  const resetFields = useCallback(() => {
    setQuote('')
    setHeader('')
    setLink('')
    setQuestion('')
  }, [])

  useEffect(() => {
    let subscribed = true
    resetFields()
    async function getCurrentMonthlyNews() {
      if (user) {
        const monthlyNewsService = new MonthlyNewsService()
        const montlhyNews: IMonthlyNews | null =
          await monthlyNewsService.getSingleMonthlyReport(
            date.getFullYear(),
            date.getMonth(),
            user.xsrftoken
          )
        const poll: IPoll | null = await monthlyNewsService.getSinglePoll(
          date.getFullYear(),
          date.getMonth(),
          user.xsrftoken
        )
        if (montlhyNews) {
          setHeader(montlhyNews.header)
          setQuote(montlhyNews.quote)
          setIsTouched(false)
          setisMontlyNewsUpdating(true)
        }
        if (poll) {
          setLink(poll.link)
          setQuestion(poll.question)
          setIsTouched(false)
          setisPollUpdating(true)
        }
      }
    }
    if (subscribed) {
      getCurrentMonthlyNews()
      console.log('updating?', isMontlyNewsUpdating)
    }
    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} />
        <MonthlyNews
          header={header}
          quote={quote}
          onSave={handleSaveMonthlyNews}
          onCancel={handleCancelMonthlyNews}
          handleChange={handleEditorChange}
        />
        <hr />
        <Poll
          question={question}
          link={link}
          handleChange={handleEditorChange}
          onSave={handleSavePoll}
          onCancel={handleCancelPoll}
        />
      </div>
    </>
  )
}

export default Editing