#2702: ListPage.jsx

Code Structure

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

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

Has PropTypes for: ListPage

Uses CSS Modules for styling.

Source Code (abridged)

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

    // Only reload the list when the category or search string changes.
    React.useEffect(
        () => {
            onCategoryChange(paramsCategory, true, (location.state || {}).variables);
        },
        [paramsCategory, location.search, location.state],
    );

    // TODO ADD ERROR HANDLING

    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 History

bf988bc6d Eliminate 43 npm vulnerabilities: react-scripts→Vite, ESLint 9, dependency cleanup, bugfixes
7c88abd0f wip lift dependencies
329d41bba wip fix list page
f867698d3 wip: lift package versions
3685edd6c lift to react 18 wip