Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

import { Col, Container, Row } from 'react-bootstrap'

import { axios, debounce, jsonToParams } from '../../utils'

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

import styled from 'styled-components'

import SearchInput from '../../components/UI/SearchInput'

import EmptySection from '../../components/UI/EmptySection'

import WidgetLayout from '../../components/widgets/WidgetLayout'

import PaginationComponent from '../../components/UI/PaginationComponent'

import ConfirmModal from '../../components/modals/ConfirmModal'

import QuestionCard from '../../components/my-coach/QuestionCard'

import QuestionModal from '../../components/my-coach/QuestionModal'

const CoachCategories = styled(WidgetLayout)`

  padding: 1rem;

  ul {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    li,

    label {

      cursor: pointer;

    }

    .selected label {

      font-weight: 600;

    }

  }

`

const QuestionsGrid = styled.div`

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 1rem;

`

const KnowledgeSearch = styled(SearchInput)`

  background-color: var(--bg-color);

`

const MyCoachPage = () => {

  const [questions, setQuestions] = useState([])

  const [questionsCategories, setQuestionsCategories] = useState([])

  const [search, setSearch] = useState('')

  const [category, setCategory] = useState('')

  const [currentPage, setCurrentPage] = useState(1)

  const [totalPages, setTotalPages] = useState(1)

  const [modalShow, setModalShow] = useState(null)

  const addUrl = useRef('/my-coach/questions/add')

  const actionUrl = useRef('')

  const labels = useSelector(({ intl }) => intl.labels)

  const dispatch = useDispatch()

  const getCategories = () => {

    axios

      .get('/my-coach', {

        headers: {

          'Content-Type': 'application/json',

        },

      })

      .then((response) => {

        const { data, success } = response.data

        if (!success) {

          const errorMessage =

            typeof data === 'string' ? data : labels.error_there_was_an_error

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

          return

        }

        const categories = Object.entries(data.categories).map((values) => ({

          name: values[1],

          uuid: values[0],

        }))

        setQuestionsCategories(categories)

      })

      .catch((error) => {

        dispatch(

          addNotification({

            style: 'danger',

            msg: labels.error_there_was_an_error,

          })

        )

        throw new Error(error)

      })

  }

  const getQuestions = (search = '', page = 1, category_id = '') => {

    const urlParams = { search, page, category_id }

    axios

      .get(`/my-coach/questions?${jsonToParams(urlParams)}`, {

        headers: {

          'Content-Type': 'application/json',

        },

      })

      .then((response) => {

        const { data, success } = response.data

        if (!success) {

          const errorMessage =

            typeof data === 'string' ? data : labels.error_there_was_an_error

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

          return

        }

        setQuestions(data.items)

        setCurrentPage(data.page)

        setTotalPages(data.total_pages)

      })

      .catch((error) => {

        dispatch(

          addNotification({

            style: 'danger',

            msg: labels.error_there_was_an_error,

          })

        )

        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

        }

        dispatch(addNotification({ style: 'success', msg: data }))

        getQuestions(search, currentPage, category)

        closeModal()

      })

      .catch((error) => {

        dispatch(

          addNotification({

            style: 'danger',

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

          })

        )

        throw new Error(error)

      })

  }

  const addQuestion = (url) => {

    actionUrl.current = url

    setModalShow('add')

  }

  const editQuestion = (url) => {

    actionUrl.current = url

    setModalShow('edit')

  }

  const deleteQuestion = (url) => {

    actionUrl.current = url

    setModalShow('delete')

  }

  const closeModal = () => {

    actionUrl.current = ''

    setModalShow(null)

  }

  const handleInputChange = debounce((e) => setSearch(e.target.value), 500)

  useEffect(() => {

    getCategories()

  }, [])

  useEffect(() => {

    getQuestions(search, currentPage, category)

  }, [search, currentPage, category])

  return (

    <>

      <Container as="section" className="companies-info">

        <div className="company-title">

          <h1 className="title mx-auto">{labels.my_coach}</h1>

          <h2

            className="title cursor-pointer"

            onClick={() => addQuestion(addUrl.current)}

          >

            {labels.my_coach_question_add}

          </h2>

        </div>

        <Row className="gap-3">

          <Col md="3">

            <CoachCategories>

              <ul>

                <li className={!category && 'selected'}>

                  <input

                    type="radio"

                    id="category-all"

                    value=""

                    name="category"

                    onChange={(e) => setCategory(e.target.value)}

                    hidden

                  />

                  <label htmlFor="category-all">

                    {labels.knowledge_area_category_all}

                  </label>

                </li>

                {questionsCategories.map(({ uuid, name }) => (

                  <li className={category === uuid && 'selected'} key={uuid}>

                    <input

                      type="radio"

                      id={`category-${name}`}

                      name="category"

                      value={uuid}

                      onChange={(e) => setCategory(e.target.value)}

                      hidden

                    />

                    <label htmlFor={`category-${name}`}>{name}</label>

                  </li>

                ))}

              </ul>

            </CoachCategories>

          </Col>

          <Col className="px-md-0">

            <KnowledgeSearch

              onChange={handleInputChange}

              placeholder={labels.search}

            />

            <QuestionsGrid className="mt-3">

              {questions.length ? (

                questions.map((question) => (

                  <QuestionCard

                    key={question.uuid}

                    onEdit={editQuestion}

                    onDelete={deleteQuestion}

                    {...question}

                  />

                ))

              ) : (

                <EmptySection

                  message={labels.error_no_record_matched_your_query}

                />

              )}

            </QuestionsGrid>

            <PaginationComponent

              onChangePage={(newPage) => setCurrentPage(newPage)}

              currentActivePage={currentPage}

              pages={totalPages}

              isRow

            />

          </Col>

        </Row>

      </Container>

      <QuestionModal

        show={['add', 'edit'].includes(modalShow)}

        onClose={closeModal}

        onComplete={getQuestions}

        url={actionUrl.current}

        isEdit={modalShow === 'edit'}

      />

      <ConfirmModal

        show={modalShow === 'delete'}

        onClose={closeModal}

        onAccept={confirmDelete}

      />

    </>

  )

}

export default MyCoachPage