Proyectos de Subversion LeadersLinked - SPA

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

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

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

import { Box, Grid, MenuItem, Select, styled } from '@mui/material'

import { Search } from '@mui/icons-material'

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

import { useFetch, useSearchParams } from '@hooks'

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

import EmptySection from 'components/UI/EmptySection'

import PaginationComponent from 'components/UI/PaginationComponent'

import SideMenu from 'components/UI/sidemenu/SideMenu'

import TitleSection from 'components/UI/TitleSection'

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

import ConfirmModal from 'components/modals/ConfirmModal'

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

import Input from '@components/UI/inputs/Input'

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 { search } = useLocation()

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

  const dispatch = useDispatch()

  const { data: categoriesData } = useFetch(`/my-coach`)

  const { data, refetch } = useFetch(`/my-coach/questions${search}`)

  const { setParams, params } = useSearchParams()

  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) => setParams('search', value), 500)

  return (

    <>

      <TitleSection

        title={labels.my_coach}

        onAdd={() => addQuestion()}

        addLabel={labels.my_coach_question_add}

      />

      <Grid container spacing={2} sx={{ pt: 1 }}>

        <Grid

          item

          xs={12}

          md={3}

          sx={{

            display: { md: 'block', xs: 'none' }

          }}

        >

          <SideMenu

            title='Categorias'

            items={categories}

            onChange={(value) => setParams('category_id', value)}

            current={params.category_id}

          />

        </Grid>

        <Grid item xs={12} md={9}>

          <Input

            icon={<Search />}

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

            placeholder={labels.search}

          />

          <Select

            name='categories'

            options={categories}

            onChange={(e) => setParams('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>

          <PaginationComponent

            onChangePage={(page) => setParams('page', page)}

            currentActivePage={data.page}

            pages={data.total_pages}

            isRow

          />

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