function BlogListPageContent()

in src/theme/BlogListPage/index.tsx [69:146]
70 lines of code
13 McCabe index (conditional complexity)

function BlogListPageContent(props) {
    const { metadata, items, sidebar } = props;
    const isBrowser = useIsBrowser();
    const [blogs, setBlogs] = useState([]);
    const blogCategories = getBlogCategories(props);
    const ALL_BLOG = blogCategories.find(item => item.label === allText).values;

    const { siteConfig } = useDocusaurusContext();
    const isCN = siteConfig.baseUrl.indexOf('zh-CN') > -1;
    const [active, setActive] = useState(() => {
        const tag = isBrowser ? sessionStorage.getItem('tag') : allText;
        return tag || allText;
    });
    const [pageSize, setPageSize] = useState<number>(9);
    let [pageNumber, setPageNumber] = useState<number>(1);
    const [currentBlogs, setCurrentBlogs] = useState([]);
    const [currentPage, setCurrentPage] = useState<number>(0);
    const location = useLocation();
    const history = useHistory();

    const changeCategory = category => {
        history.push(
            `${location.pathname}?currentPage=1&currentCategory=${category ? category : ''}#blog`,
            location.state,
        );
    };

    useEffect(() => {
        let currentPageNumber = 1;
        let currentCategoryName = allText;
        if (location.search && location.search.split('?').length > 0) {
            const params = location.search.split('?')[1].split('&');
            if (params) {
                params.map(e => {
                    const [key, value] = e.split('=');
                    if (key === 'currentPage') {
                        if (value) currentPageNumber = +value;
                    } else {
                        if (value) currentCategoryName = decodeURI(value);
                    }
                });
            }
        }

        setActive(currentCategoryName);
        setCurrentPage(currentPageNumber);

        let currentCategory = blogCategories.find(item => item.label === currentCategoryName);
        if (!currentCategory) {
            currentCategory = blogCategories.find(item => item.label === allText);
        }

        setBlogs(currentCategory.values);
        setCurrentBlogs(currentCategory.values.slice((currentPageNumber - 1) * pageSize, currentPageNumber * pageSize));
    }, [location.search]);

    useEffect(() => {
        changeCategory(active);
        isBrowser && sessionStorage.setItem('tag', active);
    }, [active]);

    return (
        <BlogLayout sidebar={sidebar} pageType="blogList" className="lg:max-w-7xl">
            <PageHeader title="Blog" className="bg-white" {...props} />
            <HeadBlogs blogs={ALL_BLOG} />
            <div className="flex flex-col lg:max-w-7xl">
                <ul className="scrollbar-none w-[100%] mt-6 custom-scrollbar m-auto flex gap-3 overflow-auto text-[#4C576C] lg:mt-[5.5rem]  lg:justify-center lg:gap-6">
                    {blogCategories.map((item: any, index) => (
                        <li className=" py-px" key={index} onClick={() => changeCategory(item.label)}>
                            <span
                                className={`block cursor-pointer whitespace-nowrap rounded-[2.5rem] px-4 py-2 text-sm  shadow-[0px_1px_4px_0px_rgba(49,77,136,0.10)] hover:bg-[#444FD9] hover:text-white lg:px-6 lg:py-3 lg:text-base ${
                                    active === item.label && 'bg-[#444FD9] text-white'
                                }`}
                            >
                                {item.label}
                            </span>
                        </li>
                    ))}