Updated Libs - React-Router v6 to v7

src/components/Dialogs/ContactUsDialog.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
   AlertDialog,
   AlertDialogAction,

src/components/Search/SearchFilterCard.tsx

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { SearchFilter } from "@/model/InternalTypes";
 import { DateRange } from "react-day-picker";
 import { isValidSearchFilter } from "@/utils/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ConstsNav, ConstsTexts } from "@/utils/Consts";
 import { ContactUsDialog } from "../Dialogs/ContactUsDialog";
 import { useCheckForNightCount } from "@/utils/hooks";

src/components/app-footer.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/utils/Consts";
 import { Skeleton } from "./ui/skeleton";
 import { Mail, Phone } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useConfigVariable } from "@/utils/apiHooks";
 
 function AppFooter() {

src/components/app-header.tsx

@@ -2,7 +2,7 @@ import { ModeToggle } from "./mode-toggle";
 import { Button } from "./ui/button";
 import { Card, CardContent } from "./ui/card";
 import { Typography } from "./ui/typography";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Bed, BookAIcon, HomeIcon } from "lucide-react";
 import { eConfigVarKeys } from "@/model/ConfigVar";
 import { Skeleton } from "./ui/skeleton";
@@ -29,7 +29,7 @@ function AppHeader() {
 
   const getElementLogo = () => {
     if (isLoading) {
-      return <Skeleton className="w-[64px]" />;
+      return <Skeleton className="w-16" />;
     }
 
     const logoSizeClass = "w-[" + varCompanyLogoSize + "]";

src/components/booking/booking-details.tsx

@@ -9,7 +9,7 @@ import { IconWithTooltip } from "../ui/icon-number-tooltip";
 import { UserIcon } from "lucide-react";
 import { useCheckForGuestNumber } from "@/utils/hooks";
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ConstsNav, ConstsTexts } from "@/utils/Consts";
 import { ContactUsDialog } from "../Dialogs/ContactUsDialog";
 

src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { RouterProvider, createBrowserRouter } from "react-router";
 import Root from "./routes/Root";
 import ErrorPage from "./routes/error-page";
 import Homepage from "./routes/home-page";

src/routes/Root.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import "./Root.css";
 import AppHeader from "../components/app-header";
 import AppFooter from "../components/app-footer";

src/routes/book-page.tsx

@@ -14,9 +14,9 @@ import { Separator } from "@/components/ui/separator";
 import { Typography } from "@/components/ui/typography";
 import { BookingFormSchema } from "@/model/FormSchema";
 import { useAppStore } from "@/store";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { z } from "zod/v4";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { eBookingState } from "@/utils/AppStateManager";
@@ -50,6 +50,18 @@ function BookPage() {
     },
   });
 
+  useEffect(() => {
+    //Redirect to home if no booking is active.
+    if (
+      !appBookingState ||
+      !bookingData ||
+      (appBookingState.state != eBookingState.Booking &&
+        appBookingState.state != eBookingState.Booked)
+    ) {
+      navigate(ConstsNav.page_Home);
+    }
+  }, [appBookingState, bookingData, navigate]);
+
   function onSubmit(values: z.infer<typeof BookingFormSchema>) {
     if (bookingData == null) {
       return;
@@ -79,16 +91,6 @@ function BookPage() {
     }
   };
 
-  //Redirect to home if no booking is active.
-  if (
-    !appBookingState ||
-    !bookingData ||
-    (appBookingState.state != eBookingState.Booking &&
-      appBookingState.state != eBookingState.Booked)
-  ) {
-    navigate(ConstsNav.page_Home);
-  }
-
   const errorMsg = (
     <div>
       <Typography variant={"inlineCode"}>

src/routes/contact-page.tsx

@@ -5,7 +5,7 @@ import { Typography } from "@/components/ui/typography";
 import { eConfigVarKeys } from "@/model/ConfigVar";
 import { useConfigVariable } from "@/utils/apiHooks";
 import { Mail, Phone } from "lucide-react";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 
 function ContactPage() {
   const location = useLocation();
@@ -23,7 +23,7 @@ function ContactPage() {
 
   const mainText = location.state ?? "Contact us for a personalized quote!";
 
-  const LoadingContent = <Skeleton className="h-[100px] w-full" />;
+  const LoadingContent = <Skeleton className="h-25 w-full" />;
 
   const MainContent = (
     <div className="mx-auto">

src/routes/error-page.tsx

@@ -1,4 +1,4 @@
-import { useRouteError } from "react-router-dom";
+import { useRouteError } from "react-router";
 
 export default function ErrorPage() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/routes/home-page.tsx

@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Typography } from "@/components/ui/typography";
 import { RoomCategory } from "@/model/RoomCategory";
 import { SearchFilter } from "@/model/InternalTypes";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { LoaderIcon } from "lucide-react";
 import "./home-page.css";
 import { useAppStore } from "@/store";
@@ -52,7 +52,7 @@ function Homepage() {
       <div className="homePageRoomGrid grid gap-4">{roomList}</div>
       {isLoadingCategories && (
         <>
-          <Skeleton className="mx-auto flex h-[200px] w-full flex-col items-center justify-center">
+          <Skeleton className="mx-auto flex h-50 w-full flex-col items-center justify-center">
             <LoaderIcon />
             <Typography variant={"h3"} as="h2">
               Loading...

src/routes/search-page.tsx

@@ -10,7 +10,7 @@ import { SearchFilter } from "@/model/InternalTypes";
 import { eBookingState } from "@/utils/AppStateManager";
 import { useAppStore } from "@/store";
 import { makeSearchPeriodRequestFromSearchFilter } from "@/utils/utils";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useBookingStateDispacher } from "@/utils/hooks";
 import { ConstsNav } from "@/utils/Consts";
 
@@ -75,7 +75,7 @@ function SearchPage() {
       <Typography variant={"h3"} as="h2">
         Loading...
       </Typography>
-      <Skeleton className="mx-auto h-[200px] w-full" />
+      <Skeleton className="mx-auto h-50 w-full" />
     </>
   );
   const pageContentLoaded = (

src/routes/success-page.tsx

@@ -5,7 +5,7 @@ import { NewBookingResponse } from "@/model/Bookings";
 import { useAppStore } from "@/store";
 import { ConstsNav } from "@/utils/Consts";
 import { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 
 function SuccessPage() {
   const [pageState, setPageState] = useState<NewBookingResponse | null>(null);