芝麻web文件管理V1.00

编辑当前文件:/home/qrafawbu/rentandbuyrealty.com/rentandbuyrealty.com/web/src/Components/HomePage/Home.jsx

"use client"
import React, { useEffect, useState } from "react";
import { BsArrowRight } from "react-icons/bs";
import { FiEye } from "react-icons/fi";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
// import required modules
import { FreeMode, Pagination } from "swiper/modules";
import MobileHeadline from "../MobileHeadlines/MobileHeadline";
import Link from "next/link";
import Loader from "../Loader/Loader";
import { GetAllArticlesApi, GetCountByCitysCategorisApi, GetFeturedListingsApi, GetSliderApi, getAllprojectsApi, getUserRecommendationApi } from "@/store/actions/campaign";
import VerticalCardSkeleton from "../Skeleton/VerticalCardSkeleton";
import VerticalCard from "../Cards/VerticleCard";
import HorizontalCard from "../Cards/HorizontalCard";
import CustomHorizontalSkeleton from "../Skeleton/CustomHorizontalSkeleton";
import CategoryCard from "../Cards/CategoryCard";
import CustomCategorySkeleton from "../Skeleton/CustomCategorySkeleton";
import ArticleCard from "../Cards/ArticleCard";
import ArticleCardSkeleton from "../Skeleton/ArticleCardSkeleton";
import NearByCitysSkeleton from "../Skeleton/NearByCitysSkeleton";
import { settingsData } from "@/store/reducer/settingsSlice";
import { useSelector } from "react-redux";
import Skeleton from "react-loading-skeleton";
import "aos/dist/aos.css";
import { placeholderImage, translate } from "@/utils";
import Layout from "../Layout/Layout";
import SearchTab from "../SearchTab/SearchTab.jsx";
import NearbyCityswiper from "../NearbyCitySwiper/NearbyCityswiper.jsx"
import { store } from "@/store/store";
import { categoriesCacheData, loadCategories, loadSlider, silderCacheData } from "@/store/reducer/momentSlice";
import SliderComponent from "../HomeSlider/SliderComponent";
import { languageData } from "@/store/reducer/languageSlice";
import { IoIosArrowForward } from "react-icons/io";
import ProjectCard from "../Cards/ProjectCard";
import { FaArrowRight } from "react-icons/fa";
import { useRouter } from "next/router";
import Swal from "sweetalert2";
import toast from "react-hot-toast";
import ProjectCardSkeleton from "../Skeleton/ProjectCardSkeleton";
import LoginModal from "../LoginModal/LoginModal";
import UserRecommendationCard from "../Cards/UserRecommendationCard";
import NoData from "../NoDataFound/NoData";

const HomePage = () => {

const router = useRouter()

const lang = useSelector(languageData);
    useEffect(() => { }, [lang])

useEffect(() => {
        loadSlider();
        loadCategories();
    }, []);
    const settingData = useSelector(settingsData);
    const isPremiumUser = settingData && settingData.is_premium;

const [isLoading, setIsLoading] = useState(true);

const [expandedStates, setExpandedStates] = useState([]);
    const [nearbyCityData, setnearbyCityData] = useState()
    const [getFeaturedListing, setGetFeaturedListing] = useState();
    const [getMostViewedProp, setGetMostViewedProp] = useState();
    const [getMostFavProperties, setGetMostFavProperties] = useState();
    const [getProjects, setGetProjects] = useState();
    const [getArticles, setGetArticles] = useState();
    const [getNearByCitysData, setGetNearByCitysData] = useState();
    const [userRecommendationData, setUserRecommendationData] = useState();

const isLoggedIn = useSelector((state) => state.User_signup);
    const userCurrentId = isLoggedIn && isLoggedIn.data ? isLoggedIn.data.data.id : null;
    const userCurrentLocation = isLoggedIn && isLoggedIn.data ? isLoggedIn.data.data.city : null;
    const language = store.getState().Language.languages;
    const sliderdata = useSelector(silderCacheData);
    const Categorydata = useSelector(categoriesCacheData);

const [showModal, setShowModal] = useState(false);
    const handleCloseModal = () => {
        setShowModal(false);
    };
    const handlecheckPremiumUser = (e, slug_id) => {
        e.preventDefault()
        if (userCurrentId) {
            if (isPremiumUser) {
                router.push(`/project-details/${slug_id}`)
            } else {
                Swal.fire({
                    title: "Opps!",
                    text: "You are not premium user sorry!",
                    icon: "warning",
                    allowOutsideClick: false,
                    showCancelButton: false,
                    customClass: {
                        confirmButton: 'Swal-confirm-buttons',
                        cancelButton: "Swal-cancel-buttons"
                    },
                    confirmButtonText: "Ok",
                }).then((result) => {
                    if (result.isConfirmed) {
                        router.push("/")
                    }
                });
            }
        } else {
            Swal.fire({
                title: translate("plzLogFirsttoAccess"),
                icon: "warning",
                allowOutsideClick: false,
                showCancelButton: false,
                allowOutsideClick: true,
                customClass: {
                    confirmButton: 'Swal-confirm-buttons',
                    cancelButton: "Swal-cancel-buttons"
                },
                confirmButtonText: "Ok",
            }).then((result) => {
                if (result.isConfirmed) {
                    setShowModal(true)
                }
            });
        }
    }

const breakpoints = {
        0: {
            slidesPerView: 1,
        },
        375: {
            slidesPerView: 1.5,
        },
        576: {
            slidesPerView: 2,
        },
        768: {
            slidesPerView: 3,
        },
        992: {
            slidesPerView: 4,
        },
        1200: {
            slidesPerView: 3,
        },
        1400: {
            slidesPerView: 4,
        },
    };

const breakpointsMostFav = {
        0: {
            slidesPerView: 1,
        },
        375: {
            slidesPerView: 1.5,
        },
        576: {
            slidesPerView: 2,
        },
        1200: {
            slidesPerView: 3,
        },
        1400: {
            slidesPerView: 4,
        },
    };

const breakpointsProjects = {
        0: {
            slidesPerView: 1,
        },
        375: {
            slidesPerView: 1.5,
        },
        576: {
            slidesPerView: 2,
        },
        1200: {
            slidesPerView: 3,
        },
        1400: {
            slidesPerView: 4,
        },
    };

// GET NEARBY CITY DATA

useEffect(() => {
        setIsLoading(true);
        if (userCurrentLocation) {
            GetFeturedListingsApi({
                city: userCurrentLocation,
                current_user: isLoggedIn ? userCurrentId : "",
                onSuccess: (response) => {
                    const cityData = response.data;
                    setIsLoading(false);
                    setnearbyCityData(cityData);
                },
                onError: (error) => {
                    console.log(error);
                    setIsLoading(true);
                }
            }
            );
        }
    }, [isLoggedIn, userCurrentLocation]);
    // GET FEATURED LISTINGS and