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'
import Loader from '../Loader/Loader'
import Modal from '../Modal/Modal'

export type ContentItems = 'poll' | 'monthlyNews' | ''

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 [refreshData, setRefreshData] = useState(false)
  const [isLoading, setisLoading] = useState<boolean>(false)
  const [warningModal, setwarningModal] = useState<boolean>(false)
  const [toDelete, settoDelete] = useState<ContentItems>('')
  const { user }: Partial<UserContextProps> = useContext(UserContext)
  const monthlyNewsService = new MonthlyNewsService()

  const handleSaveMonthlyNews = async (): Promise<void> => {
    if (user) {
      const monthlyNewsService = new MonthlyNewsService()
      await monthlyNewsService.createMonthlyReport(
        date,
        header,
        quote,
        user.xsrftoken
      )
      setIsTouched(false)
    }
  }
  const handleSavePoll = async (): Promise<void> => {
    if (user) {
      await monthlyNewsService.createPoll(date, question, link, user.xsrftoken)
      setIsTouched(false)
    }
  }
  const handleCancel = useCallback(() => {
    setRefreshData(true)
  }, [])

  const handleDeleteMonthlyNews = async (): Promise<void> => {
    if (user) {
      await monthlyNewsService.deleteMonthlyNews(
        date.getFullYear(),
        date.getMonth(),
        user.xsrftoken
      )
      setRefreshData(true)
    }
  }
  const handleDeletePoll = async (): Promise<void> => {
    if (user) {
      await monthlyNewsService.deletePoll(
        date.getFullYear(),
        date.getMonth(),
        user.xsrftoken
      )
      setRefreshData(true)
    }
  }
  const handleOpenDeleteModal = (target: ContentItems) => {
    settoDelete(target)
    setwarningModal(true)
  }
  const handleConfirmAlert = () => {
    if (toDelete === 'monthlyNews') {
      handleDeleteMonthlyNews()
    }
    if (toDelete === 'poll') {
      handleDeletePoll()
    }
    setwarningModal(false)
  }

  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()
    setisLoading(true)
    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)
        }
        if (poll) {
          setLink(poll.link)
          setQuestion(poll.question)
          setIsTouched(false)
        }
      }

      setisLoading(false)
    }
    if (subscribed) {
      getCurrentMonthlyNews()
    }
    return () => {
      subscribed = false
      setRefreshData(false)
    }
  }, [date, user, refreshData])

  return (
    <>
      <div className="header">
        <p className="title pagetitle">
          Édition des informations et de la citation du mois
        </p>
        <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
      </div>
      {isLoading ? (
        <Loader />
      ) : (
        <div className="content">
          <MonthlyNews
            header={header}
            quote={quote}
            onSave={handleSaveMonthlyNews}
            onCancel={handleCancel}
            handleChange={handleEditorChange}
            onDelete={handleOpenDeleteModal}
          />
          <hr />
          <Poll
            question={question}
            link={link}
            handleChange={handleEditorChange}
            onSave={handleSavePoll}
            onCancel={handleCancel}
            onDelete={handleOpenDeleteModal}
          />
        </div>
      )}
      {warningModal && (
        <Modal>
          <>
            <div className="modal-text">
              Etes-vous sûr de vouloir supprimer{' '}
              {toDelete === 'poll' ? 'ce sondage' : 'cette news mensuelle'} ?
            </div>
            <div className="buttons">
              <button
                className="btnCancel"
                onClick={() => setwarningModal(false)}
              >
                Annuler
              </button>
              <button className="btnValid" onClick={handleConfirmAlert}>
                Continuer
              </button>
            </div>
          </>
        </Modal>
      )}
    </>
  )
}

export default Editing