Test if Faris is able to review

package.json

@@ -15,7 +15,7 @@
     "@jonkoops/matomo-tracker-react": "^0.7.0",
     "@mui/icons-material": "^5.14.15",
     "@mui/lab": "^5.0.0-alpha.71",
-    "@mui/material": "^5.4.3",
+    "@mui/material": "^5.15.3",
     "@mui/x-date-pickers": "^6.17.0",
     "@react-leaflet/core": "^2.1.0",
     "@testing-library/jest-dom": "^5.16.2",
@@ -79,7 +79,7 @@
   "devDependencies": {
     "@babel/core": "^7.13.10",
     "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-react": "^7.23.3",
     "@svgr/plugin-svgo": "^8.1.0",
     "@svgr/webpack": "^7.0.0",
     "babel-loader": "^9.1.2",

server/server.js

@@ -1,3 +1,4 @@
+import { rateLimit } from 'express-rate-limit'; // added "type": "module" in package.json
 var express = require('express'),
     path = require('path'),
     compression = require('compression'),
@@ -15,7 +16,6 @@ app.get('/ip', (request, response) => {
 	}) 
 
 
-import { rateLimit } from 'express-rate-limit'; // added "type": "module" in package.json
 
 const limiter = rateLimit({
 	windowMs: 1 * 60 * 1000, // 15 minutes

src/App.css

@@ -1656,3 +1656,22 @@ top:250px; */
   background-color: #3390b2; 
   border-color: #b29d33; 
 } */
+
+.custom-h4-link {
+  font-size: 22px; /* Equivalent to h4 in Material-UI */
+  font-weight: 600; /* Equivalent to h4 in Material-UI */
+  line-height: 1.235rem; /* Adjust as needed */
+  /* Other styles specific to your use case */
+  text-decoration: none;
+  color: rgb(16, 16, 16);
+  /* Add any other styles that match the h4 variant */
+}
+
+.custom-h5-link {
+  font-size: 14px;
+  color: rgb(73, 146, 255);
+  font-weight: 700;
+  text-transform: uppercase;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  line-height: 1.334;
+}

src/actions/crudActions.js

@@ -4,6 +4,7 @@ import {
   NO_DATA_AVAILABLE,
   NO_TOURS_AVAILABLE,
 } from "./types";
+import { consoleLog } from "../utils/globals";
 
 export async function loadFile(
   dispatch,
@@ -29,9 +30,15 @@ export async function loadFile(
     };
   }
   try {
+    //when clicking "pdf" button on detail page.
+    console.log("L 33 crudActions / loadFile : route :", route);//example: "tours/1971/pdf"
+    console.log("L 34 crudActions / loadFile : data :", data, true);//example: {id: 1971, connection_id: 957752, connection_return_id: 957752, connection_return_ids: Array(1), connectionDate: '2024-01-11T00:00:00+01:00'}
+    console.log("L 36 crudActions / loadFile : responseType :", responseType); //'buffer'
+
     let res = await axios.get(route, {
-      data: {},
-      // data: data,
+      // data: {},
+      data: data,
+      // responseType: 'arraybuffer',
       responseType: responseType,
       params: params,
       timeout: 60000,
@@ -257,13 +264,13 @@ export function generateShareLink(provider, hashedUrl, date, city) {
       city: city,
     })
     .then((res) => {
-      if(process.env.NODE_ENV != "production"){
+      if(process.env.NODE_ENV !== "production"){
         console.log("L281 crudActions / generateShareLink res.data :", res.data);
       }
       return res.data;
     })
     .catch((err) => {
-      if(process.env.NODE_ENV != "production"){
+      if(process.env.NODE_ENV !== "production"){
         console.log("L285 crudActions / generateShareLink err.response.data :", err.response);
       }
       return err.response;

src/actions/fileActions.js

@@ -5,6 +5,7 @@ export function loadGPX(url, responseType = "buffer") {
         return axios.get(url, {
             data: {},
             timeout: 60000,
+            responseType: responseType,
         }).then(res => {
             return res;
         })

src/components/Footer/Footer.js

@@ -23,7 +23,9 @@ export default function Footer({}){
                         <Typography id="yearSpan" sx={{marginLeft: "10px", color: "#4992FF"}}>© {`${currentYear}`} Zuugle</Typography>
                     </Grid>
                     <Grid item xs  md={3}>
-                        <Typography sx={{marginLeft: "10px", textDecoration: "underline"}} className={"cursor-link"} onClick={() => window.open(`https://www.bahnzumberg.at`)}>Bahn zum Berg</Typography>
+                        <a href="https://www.bahnzumberg.at" target="_blank" rel='noreferrer'>
+                        <Typography sx={{marginLeft: "10px", textDecoration: "underline"}} className={"cursor-link"} >Bahn zum Berg</Typography>
+                        </a>
                     </Grid>
                     <Grid item xs  >
                         <Typography sx={{marginLeft: "10px", textDecoration: "underline"}} className={"cursor-link"} onClick=   {() => window.open(`${window.location.protocol}//${window.location.host}/privacy`)}>

src/components/TourCard.js

@@ -18,6 +18,8 @@ import TourConnectionReturnCardNew from "./TourConnectionReturnCardNew";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { useTranslation } from 'react-i18next';
 import {tourTypes} from "../utils/language_Utils";
+import { useSearchParams } from 'react-router-dom';
+import {consoleLog} from "../utils/globals";
 
 const DEFAULT_IMAGE = '/app_static/img/train_placeholder.webp';
 
@@ -30,6 +32,11 @@ export default function TourCard({tour, onSelectTour, loadTourConnections, city}
     const [connections, setConnections] = useState([]);
     const [returns, setReturns] = useState([]);
 
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    let tourLink = '/tour?'+ searchParams.toString();
+    // must update the Redux state : tour (this is done through leaving onSelectTour as it is)
+
     // i18next
     const {t} = useTranslation();
 
@@ -82,8 +89,8 @@ export default function TourCard({tour, onSelectTour, loadTourConnections, city}
         }
     }, [tour])
 
+    const isMobile = useMediaQuery('(max-width:600px)');
     const shortened_url = () => {
-        const isMobile = useMediaQuery('(max-width:600px)');
         let length = 45;
         if (!!isMobile) { 
             length = 35; 
@@ -115,7 +122,7 @@ export default function TourCard({tour, onSelectTour, loadTourConnections, city}
 
         const translateTourType = (type) =>{
             let translatedType = null; 
-            tourTypes.map((typ)=>{
+            tourTypes.forEach((typ)=>{
                 type = type.toLowerCase();
                 if(typ === type){   //correct the small cap so both can be equal
                     // console.log("filter.${type} : ", `filter.${type}`)
@@ -185,29 +192,48 @@ export default function TourCard({tour, onSelectTour, loadTourConnections, city}
 
     return (
       <Card
-        className="tour-card cursor-link"
+        className="tour-card"
         onClick={() => {
           onSelectTour(tour);
+          consoleLog("Card Clicked  !! tourLink -->", tourLink)
         }}
       >
-        <CardMedia
-          component="img"
-          height="140"
-          image={image}
-          style={{ opacity: imageOpacity }}
-        />
+        <a href={tourLink} target='_blank' rel='noreferrer' className='cursor-link'>
+            <CardMedia
+            component="img"
+            height="140"
+            image={image}
+            style={{ opacity: imageOpacity }}
+            />
+        </a>
         <CardContent>
           <CustomStarRating ratings={200} ratingValue={tour.user_rating_avg} />
           <div className="mt-3">
             <Typography variant="h5">{tour.range}</Typography>
           </div>
           <div className="mt-3">
+
             <Typography variant="h4" style={{ whiteSpace: "break-spaces" }}>
+          <a 
+            href={tourLink} 
+            target='_blank' 
+            rel='noreferrer'
+            className="custom-h4-link curser-link"
+          >
               {tour.title}
+          </a>
             </Typography>
             <Typography variant="h5" style={{ whiteSpace: "break-spaces" }}>
+            <a 
+            href={tourLink} 
+            target='_blank' 
+            rel='noreferrer'
+            className="custom-h5-link curser-link"
+          >
               {shortened_url()}
+            </a>
             </Typography>
+
           </div>
           <div className="mt-3" style={{ whiteSpace: "break-space" }}>
             {renderProps()}

src/utils/globals.js

@@ -107,7 +107,7 @@ export const crypt = (salt, text) => {
 
 
 export const getDomainText = () => {
-    const host = location.hostname;
+    const host = window.location.hostname;
     if(host.indexOf('www.zuugle.at') >= 0) {
         return "Zuugle.at"
     } else if(host.indexOf('www.zuugle.de') >= 0){
@@ -267,7 +267,7 @@ export const countFilterActive = (searchParams, filter) => {
       }
     }
     if(process.env.NODE_ENV != "production"){
-        console.log("L267 : FINAL count :",count)
+        consoleLog("L267 : FINAL count :",count)
     }
     return count;
   };
@@ -290,4 +290,18 @@ for (const [key, value] of searchParams) {
 return obj;
 }
 
+export function consoleLog(textOutput, varOutput, doubleLine = false) {
+    if(process.env.NODE_ENV !== "production"){
+        if(!!doubleLine){
+            console.log("----------------------------")
+            console.log(textOutput);
+            console.log(varOutput);
+            console.log("=============================")
+        }else{
+            console.log(textOutput, varOutput);
+        }
+        return;
+    }
+    return;
+}
 

src/utils/language_Utils.js

@@ -48,7 +48,7 @@ export const localMissingDays = (daysArr, lng) => {
 //LinkText could be used for creating links to pass as object values to the attribute "components" in Trans of i18next
 export const LinkText = (props) => {
 	return (
-		<a href={props.to || "#"} target="_blank" title={props.title || ""}>
+		<a href={props.to || "#"} target="_blank" rel="noreferrer" title={props.title || ""}>
 			{props.children}
 		</a>
 	);

src/views/Main/DetailReworked.js

@@ -23,7 +23,7 @@ import TourDetailProperties from "../../components/TourDetailProperties";
 import moment from "moment/moment";
 import { Buffer } from "buffer";
 import fileDownload from "js-file-download";
-import { parseFileName } from "../../utils/globals";
+import { consoleLog, parseFileName } from "../../utils/globals";
 import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
@@ -52,20 +52,10 @@ import Close from "../../icons/Close";
 import { shortenText } from "../../utils/globals";
 import i18next from "i18next";
 
-const setGpxTrack = (url, loadGPX, _function) => {
-  loadGPX(url).then((res) => {
-    if (!!res && !!res.data) {
-      let gpx = new GpxParser(); //Create gpxParser Object
-      gpx.parse(res.data);
-      if (gpx.tracks.length > 0) {
-        const positions = gpx.tracks[0].points.map((p) => [p.lat, p.lon]);
-        _function(positions);
-      }
-    }
-  });
-};
+
 
 const DetailReworked = (props) => {
+
   const {
     loadTour,
     loadTours,
@@ -83,6 +73,19 @@ const DetailReworked = (props) => {
     setShowMobileMenu,
   } = props;
 
+  const setGpxTrack = (url, loadGPX, _function) => {
+    loadGPX(url).then((res) => {
+      if (!!res && !!res.data) {
+        let gpx = new GpxParser(); //Create gpxParser Object
+        gpx.parse(res.data);
+        if (gpx.tracks.length > 0) {
+          const positions = gpx.tracks[0].points.map((p) => [p.lat, p.lon]);
+          _function(positions);
+        }
+      }
+    });
+  };
+
   const [connections, setConnections] = useState(null);
   const [activeConnection, setActiveConnection] = useState(null);
   const [activeReturnConnection, setActiveReturnConnection] = useState(null);
@@ -150,7 +153,7 @@ useEffect(() => {
       .then((response) => {
         if (response.status === 200) {
           if(process.env.NODE_ENV != "production"){
-            console.log("L158 : first response.data", response.data)
+            // consoleLog("L158 : response.data", response.data, true)
           }
           return response.data;
         }
@@ -166,10 +169,11 @@ useEffect(() => {
         console.error("Error fetching provider permit status:", error);
       });
   }
-  if(process.env.NODE_ENV != "production"){
-    console.log("L172 : providerPermit", providerPermit)
-  }
-}, [tour]);
+  // consoleLog("L172 : providerPermit", providerPermit)
+  // if(process.env.NODE_ENV != "production"){
+  //   console.log("L172 : providerPermit", providerPermit)
+  // }
+}, [tour,providerPermit]);
 
 
   React.useEffect(() => {
@@ -188,6 +192,7 @@ useEffect(() => {
           generateShareLink(tour.provider, tour.hashed_url, moment(activeConnection?.date).format('YYYY-MM-DD'), searchParams.get("city"))
               .then(res => {
                   if (res.success === true){
+                      // console.log(`window.location.origin + "/ tour?share=" + res.shareId : `, window.location.origin + "/ tour?share=" + res.shareId )
                       setShareLink(window.location.origin + "/tour?share=" + res.shareId);
                   } else {
                       console.log("Share link didn't generate as expected.");
@@ -225,7 +230,7 @@ useEffect(() => {
               "datum",
               moment(date).format("YYYY-MM-DD")
             );
-            console.log("URL redirect :" + "/tour?" + redirectSearchParams.toString())
+            consoleLog('URL redirect : /tour?', redirectSearchParams.toString())
             lazy(navigate("/tour?" + redirectSearchParams.toString()));
           } else {
             city && searchParams.set("city", city);
@@ -285,7 +290,7 @@ useEffect(() => {
   useEffect(() => {
     if (tour) {
       if (!tour.cities_object[searchParams.get("city")]) {
-        console.log("No city L260");
+        consoleLog("No city L289");
       } else {
         // console.log("inside block for setting gopx files and tracks")
         // console.log("===============================================")
@@ -436,7 +441,7 @@ useEffect(() => {
 
 
   useEffect(() => {
-  console.log("L464  : share link",shareLink )
+  // consoleLog("L464  : share link",shareLink )
   }, [shareLink]);
 
   const actionButtonPart = (

src/views/Main/Main.js

@@ -184,7 +184,7 @@ try {
           .then((tourExtracted) => {
             if (tourExtracted && tourExtracted.data && tourExtracted.data.tour) {
               localStorage.setItem("tourId", tour.id);
-              window.open("/tour?" + searchParams.toString());
+              // window.open("/tour?" + searchParams.toString());
             }else{
               goToStartPage();
             }

src/views/Start/Start.js

@@ -149,7 +149,7 @@ function Start({
           .then((tourExtracted) => {
             if (tourExtracted && tourExtracted.data && tourExtracted.data.tour) {
               localStorage.setItem("tourId", tour.id);
-              window.open("/tour?" + searchParams.toString(),"_blank","noreferrer");
+              // window.open("/tour?" + searchParams.toString(),"_blank","noreferrer");// removed to use <a> tags
             }else{
               window.location.reload();
             }