Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Box, Grid, MenuItem, Select, styled } from '@mui/material'
import { Search } from '@mui/icons-material'

import { useFetch, useSearchQuery } from '@hooks'
import { axios, debounce } from '@utils'
import { addNotification } from '@store/notification/notification.actions'

import TitleSection from '@components/UI/TitleSection'
import SideMenu from '@components/UI/sidemenu/SideMenu'
import Input from '@components/UI/inputs/Input'
import QuestionCard from '@components/my-coach/QuestionCard'
import EmptySection from '@components/UI/EmptySection'
import QuestionModal from '@components/my-coach/QuestionModal'
import ConfirmModal from '@components/modals/ConfirmModal'
import Pagination from '@components/common/Pagination'

const QuestionsGrid = styled(Box)`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
`

const MyCoachPage = () => {
  const [modalShow, setModalShow] = useState(null)
  const actionUrl = useRef('')
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const { getStringParams, getParam, setParam } = useSearchQuery()
  const { data: categoriesData } = useFetch(`/my-coach`)
  const { data, refetch } = useFetch('/my-coach/questions' + getStringParams())

  const categories = useMemo(() => {
    const defaultCategories = [{ name: 'Todas', value: '' }]

    if (!categoriesData.categories) return defaultCategories

    const results = Object.entries(categoriesData.categories).map(
      ([uuid, name]) => ({
        name,
        value: uuid
      })
    )

    return defaultCategories.concat(results)
  }, [categoriesData])

  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 }))
        refetch()
        closeModal()
      })
      .catch((error) => {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      })
  }

  const addQuestion = () => {
    actionUrl.current = '/my-coach/questions/add'
    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((value) => setParam('search', value), 500)

  return (
    <>
      <TitleSection
        title={labels.my_coach}
        onAdd={() => addQuestion()}
        addLabel={labels.my_coach_question_add}
      />

      <Grid container spacing={1}>
        <Grid
          item
          xs
          md={3}
          sx={{
            display: { md: 'block', xs: 'none' }
          }}
        >
          <SideMenu
            title='Categorias'
            items={categories}
            onChange={(value) => setParam('category_id', value)}
            current={getParam('category_id')}
          />
        </Grid>

        <Grid item xs md={9}>
          <Input
            icon={<Search />}
            onChange={(e) => handleInputChange(e.target.value)}
            placeholder={labels.search}
            variant='search'
          />

          <Select
            name='categories'
            options={categories}
            onChange={(e) => setParam('category_id', e.target.value)}
            sx={{
              mt: 1,
              mx: 2,
              display: { md: 'none', xs: 'block' }
            }}
          >
            {categories.map(({ name, value }) => (
              <MenuItem key={value} value={value}>
                {name}
              </MenuItem>
            ))}
          </Select>

          <QuestionsGrid className='mt-3'>
            {data.items?.length ? (
              data.items.map((question) => (
                <QuestionCard
                  key={question.uuid}
                  onEdit={editQuestion}
                  onDelete={deleteQuestion}
                  {...question}
                />
              ))
            ) : (
              <EmptySection
                message={labels.error_no_record_matched_your_query}
              />
            )}
          </QuestionsGrid>

          <Pagination
            page={data.page}
            pages={data.total_pages}
            onChange={(page) => setParam('page', page)}
          />
        </Grid>
      </Grid>

      <QuestionModal
        show={['add', 'edit'].includes(modalShow)}
        onClose={closeModal}
        onComplete={refetch}
        url={actionUrl.current}
        isEdit={modalShow === 'edit'}
      />

      <ConfirmModal
        show={modalShow === 'delete'}
        onClose={closeModal}
        onAccept={confirmDelete}
      />
    </>
  )
}

export default MyCoachPage