import { Routes, Route, useLocation } from 'react-router-dom';
import Layout from './Layout/Layout';
import FZF from 'pages/404';
import { useDispatch, useSelector } from 'react-redux';
import { lazy, useEffect, } from 'react';
import { fetchGeneral, selectGeneralIsLoading } from 'store/slices/GeneralSlice';
import { fetchHomepage, selectHomepageIsLoading } from 'store/slices/HomepageSlice';
import ROUTES from 'constants/routes';
import { selectFeaturesIsLoading, fetchFeatures } from 'store/slices/FeaturesSlice';
import { fetchPosts } from 'store/slices/BlogSlice';
import { fetchLocations } from 'store/slices/LocationsSlice';
import { fetchProductsData } from 'store/slices/PricingSlice';
import { Helmet } from 'react-helmet';
import { useCookies } from 'react-cookie';


import ReactGA from 'react-ga4';
import Sitemap from 'pages/Sitemap';
import LandingPage from 'pages/LandingPage';
import BrandAssets from 'pages/BrandAssets';



const Home = lazy(() => import('pages/Home'));
const ProductPage = lazy(() => import('pages/Product'));
const Features = lazy(() => import('pages/Features'));
const MainProxyLocation = lazy(() => import('pages/ProxyLocations/MainProxyLocations'));
const CurrentProxyLocation = lazy(() => import('pages/ProxyLocations/CurrentProxyLocations'));
const Company = lazy(() => import('pages/ProxyLocations/MainProxyLocations'));
const Pricing = lazy(() => import('pages/Pricing'));
const Contacts = lazy(() => import('pages/Contacts'));
const AboutUs = lazy(() => import('pages/AboutUs'));
const FAQPage = lazy(() => import('pages/FAQ'));
const Blog = lazy(() => import('pages/Blog'));
const CurrentPost = lazy(() => import('pages/Blog/CurrentPost'));
const TermsAndConditions = lazy(() => import('pages/TermsAndConditions'));
const PrivacyPolicy = lazy(() => import('pages/PrivacyPolicy'));
const RefundPolicy = lazy(() => import('pages/RefundPolicy'));



const App = () => {
    const location = useLocation();
    const dispatch = useDispatch();
    const [cookies] = useCookies(['cookieAgreement']);
    const isCookieAgree = cookies.cookieAgreement;


    const generalIsLoading = useSelector(selectGeneralIsLoading);
    const homepageIsLoading = useSelector(selectHomepageIsLoading);
    const featuresIsLoading = useSelector(selectFeaturesIsLoading);

    useEffect(() => {
        // @ts-ignore
        dispatch(fetchGeneral());
        // @ts-ignore
        dispatch(fetchHomepage());
        // @ts-ignore
        dispatch(fetchFeatures());
        // @ts-ignore
        dispatch(fetchLocations());
        // @ts-ignore
        dispatch(fetchProductsData());
        dispatch(
            // @ts-ignore
            fetchPosts({ page: 1 }),
        );
    }, [dispatch]);

    useEffect(() => {
        if (isCookieAgree) {
            ReactGA.initialize('G-H9W76JSSRJ');

        }
    }, [isCookieAgree]);
    useEffect(() => {
        if (isCookieAgree) {
            ReactGA.send({ hitType: 'pageview', page: location.pathname });
        }
    }, [location, isCookieAgree]);



    return generalIsLoading || homepageIsLoading || featuresIsLoading || (
        <>
            <Helmet
                titleTemplate="Ping Proxies - %s"
                defaultTitle="Ping Proxies"
                meta={[
                    { name: "description", content: "The world's most advanced proxy network" },
                ]}
            />

            <Routes>
                <Route path={ROUTES.base} element={<Layout />}>
                    <Route index element={<Home />} />
                    <Route path={`${ROUTES.product}/:productSlug`} element={<ProductPage />} />
                    <Route path={`${ROUTES.features}/:featuresSlug`} element={<Features />} />
                    <Route path={ROUTES.location} element={<MainProxyLocation />} />
                    <Route path={`${ROUTES.location}/:countrySlug`} element={<CurrentProxyLocation />} />
                    <Route path={ROUTES.company} element={<Company />} />
                    <Route path={ROUTES.pricing} element={<Pricing />} />
                    <Route path={ROUTES.contacts} element={<Contacts />} />
                    <Route path={ROUTES.about_us} element={<AboutUs />} />
                    <Route path={ROUTES.faq} element={<FAQPage />} />
                    <Route path={ROUTES.blog} element={<Blog />} />
                    <Route path={`${ROUTES.blog}/:postSlug`} element={<CurrentPost />} />
                    <Route path={ROUTES.terms_and_conditions} element={<TermsAndConditions />} />
                    <Route path={ROUTES.privacy_policy} element={<PrivacyPolicy />} />
                    <Route path={ROUTES.refund_policy} element={<RefundPolicy />} />
                    <Route path={ROUTES.landing_page + "/:landingPageSlug"} element={<LandingPage />} />
                    <Route path={ROUTES.brand_assets} element={<BrandAssets />} />
                    <Route path={`${ROUTES.update_sitemap}`} element={<Sitemap />} />
                    <Route path="*" element={<FZF />} />
                </Route>
                {/* <Route path={ROUTES.ui_kit} element={<UIKit />} /> */}
            </Routes>
        </>
    );
};

export default App;

• [D] api
• [D] assets
• [D] components
• [D] constants
• [D] fonts
• [D] hooks
• [D] Layout
• [D] pages
• [D] store
• [D] styles
• [F] App.jsx
  Delete
• [F] helpers.js
  Delete
• [F] index.js
  Delete