removed lodash and moment, and fixed tld

package.json

@@ -15,18 +15,14 @@
     "@mui/material": "^5.16.7",
     "@mui/x-date-pickers": "^6.17.0",
     "@react-leaflet/core": "^2.1.0",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.2",
+    "dayjs": "^1.11.13",
     "gpxparser": "^3.0.0",
     "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.2.0",
     "js-file-download": "^0.4.12",
     "leaflet": "^1.9.3",
-    "lodash": "^4.17.21",
-    "moment": "^2.29.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -45,7 +41,6 @@
     "redux-thunk": "^2.4.1",
     "uuid": "^9.0.0",
     "watch": "^0.13.0",
-    "web-vitals": "^3.3.0",
     "webpack-cli": "^5.1.4"
   },
   "overrides": {
@@ -77,6 +72,9 @@
     "@babel/preset-env": "^7.13.10",
     "@babel/preset-react": "^7.23.3",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react-helmet": "^6.1.11",
     "babel-loader": "^9.1.2",
     "clean-webpack-plugin": "^4.0.0",

src/components/Itinerary/ItineraryCalendar.js

@@ -1,11 +1,10 @@
 import React from "react";
-import moment from "moment";
-import "moment/locale/de";
-import "moment/locale/fr";
-import "moment/locale/it";
-import "moment/locale/sl";
+import dayjs from "dayjs";
+import "dayjs/locale/de";
+import "dayjs/locale/fr";
+import "dayjs/locale/it";
+import "dayjs/locale/sl";
 import { useTranslation } from "react-i18next";
-import * as _ from "lodash";
 
 const formatDate = (date, locale) => {
   const formats = {
@@ -15,43 +14,39 @@ const formatDate = (date, locale) => {
     it: "dddd D MMMM YYYY",
     en: "dddd, D MMMM YYYY",
   };
-  moment.locale(locale);
-  return date.format(formats[locale]);
+  // Set locale and format the date
+  return date.locale(locale).format(formats[locale]);
 };
 
 const dayOfWeek = (date, locale) => {
-  moment.locale(locale);
-  return moment(date).format("dd");
+  // Use the locale-aware formatting function for Day.js
+  return date.locale(locale).format("dd");
 };
 
 const isWe = (date) => {
-  const d = date.isoWeekday();
-  return d === 6 || d === 7;
+  const d = date.day();
+  return d === 6 || d === 0; // In Day.js, Sunday is 0 and Saturday is 6
 };
 
 const isSelectedDay = (date, selectedDay) => {
   return date.isSame(selectedDay, "day");
 };
 
-const ItineraryCalendar = ({
-  connectionData,
-  dateIndex,
-  updateConnIndex
-}) => {
-  const { t, i18n } = useTranslation();
+const ItineraryCalendar = ({ connectionData, dateIndex, updateConnIndex }) => {
+  const { i18n } = useTranslation();
   let selectedDay = dateIndex;
   let days = [];
 
-  if (!connectionData || (!dateIndex && dateIndex !== 0)) {
+  if (!connectionData || (dateIndex === undefined)) {
     return <></>;
   } else {
-    days = _.map(connectionData, (con) => moment(con.date));
+    days = connectionData?.map((con) => dayjs(con.date));
   }
 
   return (
     <div className="tour-detail-itinerary-calendar">
       <div className="tour-detail-itinerary-calendar-selected-day">
-        {formatDate(moment(connectionData[selectedDay].date), i18n.language)}
+        {formatDate(dayjs(connectionData[selectedDay].date), i18n.language)}
       </div>
       <div className="tour-detail-itinerary-calendar-grid">
         {days.map((dd) => (
@@ -70,7 +65,7 @@ const ItineraryCalendar = ({
           <div
             key={"2" + dd.date()}
             className={`${
-              isSelectedDay(dd, moment(connectionData[selectedDay].date))
+              isSelectedDay(dd, dayjs(connectionData[selectedDay].date))
                 ? "tour-detail-itinerary-calendar-grid-selected"
                 : "tour-detail-itinerary-calendar-date"
             }`}

src/components/Search/AutosuggestSearch.js

@@ -1,15 +1,8 @@
 import React, { useState } from "react";
 import { loadSuggestions } from "../../actions/crudActions";
 import CustomSelect from "./CustomSelect";
-import { isArray } from "lodash";
-
-
-const AutosuggestSearchTour = ({
-  onSearchSuggestion,
-  city,
-  language,
-}) => {
 
+const AutosuggestSearchTour = ({ onSearchSuggestion, city, language }) => {
   const [options, setOptions] = useState([]);
   const urlSearchParams = new URLSearchParams(window.location.search);
   let searchParam = urlSearchParams.get("search");
@@ -31,14 +24,16 @@ const AutosuggestSearchTour = ({
             label: suggestion.suggestion,
             value: suggestion.suggestion,
           }));
-          newOptions && isArray(newOptions) && setOptions([...newOptions]);
+          if (Array.isArray(newOptions)) {
+            setOptions([...newOptions]);
+          }
         })
         .catch((err) => {
           console.error(err);
         });
     }
   };
-  
+
   return (
     <div>
       <CustomSelect

src/components/Search/Search.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useRef } from "react";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import {loadTours } from "../../actions/tourActions";
+import { loadTours } from "../../actions/tourActions";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { Fragment, useEffect, useState } from "react";
@@ -25,10 +25,10 @@ import AutosuggestSearchTour from "./AutosuggestSearch";
 import Filter from "../Filter/Filter";
 import SearchIcon from "../../icons/SearchIcon";
 import TransportTrain from "../../icons/TransportTrain";
-import { capitalize } from "lodash";
 import { Modal, Typography, useMediaQuery } from "@mui/material";
+import { capitalize } from "../../utils/globals";
 import Close from "../../icons/Close";
-import '/src/config.js';
+import "/src/config.js";
 
 export function Search({
   loadTours,
@@ -48,7 +48,7 @@ export function Search({
   filterValues,
   mapBounds,
   filterOn,
-  setFilterOn
+  setFilterOn,
 }) {
   //navigation
   const navigate = useNavigate();
@@ -136,7 +136,7 @@ export function Search({
     }
 
     //setting searchPhrase to the value of the search parameter
-      
+
     if (!!search) {
       setSearchPhrase(search); //TODO : do we need to do actual search if search is a city? see line 138 comment
 
@@ -247,10 +247,8 @@ export function Search({
     localStorage.setItem("filterCount", 0);
   };
 
-
-
   const openFilter = () => {
-    setFilterOn(true)
+    setFilterOn(true);
   };
 
   useEffect(() => {
@@ -304,7 +302,7 @@ export function Search({
     setCounter(0);
     setFilterValues(null); // reset state in parent Main
     resetFilterLocalStorage();
-    setFilterOn(false)
+    setFilterOn(false);
   };
 
   const handleFilterChange = (entry) => {
@@ -379,50 +377,46 @@ export function Search({
 
   const showCityModal = () => {
     if (isMobile) {
-      setShowMobileModal(true)
-    }else{
-
-    showModal("MODAL_COMPONENT", {
-      CustomComponent: FullScreenCityInput,
-      searchParams,
-      initialCity: cityInput,
-      onSelect: async (city) => {
-
-        if (!!city) {
-          setCityInput(city.label);
-          setCity(city);
-          pageKey === "start" && updateCapCity(city.label);
-          searchParams.set('city', city.value);
-          setSearchParams(searchParams)
-          window.location.reload()
-        }
-
-        hideModal();
-      },
-      cityOne:  cityOne ,
-      idOne:  idOne ,
-      setSearchParams,
-      title: "",
-      sourceCall: "city",
-      page: page,
-      srhBoxScrollH: document
-        .querySelector(".main-search-bar")
-        .getBoundingClientRect().top,
-      modalSize: "lg",
-      onBack: () => {
-        hideModal();
-      },
-    });
-  }
+      setShowMobileModal(true);
+    } else {
+      showModal("MODAL_COMPONENT", {
+        CustomComponent: FullScreenCityInput,
+        searchParams,
+        initialCity: cityInput,
+        onSelect: async (city) => {
+          if (!!city) {
+            setCityInput(city.label);
+            setCity(city);
+            pageKey === "start" && updateCapCity(city.label);
+            searchParams.set("city", city.value);
+            setSearchParams(searchParams);
+            window.location.reload();
+          }
 
+          hideModal();
+        },
+        cityOne: cityOne,
+        idOne: idOne,
+        setSearchParams,
+        title: "",
+        sourceCall: "city",
+        page: page,
+        srhBoxScrollH: document
+          .querySelector(".main-search-bar")
+          .getBoundingClientRect().top,
+        modalSize: "lg",
+        onBack: () => {
+          hideModal();
+        },
+      });
+    }
   };
   const showCityModalMobile = () => {
     showModal("MODAL_COMPONENT", {
       CustomComponent: FullScreenCityInput,
       searchParams,
       initialCity: cityInput,
       onSelect: async (city) => {
-
         if (!!cityOne && !!idOne && pageKey === "detail") {
           setCityInput(city.label);
           setCity(city.value);
@@ -433,12 +427,11 @@ export function Search({
           pageKey === "start" && updateCapCity(city.label);
           searchParams.set("city", city.value);
           setSearchParams(searchParams);
-
         }
         hideModal();
       },
-      cityOne:  cityOne ,
-      idOne:  idOne ,
+      cityOne: cityOne,
+      idOne: idOne,
       setSearchParams,
       title: "",
       sourceCall: "city",
@@ -843,7 +836,11 @@ export function Search({
                   {pageKey !== "detail" ? (
                     <Box
                       className="search-bar--city"
-                      sx={{ display: "flex", textAlign: "left", alignItems:"center"  }}
+                      sx={{
+                        display: "flex",
+                        textAlign: "left",
+                        alignItems: "center",
+                      }}
                     >
                       <>
                         {!isMobile && (
@@ -852,7 +849,7 @@ export function Search({
                               strokeWidth: "1px",
                               fill: "#000",
                               stroke: "none",
-                              marginRight: "5px", 
+                              marginRight: "5px",
                             }}
                           />
                         )}