diff --git a/src/views/Start/Header.js b/src/views/Start/Header.js index 9eb2614..b3c68fc 100644 --- a/src/views/Start/Header.js +++ b/src/views/Start/Header.js @@ -12,127 +12,122 @@ const LanguageMenu = lazy(() => import("../../components/LanguageMenu")); const SearchContainer = lazy(() => import("./SearchContainer")); export default function Header({ - totalTours, - allCities = [], - showMobileMenu, - setShowMobileMenu, + totalTours, + allCities = [], + showMobileMenu, + setShowMobileMenu, }) { - const { t } = useTranslation(); - const [searchParams] = useSearchParams(); - const city = searchParams.get("city"); + const { t } = useTranslation(); + const [searchParams] = useSearchParams(); + const getCity = useCallback(() => { + return searchParams.get("city") || localStorage.getItem("city") || null; + }, [searchParams]); + const city = getCity(); - const [capCity, setCapCity] = useState(city); - const [totalToursFromCity, setTotalToursFromCity] = useState(0); + const [capCity, setCapCity] = useState(city); + const [totalToursFromCity, setTotalToursFromCity] = useState(0); - const tld = getTLD(); + const tld = getTLD(); - const updateCapCity = useCallback((newCity) => { - setCapCity(newCity); - }, []); + const updateCapCity = useCallback((newCity) => { + setCapCity(newCity); + }, []); - const getCity = useCallback(() => { - return searchParams.get("city") || localStorage.getItem("city") || null; - }, [searchParams]); + useEffect(() => { + if (getCity()) { + getTotalCityTours(city).then((data) => { + setTotalToursFromCity(data.tours_city); + }); - useEffect(() => { - if (getCity()) { - getTotalCityTours(city).then((data) => { - setTotalToursFromCity(data.tours_city); - }); + if (allCities?.length > 0) { + const cityObj = allCities.find((e) => e.value === city); + if (cityObj) { + updateCapCity(cityObj.label); + console.log("setting search params", city); + searchParams.set("city", city); + } + } + } + }, [city, getCity, allCities, updateCapCity, searchParams]); - if (allCities?.length > 0) { - const cityObj = allCities.find((e) => e.value === city); - if (cityObj) { - updateCapCity(cityObj.label); - searchParams.set("city", city); - } - } - } - }, [city, getCity, allCities, updateCapCity, searchParams]); + if (totalTours === 0) { + return ( + + + + Zuugle + + {getDomainText()} + + + {t("start.wartungsmodus")} + + + ); + } - if (totalTours === 0) { - return ( - - - - Zuugle - - {getDomainText()} - - - - {t("start.wartungsmodus")} - - - - ); - } - - return ( - - }> - - - - - - - {totalTours > 0 && ( - - {totalTours.toLocaleString()}{" "} - {t( - totalToursFromCity === 0 - ? "start.tourenanzahl_untertitel" - : "start.tourenanzahl_untertitel_city", - { capCity } - )} - - )} - - {allCities.length > 0 && ( - }> - - - - - - - )} - - ); + return ( + + }> + + + + + + + {totalTours > 0 && ( + + {totalTours.toLocaleString()}{" "} + {t( + totalToursFromCity === 0 + ? "start.tourenanzahl_untertitel" + : "start.tourenanzahl_untertitel_city", + { capCity } + )} + + )} + + {allCities.length > 0 && ( + }> + + + + + + + )} + + ); } diff --git a/src/views/Start/Start.js b/src/views/Start/Start.js index d528971..50807e0 100644 --- a/src/views/Start/Start.js +++ b/src/views/Start/Start.js @@ -8,323 +8,311 @@ import { compose } from "redux"; import { loadAllCities, loadCities } from "../../actions/cityActions"; import { loadRanges } from "../../actions/rangeActions"; import { - loadFavouriteTours, - loadTotalTours, - loadTour, + loadFavouriteTours, + loadTotalTours, + loadTour, } from "../../actions/tourActions"; import { useResponsive } from "../../utils/globals"; import { - getPageHeader, - getTranslatedCountryName, + getPageHeader, + getTranslatedCountryName, } from "../../utils/seoPageHelper"; import Header from "./Header"; import "/src/config.js"; const RangeCardContainer = lazy(() => - import("../../components/RangeCardContainer") + import("../../components/RangeCardContainer") ); const KPIContainer = lazy(() => import("../../components/KPIContainer")); const ScrollingTourCardContainer = lazy(() => - import("../../components/ScrollingTourCardContainer") + import("../../components/ScrollingTourCardContainer") ); const MapBtn = lazy(() => import("../../components/Search/MapBtn")); const Footer = lazy(() => import("../../components/Footer/Footer")); function Start({ - loadFavouriteTours, - favouriteTours, - loadCities, - totalTours, - loadTour, - loadTotalTours, - totalConnections, - totalCities, - totalRanges, - favouriteRanges, - loadAllCities, - allCities, - totalProvider, - loadRanges, - noToursAvailable, + loadFavouriteTours, + favouriteTours, + loadCities, + totalTours, + loadTour, + loadTotalTours, + totalConnections, + totalCities, + totalRanges, + favouriteRanges, + loadAllCities, + allCities, + totalProvider, + loadRanges, + noToursAvailable, }) { - const [searchParams, setSearchParams] = useSearchParams(); - const navigate = useNavigate(); - const [showMobileMenu, setShowMobileMenu] = useState(false); - const [isLoading, setIsLoading] = useState(true); + const [searchParams, setSearchParams] = useSearchParams(); + const navigate = useNavigate(); + const [showMobileMenu, setShowMobileMenu] = useState(false); + const [isLoading, setIsLoading] = useState(true); - let city = ""; - const _city = searchParams.get("city"); + const getCity = () => { + return localStorage.getItem("city") || searchParams.get("city") || ""; + }; - const { t } = useTranslation(); - const abortController = new AbortController(); + let city = getCity(); - let searchParamCity = ""; - const totalTourRef = useRef(0); - const isMobile = useResponsive(); + const { t } = useTranslation(); + const abortController = new AbortController(); - useEffect(() => { - // matomo - // eslint-disable-next-line no-undef - _mtm.push({ pagetitel: "Startseite" }); - // network request configuration - const requestConfig = { - params: { domain: window.location.host }, - signal: abortController.signal, - }; - // Async function to load data and handle requests - const loadData = async () => { - try { - totalTourRef.current = await loadTotalTours(requestConfig); - await loadAllCities(requestConfig); - // await loadRanges( - // { ignore_limit: true, remove_duplicates: true }, - // requestConfig - // ); - getCity(); + const totalTourRef = useRef(0); + const isMobile = useResponsive(); - if (city && !searchParamCity) { - searchParams.set("city", city); - setSearchParams(searchParams); - } + useEffect(() => { + // matomo + // eslint-disable-next-line no-undef + _mtm.push({ pagetitel: "Startseite" }); + // network request configuration + const requestConfig = { + params: { domain: window.location.host }, + signal: abortController.signal, + }; + // Async function to load data and handle requests + const loadData = async () => { + try { + totalTourRef.current = await loadTotalTours(requestConfig); + await loadAllCities(requestConfig); + // await loadRanges( + // { ignore_limit: true, remove_duplicates: true }, + // requestConfig + // ); + // getCity(); - await loadCities({ limit: 5 }, requestConfig); - await loadFavouriteTours( - { - limit: 10, - city, - ranges: true, - provider: searchParams.get("p"), - }, - requestConfig - ); - setIsLoading(false); - } catch (error) { - console.error("Error loading data"); - setIsLoading(false); - } - }; + if (city) { + console.log("setting search params", city); + searchParams.set("city", city); + setSearchParams(searchParams); + } - loadData(); + await loadCities({ limit: 5 }, requestConfig); + await loadFavouriteTours( + { + limit: 10, + city, + ranges: true, + provider: searchParams.get("p"), + }, + requestConfig + ); + setIsLoading(false); + } catch (error) { + console.error("Error loading data"); + setIsLoading(false); + } + }; - // Return a cleanup function - return () => { - // Cancel any ongoing network request when the component unmounts - abortController.abort(); - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [searchParams]); + loadData(); - const getCity = () => { - return localStorage.getItem("city") || searchParams.get("city") || ""; - }; + // Return a cleanup function + return () => { + // Cancel any ongoing network request when the component unmounts + abortController.abort(); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [searchParams]); - const onSelectTour = (tour) => { - if (tour?.id) { - if (city) { - loadTour(tour.id, city).then((tourExtracted) => { - if (tourExtracted?.data?.tour) { - localStorage.setItem("tourId", tour.id); - // window.open("/tour?" + searchParams.toString(),"_blank","noreferrer");// removed to use tags - } else { - window.location.reload(); - } - }); - } - } else { - window.location.reload(); - } - }; + const onSelectTour = (tour) => { + if (tour?.id) { + if (city) { + loadTour(tour.id, city).then((tourExtracted) => { + if (tourExtracted?.data?.tour) { + localStorage.setItem("tourId", tour.id); + // window.open("/tour?" + searchParams.toString(),"_blank","noreferrer");// removed to use tags + } else { + window.location.reload(); + } + }); + } + } else { + window.location.reload(); + } + }; - const onSelectRange = (range) => { - if (range?.range) { - navigate( - `/search?range=${range.range}${_city ? "&city=" + _city : ""}` - ); - } - }; + const onSelectRange = (range) => { + if (range?.range) { + navigate(`/search?range=${range.range}${city ? "&city=" + city : ""}`); + } + }; - const getRangeText = () => { - if (_city?.length > 0) { - return t("start.schoene_wanderungen_nahe"); - } else { - return t("start.schoene_wanderungen"); - } - }; + const getRangeText = () => { + if (city?.length > 0) { + return t("start.schoene_wanderungen_nahe"); + } else { + return t("start.schoene_wanderungen"); + } + }; - const getFavouriteToursText = () => { - if (_city?.length > 0) { - return t("start.beliebte_bergtouren_nahe"); - } else { - return t("start.beliebte_bergtouren"); - } - }; + const getFavouriteToursText = () => { + if (city?.length > 0) { + return t("start.beliebte_bergtouren_nahe"); + } else { + return t("start.beliebte_bergtouren"); + } + }; - const onClickMap = () => { - if (!searchParams.get("map")) { - searchParams.set("map", true); - setSearchParams(searchParams); - } - navigate(`search?${searchParams.toString()}`); - }; + const onClickMap = () => { + if (!searchParams.get("map")) { + console.log("setting map"); + searchParams.set("map", true); + setSearchParams(searchParams); + } + navigate(`search?${searchParams.toString()}`); + }; - const country = getTranslatedCountryName(); + const country = getTranslatedCountryName(); - if (noToursAvailable) { - return ( - - } - > - -
-