#2702: ListPage.jsx

Estructura del código

Hooks utilizados: Dispatch, Params, Location, Selector, Effect

Importaciones desde: ../../../actions, ../../../components/base/dynamicLayout, ../../../components/design, ./ListPage.module.scss, ./searchFilter/SearchFilter, prop-types, react, react-markdown, react-redux, react-router, rehype-raw, remark-gfm

Tiene PropTypes para: ListPage

Utiliza CSS Modules para el estilo.

Código fuente (resumido)

import PropTypes from 'prop-types';
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import { useDispatch, useSelector } from 'react-redux';
import { useLocation, useParams } from 'react-router';
import { callAction, loadList } from '../../../actions';
import DynamicLayout from '../../../components/base/dynamicLayout';
import { Card, Container } from '../../../components/design';
import SearchFilter from './searchFilter/SearchFilter';
import styles from './ListPage.module.scss';

function ListPage() {
    const dispatch = useDispatch();
    const onCallAction = (...args) => dispatch(callAction(...args));
    const onCategoryChange = (...args) => dispatch(loadList(...args));
    const { category: paramsCategory } = useParams();
    const location = useLocation();

    const category = useSelector(({ list }) => list.categories[paramsCategory]);

    // Solo recarga la lista cuando cambia la categoría o la cadena de búsqueda.
    React.useEffect(
        () => {
            onCategoryChange(paramsCategory, true, (location.state || {}).variables);
        },
        [paramsCategory, location.search, location.state],
    );

    // TODO AÑADIR MANEJO DE ERRORES

    return (
        <Container fluid>
            <Card>
                {category && (
                    <DynamicLayout
                        callAction={onCallAction}
                        ui={category.ui}
                        data={category.data}
                        setData={undefined}
                        options={{
                            displayPageMenu: false,
                            setBrowserTitle: true,
                            showActionButtons: false,
                        }}
                        variables={category.variables}
                    >
                        <h4 className={styles.uiTitle}>{category.ui.title}</h4>
                        {!category.ui.hideSearchFilter && (
                            <SearchFilter />
                        )}
                        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                            {category.data.resultInfo}
                        </ReactMarkdown>
                    </DynamicLayout>
                )}
            </Card>
        </Container>
    );
}

ListPage.propTypes = {};

export default ListPage;

Historial Git

bf988bc6d Eliminar 43 vulnerabilidades npm: react-scripts→Vite, ESLint 9, limpieza de dependencias, correcciones de errores
7c88abd0f wip actualizar dependencias
329d41bba wip corregir página de lista
f867698d3 wip: actualizar versiones de paquetes
3685edd6c actualizar a react 18 wip