Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useRef, useState } from 'react'
import { axios } from '../../utils'
import { useHistory, useLocation } from 'react-router-dom'
import { addNotification } from '../../redux/notification/notification.actions'
import { useDispatch, useSelector } from 'react-redux'
import { Col, Container, Row } from 'react-bootstrap'
import styled from 'styled-components'

import QuestionCard from '../../components/my-coach/QuestionCard'
import ConfirmModal from '../../components/modals/ConfirmModal'
import AnswerCard from '../../components/my-coach/AnswerCard'

const StyledSection = styled(Col)`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: auto;
`

const MyCoachViewPage = () => {
  const [question, setQuestion] = useState({})
  const [answers, setAnswers] = useState([])
  const [modalShow, setModalShow] = useState(null)
  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 deleteQuestion = (url) => {
    actionUrl.current = url
    setModalShow('delete')
  }

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

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

  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 as="section" className="companies-info">
        <div className="company-title">
          <h1 className="title mx-auto">{labels.my_coach}</h1>
        </div>
        <Row>
          <StyledSection md="8">
            <QuestionCard
              key={question.uuid}
              onEdit={editQuestion}
              onDelete={deleteQuestion}
              {...question}
            />
            {answers.map((answer) => (
              <AnswerCard key={answer.unique} {...answer} />
            ))}
          </StyledSection>
        </Row>
      </Container>
      <ConfirmModal
        show={modalShow === 'delete'}
        onClose={closeModal}
        onAccept={confirmDelete}
      />
    </>
  )
}

export default MyCoachViewPage