From 43230036bf185da51d1b3c333a42ac26fa0294df Mon Sep 17 00:00:00 2001 From: bitroy Date: Wed, 11 Sep 2024 08:04:08 +0530 Subject: [PATCH 1/3] fix: start page blank screen flash and map btn position --- .babelrc | 27 +- package.json | 4 +- src/App.js | 153 ++++---- src/components/Footer/Footer.js | 345 ++++++++++-------- src/components/Search/MapBtn.js | 119 ++++--- src/index.js | 76 ++-- src/theme.js | 3 +- src/utils/seoPageHelper.js | 187 +++++----- src/views/Start/Header.js | 223 ++++++------ src/views/Start/Start.js | 595 ++++++++++++++++---------------- 10 files changed, 899 insertions(+), 833 deletions(-) diff --git a/.babelrc b/.babelrc index 0960c012..10845bb0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,23 @@ { - "presets": [ - "@babel/preset-env", - "@babel/preset-react" - ] -} \ No newline at end of file + "presets": ["@babel/preset-env", "@babel/preset-react"], + "plugins": [ + [ + "babel-plugin-import", + { + "libraryName": "@mui/material", + "libraryDirectory": "", + "camel2DashComponentName": false + }, + "core" + ], + [ + "babel-plugin-import", + { + "libraryName": "@mui/icons-material", + "libraryDirectory": "", + "camel2DashComponentName": false + }, + "icons" + ] + ] +} diff --git a/package.json b/package.json index e76c6888..7d6077ff 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "@testing-library/user-event": "^14.5.2", "@types/react-helmet": "^6.1.11", "babel-loader": "^9.1.2", + "babel-plugin-import": "^1.13.8", "clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^11.0.0", "css-loader": "^6.7.3", @@ -92,5 +93,6 @@ "terser-webpack-plugin": "^5.3.7", "url-loader": "^4.1.1", "webpack": "^5.77.0" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/App.js b/src/App.js index 3f923a8d..7b4ab07d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,7 @@ -import React, { lazy, Suspense, useEffect } from "react"; import ThemeProvider from "@mui/material/styles/ThemeProvider"; import i18next from "i18next"; +import React, { lazy, Suspense, useEffect } from "react"; import { Navigate, Route, Routes } from "react-router-dom"; -import CircularProgress from "@mui/material/CircularProgress"; import "./App.css"; import ModalRoot from "./components/ModalRoot"; import { theme } from "./theme"; @@ -17,87 +16,81 @@ const DetailReworked = lazy(() => import("./views/Main/DetailReworked")); const Search = lazy(() => import("./components/Search/Search")); function App() { - //check if first visit and change code to domain language - if (!localStorage.getItem("visited")) { - let domain = getTopLevelDomain(); - //switch to domain language - switch (domain) { - case "si": - i18next.changeLanguage("sl"); - break; - case "fr": - i18next.changeLanguage("fr"); - break; - case "it": - i18next.changeLanguage("it"); - break; - default: - i18next.changeLanguage("de"); - break; - } - localStorage.setItem("visited", true); - } + //check if first visit and change code to domain language + if (!localStorage.getItem("visited")) { + let domain = getTopLevelDomain(); + //switch to domain language + switch (domain) { + case "si": + i18next.changeLanguage("sl"); + break; + case "fr": + i18next.changeLanguage("fr"); + break; + case "it": + i18next.changeLanguage("it"); + break; + default: + i18next.changeLanguage("de"); + break; + } + localStorage.setItem("visited", true); + } - // Matomo tracking - const _mtm = (window._mtm = window._mtm || []); - useEffect(() => { - _mtm.push({ - "mtm.startTime": new Date().getTime(), - event: "mtm.Start", - }); - const d = document, - g = d.createElement("script"), - s = d.getElementsByTagName("script")[0]; - g.async = true; - g.src = "https://stats.bahnzumberg.at/js/container_ANAXmMKf.js"; - s.parentNode.insertBefore(g, s); - _mtm.push({ language: i18next.resolvedLanguage }); - }, []); + // Matomo tracking + const _mtm = (window._mtm = window._mtm || []); + useEffect(() => { + _mtm.push({ + "mtm.startTime": new Date().getTime(), + event: "mtm.Start", + }); + const d = document, + g = d.createElement("script"), + s = d.getElementsByTagName("script")[0]; + g.defer = true; + g.src = "https://stats.bahnzumberg.at/js/container_ANAXmMKf.js"; + s.parentNode.insertBefore(g, s); + _mtm.push({ language: i18next.resolvedLanguage }); + }, []); - return ( - -
- - } /> - } /> - - - -
- } - > - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + return ( + +
+ + } /> + } /> + + }> + + } /> + } + /> + } /> + } + /> + } /> + } /> + } /> + } /> - } /> - - -
- - - ); + } /> + + + + + + ); } export default App; diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 6b3e7fc5..a67808fa 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,162 +1,201 @@ -import * as React from "react"; -import Typography from "@mui/material/Typography"; -import Box from "@mui/material/Box"; -import Grid from "@mui/material/Grid"; +import { Box, Grid, Typography } from "@mui/material"; +import React from "react"; import { useTranslation } from "react-i18next"; const currentDate = new Date(); const currentYear = currentDate.getFullYear(); export default function Footer({}) { - const { t } = useTranslation(); + const { t } = useTranslation(); - return ( - - - - - - - Funded by www.bmk.gv.at - - - - - Logo Alpenkonvention - - - - + return ( + + + + + + + Funded by www.bmk.gv.at + + + + + Logo Alpenkonvention + + + + - - - - - - Logo Zuugle - - - - © {`${currentYear}`} Bahn zum Berg - - - - - window.open( - `${window.location.protocol}//${window.location.host}/privacy` - ) - } - > - {t("start.datenschutz")} - - - - - window.open( - `${window.location.protocol}//${window.location.host}/imprint` - ) - } - > - {t("start.impressum")} - - - - - - - - window.open("https://www.facebook.com/bahnzumberg/") - } - loading="lazy" - alt="Facebook" - />{" "} -  {" "} - - window.open("https://www.instagram.com/bahnzumberg/") - } - loading="lazy" - alt="Instagram" - />{" "} -  {" "} - window.open("https://github.com/bahnzumberg/")} - loading="lazy" - alt="GitHub" - /> - - - - - - - ); + + + + + + Logo Zuugle + + + + + © {`${currentYear}`} Bahn zum Berg + + + + + + window.open( + `${window.location.protocol}//${window.location.host}/privacy` + ) + } + > + {t("start.datenschutz")} + + + + + window.open( + `${window.location.protocol}//${window.location.host}/imprint` + ) + } + > + {t("start.impressum")} + + + + + + + + window.open( + "https://www.facebook.com/bahnzumberg/" + ) + } + loading="lazy" + alt="Facebook" + />{" "} +  {" "} + + window.open( + "https://www.instagram.com/bahnzumberg/" + ) + } + loading="lazy" + alt="Instagram" + />{" "} +  {" "} + + window.open( + "https://github.com/bahnzumberg/" + ) + } + loading="lazy" + alt="GitHub" + /> + + + + + + ); } diff --git a/src/components/Search/MapBtn.js b/src/components/Search/MapBtn.js index d8d19abe..f0de3f2f 100644 --- a/src/components/Search/MapBtn.js +++ b/src/components/Search/MapBtn.js @@ -1,63 +1,62 @@ -import * as React from "react"; -import { useState, useEffect } from "react"; -import Button from '@mui/material/Button'; -import MapIcon from "../../icons/Map"; -import ListIcon from "../../icons/List"; - +import Button from "@mui/material/Button"; +import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; +import ListIcon from "../../icons/List"; +import MapIcon from "../../icons/Map"; - - -const MapBtn = ({ children, onClick, showMap, btnSource}) => { - - const [t, i18n] = useTranslation(); - - //state to update the text - const [mapBtnext,setMapBtnText] = useState(""); - - //initialiaze icon - const iconUsed = !showMap ? : ; - - - useEffect(() => { - // Update button text when language changes - setMapBtnText(showMap ? t("main_only.kartenansicht_entfernen") : t("start_pages.zur_kartenansicht")); - }, [showMap, t]); - - let marginBottom900 = - !!btnSource && btnSource === "main" ? "calc(50px - 3%)" : "calc(70px - 5%)"; - - return ( - - ); +const MapBtn = ({ children, onClick, showMap, btnSource }) => { + const [t] = useTranslation(); + + //state to update the text + const [mapBtnext, setMapBtnText] = useState(""); + + //initialiaze icon + const iconUsed = !showMap ? : ; + + useEffect(() => { + // Update button text when language changes + setMapBtnText( + showMap + ? t("main_only.kartenansicht_entfernen") + : t("start_pages.zur_kartenansicht") + ); + }, [showMap, t]); + + return ( + + ); }; -export default MapBtn; \ No newline at end of file +export default MapBtn; diff --git a/src/index.js b/src/index.js index e8ffe124..1f3eb384 100644 --- a/src/index.js +++ b/src/index.js @@ -14,58 +14,64 @@ import { getTLD } from "./utils/globals"; const isDevelopment = process.env.NODE_ENV === "development"; const composeEnhancers = - isDevelopment && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ - ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() - : compose; + isDevelopment && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ + ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() + : compose; export const store = createStore( - rootReducer, - composeEnhancers(applyMiddleware(thunk)) + rootReducer, + composeEnhancers(applyMiddleware(thunk)) ); // Workaround for IE Mobile 10.0 if (navigator.userAgent.match(/IEMobile\/10\.0/)) { - const msViewportStyle = document.createElement("style"); - msViewportStyle.appendChild( - document.createTextNode("@-ms-viewport{width:auto!important}") - ); - document.head.appendChild(msViewportStyle); + const msViewportStyle = document.createElement("style"); + msViewportStyle.appendChild( + document.createTextNode("@-ms-viewport{width:auto!important}") + ); + document.head.appendChild(msViewportStyle); } function isMobileDevice() { - return /Mobi|Android|iPhone|iPad|Windows Phone|BlackBerry|Opera Mini|IEMobile/i.test( - navigator.userAgent - ); + return /Mobi|Android|iPhone|iPad|Windows Phone|BlackBerry|Opera Mini|IEMobile/i.test( + navigator.userAgent + ); } const tld = getTLD(); const preloadUrl = isMobileDevice() - ? `/app_static/img/background_start_mobil_${tld}.webp` - : `/app_static/img/background_start_small_${tld}.webp`; + ? `/app_static/img/background_start_mobil_${tld}.webp` + : `/app_static/img/background_start_small_${tld}.webp`; + +const currentPath = window.location.pathname; +const noPreload = + !currentPath.includes("/tour") || !currentPath.includes("/search"); const rootElement = document.getElementById("root"); if (!rootElement) { - console.error("Root element not found"); + console.error("Root element not found"); } else { - const root = createRoot(rootElement); + const root = createRoot(rootElement); - root.render( - - - - - - - - - - - - ); + root.render( + + + + + + {!noPreload && ( + + )} + + + + + + ); } diff --git a/src/theme.js b/src/theme.js index b57ebe2a..727de9f0 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,5 +1,4 @@ -import { BorderLeft } from "@mui/icons-material"; -import { createTheme } from "@mui/material"; +import { createTheme } from "@mui/material/styles"; export const theme = createTheme({ palette: { diff --git a/src/utils/seoPageHelper.js b/src/utils/seoPageHelper.js index df26beea..6d28b789 100644 --- a/src/utils/seoPageHelper.js +++ b/src/utils/seoPageHelper.js @@ -1,116 +1,107 @@ import * as React from "react"; -import Box from "@mui/material/Box"; -import { Grid, Typography } from "@mui/material"; import { Helmet, HelmetProvider } from "react-helmet-async"; -import { t } from "i18next"; export const getPageHeader = (directLink) => { - - if (!!directLink && !!directLink.header) { - return ( - - - {directLink.header} - - - - - ); - } else { - return ( - - - {/* start.helmet_title */} - Zuugle - - - - - ); - } + if (directLink?.header) { + return ( + + + {directLink.header} + + + + + ); + } + return ( + + + Zuugle + + + + + ); }; - export const extractCityFromLocation = (location, cities) => { - //searching for the case: "/cityslug" in location.pathname, in that case we check if it is a valid city, - if (!!location && location.pathname.startsWith('/')) { - const pathSegments = location.pathname.split('/').filter(segment => !!segment); - - if (pathSegments.length === 1 && pathSegments[0] === 'search') { - if (!!location && !!location.search) { - const searchParams = new URLSearchParams(location.search); - const cityParam = searchParams.get("city"); - return cityParam; - } - } else if (pathSegments.length === 1) { - const citySlug = pathSegments[0]; + //searching for the case: "/cityslug" in location.pathname, in that case we check if it is a valid city, + if (location?.pathname?.startsWith("/")) { + const pathSegments = location.pathname + .split("/") + .filter((segment) => !!segment); + + if (pathSegments.length === 1 && pathSegments[0] === "search") { + if (location?.search) { + const searchParams = new URLSearchParams(location.search); + const cityParam = searchParams.get("city"); + return cityParam; + } + } else if (pathSegments.length === 1) { + const citySlug = pathSegments[0]; + + // Check if citySlug exists in the cities array + const matchingCity = cities.find((city) => city.value === citySlug); + + if (matchingCity) { + return matchingCity.value; // Set the city parameter to the label of the matching city + } + } + } - // Check if citySlug exists in the cities array - const matchingCity = cities.find(city => city.value === citySlug); - - if (matchingCity) { - - return matchingCity.value; // Set the city parameter to the label of the matching city - } - } - } - - return null; // Return null if city param is not search or if the path doesn't match the pattern + return null; // Return null if city param is not search or if the path doesn't match the pattern }; export const getCityLabel = (location, cities) => { - let citySlug = !!location ? extractCityFromLocation(location, cities) : null; - if(!!cities && cities.length > 0){ - const found = cities.find( - (city) => city.value == citySlug - ); - if (!!found && !!found.label) { - return found.label - }else return "" ; - }else{ - return ""; - } -} + let citySlug = location ? extractCityFromLocation(location, cities) : null; + if (cities?.length) { + const found = cities.find((city) => city.value === citySlug); + if (found?.label) { + return found.label; + } else return ""; + } else { + return ""; + } +}; export const checkIfSeoPageCity = (location, cities) => { + let citySlug = extractCityFromLocation(location, cities); // this is the city extracted from city param and not from location.pathname - let citySlug = extractCityFromLocation(location,cities); // this is the city extracted from city param and not from location.pathname - - if (!!location && !!location.pathname && location.pathname === "/search") { - return null; - } else if (!!location && !!location.pathname && cities.length > 0) { - const found = cities.find( - (city) => city.value === citySlug - ); - return found; - } else { - return null; - } + if (location?.pathname === "/search") { + return null; + } else if (location?.pathname && cities?.length) { + const found = cities.find((city) => city.value === citySlug); + return found; + } else { + return null; + } }; - export const getTranslatedCountryName = () => { - let host = window.location.host; + let host = window.location.host; - if (host.indexOf("zuugle.ch") >= 0) { - return "start.schweiz"; - } else if (host.indexOf("zuugle.de") >= 0) { - return "start.deutschland"; - } else if (host.indexOf("zuugle.it") >= 0) { - return "start.italien"; - } else if (host.indexOf("zuugle.li") >= 0) { - return "start.liechtenstein"; - } else if (host.indexOf("zuugle.fr") >= 0) { - return "start.frankreich"; - } else if (host.indexOf("zuugle.si") >= 0) { - return "start.slowenien"; - } else { - return "start.oesterreich"; - } -}; \ No newline at end of file + if (host.indexOf("zuugle.ch") >= 0) { + return "start.schweiz"; + } else if (host.indexOf("zuugle.de") >= 0) { + return "start.deutschland"; + } else if (host.indexOf("zuugle.it") >= 0) { + return "start.italien"; + } else if (host.indexOf("zuugle.li") >= 0) { + return "start.liechtenstein"; + } else if (host.indexOf("zuugle.fr") >= 0) { + return "start.frankreich"; + } else if (host.indexOf("zuugle.si") >= 0) { + return "start.slowenien"; + } else { + return "start.oesterreich"; + } +}; diff --git a/src/views/Start/Header.js b/src/views/Start/Header.js index c3038505..9eb2614d 100644 --- a/src/views/Start/Header.js +++ b/src/views/Start/Header.js @@ -1,12 +1,11 @@ -import React, { lazy, useState, useCallback, useEffect } from "react"; -import { getDomainText, getTLD } from "../../utils/globals"; +import { Box, Typography } from "@mui/material"; +import React, { lazy, Suspense, useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { useSearchParams } from "react-router-dom"; import { getTotalCityTours } from "../../actions/crudActions"; -import "/src/config.js"; +import { getDomainText, getTLD } from "../../utils/globals"; import BackgroundImageLoader from "./BackgroundImageLoader"; -import Box from "@mui/material/Box"; -import Typography from "@mui/material/Typography"; +import "/src/config.js"; const DomainMenu = lazy(() => import("../../components/DomainMenu")); const LanguageMenu = lazy(() => import("../../components/LanguageMenu")); @@ -18,114 +17,122 @@ export default function Header({ showMobileMenu, setShowMobileMenu, }) { - const { t } = useTranslation(); - const [searchParams] = useSearchParams(); - const city = searchParams.get("city"); + const { t } = useTranslation(); + const [searchParams] = useSearchParams(); + const city = searchParams.get("city"); + + 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]); - 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); - 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 51a29a35..1f4ba777 100644 --- a/src/views/Start/Start.js +++ b/src/views/Start/Start.js @@ -1,5 +1,4 @@ -import { Typography } from "@mui/material"; -import Box from "@mui/material/Box"; +import { Box, Skeleton, Typography } from "@mui/material"; import React, { lazy, Suspense, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -9,335 +8,349 @@ 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"); + let city = ""; + const _city = searchParams.get("city"); - const { t } = useTranslation(); - const abortController = new AbortController(); + const { t } = useTranslation(); + const abortController = new AbortController(); - let searchParamCity = ""; - const totalTourRef = useRef(0); - const isMobile = useResponsive(); + let searchParamCity = ""; + const totalTourRef = useRef(0); + const isMobile = useResponsive(); - 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(); + 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(); - if (city && !searchParamCity) { - searchParams.set("city", city); - setSearchParams(searchParams); - } + if (city && !searchParamCity) { + searchParams.set("city", city); + setSearchParams(searchParams); + } - 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); - } - }; + 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); + } + }; - loadData(); + loadData(); - // 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]); + // 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 getCity = () => { - return localStorage.getItem("city") || searchParams.get("city") || ""; - }; + const getCity = () => { + return localStorage.getItem("city") || searchParams.get("city") || ""; + }; - const onSelectTour = (tour) => { - if (tour?.id) { - if (city) { - loadTour(tour.id, city).then((tourExtracted) => { - if (tourExtracted && tourExtracted.data && 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")) { + searchParams.set("map", true); + setSearchParams(searchParams); + } + navigate(`search?${searchParams.toString()}`); + }; - const country = getTranslatedCountryName(); + const country = getTranslatedCountryName(); - if (noToursAvailable) { - return ( - - } - > - -
-