Updated Libs - React-Router v6 to v7

This commit is contained in:
2026-01-13 20:03:01 +01:00
parent 899d27f468
commit 53ddf1e73c
15 changed files with 63 additions and 90 deletions
+32 -60
View File
@@ -20,7 +20,7 @@
"react-day-picker": "^9.13.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.70.0",
"react-router-dom": "^6.30.2",
"react-router": "^7.12.0",
"swr": "^2.3.8",
"tailwind-merge": "^3.4.0",
"zod": "^3.25.76",
@@ -35,7 +35,6 @@
"@types/node": "^22.15.30",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^8.52.0",
"@typescript-eslint/parser": "^8.52.0",
"@vitejs/plugin-react-swc": "^4.2.2",
@@ -2788,15 +2787,6 @@
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
"license": "MIT"
},
"node_modules/@remix-run/router": {
"version": "1.23.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
"integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
"license": "MIT",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.47",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.47.tgz",
@@ -3573,12 +3563,6 @@
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
"license": "MIT"
},
"node_modules/@types/history": {
"version": "4.7.11",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
"dev": true
},
"node_modules/@types/json-schema": {
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3623,27 +3607,6 @@
"@types/react": "^18.0.0"
}
},
"node_modules/@types/react-router": {
"version": "5.1.20",
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
"integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
"dev": true,
"dependencies": {
"@types/history": "^4.7.11",
"@types/react": "*"
}
},
"node_modules/@types/react-router-dom": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
"integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
"dev": true,
"dependencies": {
"@types/history": "^4.7.11",
"@types/react": "*",
"@types/react-router": "*"
}
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.52.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.52.0.tgz",
@@ -4126,6 +4089,19 @@
"dev": true,
"license": "MIT"
},
"node_modules/cookie": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
"license": "MIT",
"engines": {
"node": ">=18"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/express"
}
},
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5791,35 +5767,25 @@
}
},
"node_modules/react-router": {
"version": "6.30.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
"integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
"version": "7.12.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
"integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.23.1"
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=14.0.0"
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=16.8"
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
},
"node_modules/react-router-dom": {
"version": "6.30.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
"integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
"license": "MIT",
"dependencies": {
"@remix-run/router": "1.23.1",
"react-router": "6.30.2"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-style-singleton": {
@@ -5914,6 +5880,12 @@
"node": ">=10"
}
},
"node_modules/set-cookie-parser": {
"version": "2.7.2",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
"license": "MIT"
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+1 -2
View File
@@ -23,7 +23,7 @@
"react-day-picker": "^9.13.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.70.0",
"react-router-dom": "^6.30.2",
"react-router": "^7.12.0",
"swr": "^2.3.8",
"tailwind-merge": "^3.4.0",
"zod": "^3.25.76",
@@ -38,7 +38,6 @@
"@types/node": "^22.15.30",
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^8.52.0",
"@typescript-eslint/parser": "^8.52.0",
"@vitejs/plugin-react-swc": "^4.2.2",
+1 -1
View File
@@ -1,4 +1,4 @@
import { useNavigate } from "react-router-dom";
import { useNavigate } from "react-router";
import {
AlertDialog,
AlertDialogAction,
+1 -1
View File
@@ -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";
+1 -1
View File
@@ -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() {
+2 -2
View File
@@ -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 + "]";
+1 -1
View File
@@ -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";
+1 -1
View File
@@ -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";
+1 -1
View File
@@ -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";
+14 -12
View File
@@ -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"}>
+2 -2
View File
@@ -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">
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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...
+2 -2
View File
@@ -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 = (
+1 -1
View File
@@ -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);