Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Grid } from '@mui/material'

import { axios } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'

import QuestionCard from '../../components/my-coach/QuestionCard'
import AnswerCard from '../../components/my-coach/AnswerCard'
import AnswerModal from '../../components/my-coach/AnswerModal'
import ConfirmModal from '../../components/modals/ConfirmModal'
import GoBackLayout from '@layouts/go-back'

const MyCoachViewPage = () => {
  const [question, setQuestion] = useState({})
  const [answers, setAnswers] = useState([])
  const [modalShow, setModalShow] = useState(null)
  const [currentAnswer, setCurrentAnswer] = useState('')
  const addUrl = useRef('')
  const actionUrl = useRef('')
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()
  const { pathname } = useLocation()
  const navigate = useNavigate()

  const getQuestion = () => {
    axios
      .get(pathname, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        addUrl.current = data.link_answers_add
        setQuestion(data)
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
  }

  const confirmDelete = () => {
    axios
      .post(actionUrl.current)
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Ha ocurrido un error, por favor intente más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        closeModal()
        dispatch(addNotification({ style: 'success', msg: data }))
        navigate('/my-coach')
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
  }

  const confirmDeleteAnswer = () => {
    axios
      .post(actionUrl.current)
      .then((response) => {
        const { data, success } = response.data

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Ha ocurrido un error, por favor intente más tarde.'

          dispatch(addNotification({ style: 'danger', msg: errorMessage }))
          return
        }

        setQuestion((prevQuestion) => ({
          ...prevQuestion,
          comments: data.total_comments,
          answers: data.total_answers,
          reactions: data.total_reactions
        }))
        closeModal()
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
  }

  const deleteQuestion = (url) => {
    actionUrl.current = url
    setModalShow('delete')
  }

  const editQuestion = (url) => {
    actionUrl.current = url
    setModalShow('edit')
  }

  const closeModal = () => {
    actionUrl.current = ''
    setModalShow(null)
    setCurrentAnswer('')
  }

  const addAnswer = () => {
    setModalShow('addAnswer')
  }

  const editAnswer = (url, text) => {
    setModalShow('editAnswer')
    actionUrl.current = url
    setCurrentAnswer(text)
  }

  const deleteAnswer = (url) => {
    setModalShow('deleteAnswer')
    actionUrl.current = url
  }

  const onAddAnswer = ({ answers, item }) => {
    setQuestion((prevQuestion) => ({ ...prevQuestion, answers }))
    setAnswers((prevAnswers) => [item, ...prevAnswers])
  }

  const onEditAnswer = ({ description }) => {
    const newAnswers = answers.map((answer) => {
      if (answer.link_edit === actionUrl.current) {
        return { ...answer, text: description }
      }

      return answer
    })

    setAnswers(newAnswers)
  }

  const updateTotalComments = (total) => {
    setQuestion({
      ...question,
      comments: total
    })
  }

  const updateTotalReactions = (total) => {
    setQuestion({
      ...question,
      reactions: total
    })
  }

  useEffect(() => {
    getQuestion()
  }, [])

  useEffect(() => {
    if (question.link_answers) {
      axios
        .get(question.link_answers)
        .then((response) => {
          const { data, success } = response.data

          if (!success) {
            const errorMessage =
              typeof data === 'string'
                ? data
                : 'Error interno. Por favor, inténtelo de nuevo más tarde.'

            dispatch(addNotification({ style: 'danger', msg: errorMessage }))
            return
          }

          setAnswers(data.items)
        })
        .catch((error) => {
          dispatch(addNotification({ style: 'danger', msg: error.message }))
        })
    }
  }, [question])

  return (
    <GoBackLayout title={labels.my_coach}>
      <Grid container>
        <Grid
          item
          xs={12}
          md={8}
          mx='auto'
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 1
          }}
        >
          <QuestionCard
            key={question.uuid}
            onEdit={editQuestion}
            onDelete={deleteQuestion}
            onReply={addAnswer}
            {...question}
          />

          {answers.map((answer) => (
            <AnswerCard
              key={answer.unique}
              {...answer}
              onEdit={editAnswer}
              onDelete={deleteAnswer}
              updateComments={updateTotalComments}
              updateReactions={updateTotalReactions}
            />
          ))}
        </Grid>
      </Grid>

      <AnswerModal
        url={currentAnswer ? actionUrl.current : addUrl.current}
        show={['addAnswer', 'editAnswer'].includes(modalShow)}
        currentAnswer={currentAnswer}
        onClose={closeModal}
        onComplete={currentAnswer ? onEditAnswer : onAddAnswer}
      />
      <ConfirmModal
        show={modalShow === 'deleteAnswer'}
        onClose={closeModal}
        onAccept={confirmDeleteAnswer}
      />
      <ConfirmModal
        show={modalShow === 'delete'}
        onClose={closeModal}
        onAccept={confirmDelete}
      />
    </GoBackLayout>
  )
}

export default MyCoachViewPage