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;