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 QuestionCard from '../../components/my-coach/QuestionCard'
import ConfirmModal from '../../components/modals/ConfirmModal'

const MyCoachViewPage = () => {
  const [question, setQuestion] = 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.goBack()
      })
      .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()
  }, [])

  return (
    <>
      <Container as="section" className="companies-info">
        <div className="company-title">
          <h1 className="title mx-auto">{labels.my_coach}</h1>
        </div>
        <Row>
          <Col md="8" className="mx-auto">
            <QuestionCard
              key={question.uuid}
              onEdit={editQuestion}
              onDelete={deleteQuestion}
              {...question}
            />
          </Col>
        </Row>
      </Container>
      <ConfirmModal
        show={modalShow === 'delete'}
        onClose={closeModal}
        onAccept={confirmDelete}
      />
    </>
  )
}

export default MyCoachViewPage