import React, { useEffect, useState } from "react"; import logo from "../assets/img/getgo.svg"; import { useTranslation } from "react-i18next"; import { getWithExpiry } from "../logic/loigicUtils"; import { Area } from "../services/product/type"; import { useNavigate } from "react-router-dom"; import { DataCacheKey, staleTime } from "../global/constants"; import { startLoading, stopLoading } from "../features/loading/loadingSlice"; import { useAppDispatch } from "../hooks/useRedux"; import { useQuery } from "@tanstack/react-query"; import { productApi } from "../apis/productApi"; const Footer: React.FC = () => { const { t } = useTranslation(); const navigate = useNavigate(); const dispatch = useAppDispatch(); const { data: loadArea = [] } = useQuery({ queryKey: [DataCacheKey.AREAS_FOOTER], queryFn: async (): Promise => { try { dispatch(startLoading({})); const res = await productApi.loadArea({ isCountry: "1", isPopular: "1", }); // save to redux store console.log("Get area response data:", res); return res.data as Area[]; } catch (error) { console.error(error); return []; // 🔴 bắt buộc } finally { dispatch(stopLoading()); } }, staleTime: staleTime, }); const popularAreas = React.useMemo(() => loadArea.slice(0, 3), [loadArea]); return ( ); }; export default Footer;