#2702: ListPage.jsx

Структура кода

Используемые хуки: Dispatch, Params, Location, Selector, Effect

Импорты из: ../../../actions, ../../../components/base/dynamicLayout, ../../../components/design, ./ListPage.module.scss, ./searchFilter/SearchFilter, prop-types, react, react-markdown, react-redux, react-router, rehype-raw, remark-gfm

Имеет PropTypes для: ListPage

Использует CSS Modules для стилизации.

Исходный код (сокращённый)

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

    // Перезагружать список только при изменении категории или строки поиска.
    React.useEffect(
        () => {
            onCategoryChange(paramsCategory, true, (location.state || {}).variables);
        },
        [paramsCategory, location.search, location.state],
    );

    // TODO ДОБАВИТЬ ОБРАБОТКУ ОШИБОК

    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;

История Git

bf988bc6d Устранение 43 уязвимостей npm: react-scripts→Vite, ESLint 9, очистка зависимостей, исправления ошибок
7c88abd0f wip поднятие зависимостей
329d41bba wip исправление страницы списка
f867698d3 wip: поднятие версий пакетов
3685edd6c поднятие до react 18 wip