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, Container, 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 Input from 'components/UI/Input'

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'

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 (

    <>

      <Container sx={{ px: 0 }}>

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

              className='mx-3 mx-md-0'

            />

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

      </Container>

      <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