import './style.scss';
import NewsletterSubscriber from 'components/Sections/Subscribe';
import BlogTitle from './BlogTitle';
import { useDispatch, useSelector } from 'react-redux';
import {
    fetchBlogPage,
    fetchFilterTags,
    fetchPosts,
    selectFilterTags,
    selectGeneralIsLoading,
    selectHero,
    selectPosts,
} from 'store/slices/BlogSlice';
import { useEffect, useRef, useState } from 'react';
// import Preloader from 'Layout/Preloader';
import PostFilter from './Posts/PostFilter';
import Pagination from '@mui/material/Pagination';
import PostList from './Posts/PostList';
import { useAnimation } from 'hooks/useAnimation';
import { scrollToSection } from 'helpers';

const showAll = 'Show All';

const Blog = () => {
    const dispatch = useDispatch();
    const [selectedTag, setActive] = useState(showAll);
    const [page, setPage] = useState(1);

    const { title, description } = useSelector(selectHero);
    const tags = useSelector(selectFilterTags);
    const isLoading = useSelector(selectGeneralIsLoading);
    const { data, meta } = useSelector(selectPosts);

    const container = useRef();
    useAnimation({
        items: ['.blog-pagination'],
        container,
        dependencies: [isLoading],
    })
    const totalPages = meta?.pagination?.pageCount;

    const allTags = [showAll, ...tags];

    const handleFilterChange = tagName => {
        setActive(tagName);
        setPage(1);
    };

    const handlePageChange = (event, value) => {
        setPage(value)
        scrollToSection("blog-filter")
    };

    useEffect(() => {
        // @ts-ignore
        dispatch(fetchBlogPage());
        // @ts-ignore
        dispatch(fetchFilterTags());
    }, [dispatch]);

    useEffect(() => {
        dispatch(
            // @ts-ignore
            fetchPosts({
                page,
                type: selectedTag === showAll ? null : selectedTag,
            }),
        );
    }, [dispatch, page, selectedTag]);

    return !isLoading && (
        <>
            {/* {
                isLoading && <Preloader />
            } */}
            <BlogTitle title={title} desc={description} />
            <div ref={container} className="inner-container">
                <PostFilter tags={allTags} selectedTag={selectedTag} onClick={handleFilterChange} />
                <PostList posts={data} />
                {
                    page >= 1 && totalPages > 1 ? (
                        <div className='blog-pagination'>

                            <Pagination
                                count={totalPages}
                                page={page}
                                onChange={handlePageChange}
                                boundaryCount={1}
                                hidePrevButton={page === 1}
                                hideNextButton={page === totalPages}

                            />


                        </div>
                    )
                        :
                        (<></>)
                }
            </div> {/* Added closing tag */}
            <NewsletterSubscriber isLoading={isLoading} />
        </>
    );
};

export default Blog;

• [D] BlogTitle
• [D] CurrentPost
• [D] Posts
• [F] index.jsx
  Delete
• [F] mockData.js
  Delete
• [F] style.scss
  Delete