Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useRef, useState } from 'react'

import { useHistory, useLocation } from 'react-router-dom'

import { useDispatch, useSelector } from 'react-redux'

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 TitleSection from '../../components/UI/TitleSection'

import { Container, Grid } from '@mui/material'

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 history = useHistory()

  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 interno. Por favor, inténtelo de nuevo más tarde.'

          })

        )

        throw new Error(error)

      })

  }

  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 }))

        history.replace('/my-coach')

      })

      .catch((error) => {

        dispatch(

          addNotification({

            style: 'danger',

            msg: 'Ha ocurrido un error, por favor intente más tarde.'

          })

        )

        throw new Error(error)

      })

  }

  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: 'Ha ocurrido un error, por favor intente más tarde.'

          })

        )

        throw new Error(error)

      })

  }

  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 interno. Por favor, inténtelo de nuevo más tarde.'

            })

          )

          throw new Error(error)

        })

    }

  }, [question])

  return (

    <>

      <Container sx={{ px: 0 }}>

        <TitleSection title={labels.my_coach} />

        <Grid container mt={1}>

          <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>

      </Container>

      <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}

      />

    </>

  )

}

export default MyCoachViewPage