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/Search';

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 size={{ xs: 12, 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 size={{ xs: 12, md: 9 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>

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