React-Router v6 -> v7

Author: daveearley

frontend/package.json

@@ -35,12 +35,13 @@
     "@mantine/nprogress": "^7.7.1",
     "@mantine/tiptap": "^7.7.1",
     "@react-pdf/renderer": "^3.3.4",
+    "@react-router/node": "^7.1.5",
     "@remix-run/node": "^2.8.1",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.1",
     "@tabler/icons-react": "^2.44.0",
     "@tanstack/react-query": "5.52.2",
-    "@tiptap/extension-image": "^2.11.2",
+    "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-link": "^2.1.13",
     "@tiptap/extension-text-align": "^2.1.13",
     "@tiptap/extension-underline": "^2.1.13",
@@ -61,7 +62,8 @@
     "react-dom": "^18.2.0",
     "react-helmet-async": "^2.0.4",
     "react-qr-code": "^2.0.12",
-    "react-router-dom": "^6.11.2",
+    "react-router": "^7.1.5",
+    "react-router-dom": "^7.1.5",
     "recharts": "2",
     "sirv": "^2.0.4"
   },

frontend/src/components/common/AttendeeList/index.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Avatar, Tooltip, Text, Group } from "@mantine/core";
 import { getInitials } from "../../../utilites/helpers.ts";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { IconExternalLink, IconUsers } from "@tabler/icons-react";
 import classes from './AttendeeList.module.scss';
 import { Order, Product } from "../../../types.ts";

frontend/src/components/common/AttendeeTable/index.tsx

@@ -7,7 +7,7 @@ import {useDisclosure} from "@mantine/hooks";
 import {SendMessageModal} from "../../modals/SendMessageModal";
 import {useState} from "react";
 import {NoResultsSplash} from "../NoResultsSplash";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import Truncate from "../Truncate";
 import {notifications} from "@mantine/notifications";

frontend/src/components/common/CheckInListList/index.tsx

@@ -14,7 +14,7 @@ import {EditCheckInListModal} from "../../modals/EditCheckInListModal";
 import {useDeleteCheckInList} from "../../../mutations/useDeleteCheckInList";
 import {showError, showSuccess} from "../../../utilites/notifications.tsx";
 import {confirmationDialog} from "../../../utilites/confirmationDialog.tsx";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 
 interface CheckInListListProps {
     checkInLists: CheckInList[];

frontend/src/components/common/ErrorDisplay/index.tsx

@@ -1,6 +1,6 @@
 import {Container} from '@mantine/core';
 import classes from './ErrorDisplay.module.scss';
-import {useRouteError} from "react-router-dom";
+import {useRouteError} from "react-router";
 import {t} from "@lingui/macro";
 
 export const ErrorDisplay = () => {

frontend/src/components/common/EventCard/index.tsx

@@ -2,7 +2,7 @@ import {ActionIcon, Button,} from '@mantine/core';
 import {Event, IdParam} from "../../../types.ts";
 import classes from "./EventCard.module.scss";
 import {Card} from "../Card";
-import {NavLink, useNavigate} from "react-router-dom";
+import {NavLink, useNavigate} from "react-router";
 import {
     IconArchive,
     IconCash,

frontend/src/components/common/EventsDashboardStatusButtons/index.tsx

@@ -1,6 +1,6 @@
 import {Button, Group} from "@mantine/core";
 import {t} from "@lingui/macro";
-import {useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router";
 
 interface EventsDashboardStatusButtonsProps {
     baseUrl: string;

frontend/src/components/common/GlobalMenu/index.tsx

@@ -2,7 +2,7 @@ import {Avatar, Menu, UnstyledButton} from "@mantine/core";
 import {getInitials} from "../../../utilites/helpers.ts";
 import {IconLifebuoy, IconLogout, IconSettingsCog, IconUser,} from "@tabler/icons-react";
 import {useGetMe} from "../../../queries/useGetMe.ts";
-import {NavLink} from "react-router-dom";
+import {NavLink} from "react-router";
 import {t} from "@lingui/macro";
 import {authClient} from "../../../api/auth.client.ts";
 import {useDisclosure} from "@mantine/hooks";

frontend/src/components/common/Header/index.tsx

@@ -1,6 +1,6 @@
 import {Container} from '@mantine/core';
 import classes from './Header.module.scss';
-import {NavLink} from "react-router-dom";
+import {NavLink} from "react-router";
 
 interface HeaderProps {
     rightContent?: React.ReactNode;

frontend/src/components/common/NoResultsSplash/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import classes from './NoResultsSplash.module.scss';
-import {useSearchParams} from "react-router-dom";
+import {useSearchParams} from "react-router";
 import {t} from "@lingui/macro";
 
 interface NoResultsSplashProps {

frontend/src/components/common/ProductsTable/SortableCategory/index.tsx

@@ -8,7 +8,7 @@ import {EditProductCategoryModal} from "../../../modals/EditProductCategoryModal
 import {ProductCategory} from "../../../../types.ts";
 import {t} from "@lingui/macro";
 import {useDeleteProductCategory} from "../../../../mutations/useDeleteProductCategory.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {showError, showSuccess} from "../../../../utilites/notifications.tsx";
 import {SortArrows} from "../../SortArrows";
 import {useSortProducts} from "../../../../mutations/useSortProducts.ts";

frontend/src/components/common/QuestionAndAnswerList/index.tsx

@@ -1,7 +1,7 @@
 import {QuestionAnswer} from "../../../types.ts";
 import {ActionIcon, Group, Text, Tooltip} from '@mantine/core';
 import {t} from "@lingui/macro";
-import {NavLink} from "react-router-dom";
+import {NavLink} from "react-router";
 import {IconExternalLink, IconMessageCircle2, IconPackage, IconShoppingCart, IconUser} from "@tabler/icons-react";
 import classes from './QuestionAndAnswerList.module.scss';
 

frontend/src/components/common/QuestionsTable/index.tsx

@@ -22,7 +22,7 @@ import {t} from "@lingui/macro";
 import {useEffect, useState} from "react";
 import {EditQuestionModal} from "../../modals/EditQuestionModal";
 import {useDeleteQuestion} from "../../../mutations/useDeleteQuestion.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {showError, showSuccess} from "../../../utilites/notifications.tsx";
 import {confirmationDialog} from "../../../utilites/confirmationDialog.tsx";
 import {InputGroup} from "../InputGroup";

frontend/src/components/common/ReportTable/index.tsx

@@ -8,7 +8,7 @@ import {DownloadCsvButton} from "../DownloadCsvButton";
 import {Table, TableHead} from "../Table";
 import '@mantine/dates/styles.css';
 import {useGetEventReport} from "../../../queries/useGetEventReport.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {Event} from "../../../types.ts";
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';

frontend/src/components/common/StatBoxes/index.tsx

@@ -2,7 +2,7 @@ import classes from "./StatBoxes.module.scss";
 import {IconCash, IconCreditCardRefund, IconEye, IconReceipt, IconShoppingCart, IconUsers} from "@tabler/icons-react";
 import {Card} from "../Card";
 import {useGetEventStats} from "../../../queries/useGetEventStats.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {t} from "@lingui/macro";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {formatCurrency} from "../../../utilites/currency.ts";

frontend/src/components/common/WidgetEditor/index.tsx

@@ -5,7 +5,7 @@ import {t, Trans} from "@lingui/macro";
 import {matches, useForm} from "@mantine/form";
 import {useEffect, useState} from "react";
 import {CopyButton} from "../CopyButton";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {IconInfoCircle} from "@tabler/icons-react";
 import {useGetEventSettings} from "../../../queries/useGetEventSettings.ts";
 import {Popover} from "../Popover";

frontend/src/components/forms/ProductForm/index.tsx

@@ -27,7 +27,7 @@ import {
     IconTrashOff,
 } from "@tabler/icons-react";
 import {useDisclosure} from "@mantine/hooks";
-import {NavLink, useParams} from "react-router-dom";
+import {NavLink, useParams} from "react-router";
 import {useEffect} from "react";
 import {CustomSelect, ItemProps} from "../../common/CustomSelect";
 import {formatCurrency, getCurrencySymbol} from "../../../utilites/currency.ts";

frontend/src/components/forms/PromoCodeForm/index.tsx

@@ -3,7 +3,7 @@ import {Alert, NumberInput, Select, TextInput} from "@mantine/core";
 import {IconAlertCircle, IconPercentage, IconTicket} from "@tabler/icons-react";
 import {ProductType, PromoCode, PromoCodeDiscountType} from "../../../types.ts";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {LoadingMask} from "../../common/LoadingMask";
 import {t} from "@lingui/macro";
 import {InputGroup} from "../../common/InputGroup";

frontend/src/components/forms/StripeCheckoutForm/index.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 import {PaymentElement, useElements, useStripe} from "@stripe/react-stripe-js";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import * as stripeJs from "@stripe/stripe-js";
 import {Alert, Skeleton} from "@mantine/core";
 import {t} from "@lingui/macro";

frontend/src/components/layouts/AuthLayout/index.tsx

@@ -1,4 +1,4 @@
-import {Navigate, Outlet} from "react-router-dom";
+import {Navigate, Outlet} from "react-router";
 import classes from "./Auth.module.scss";
 import {t} from "@lingui/macro";
 import {useGetMe} from "../../../queries/useGetMe.ts";

frontend/src/components/layouts/CheckIn/index.tsx

@@ -1,4 +1,4 @@
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useGetCheckInListPublic} from "../../../queries/useGetCheckInListPublic.ts";
 import {useState} from "react";
 import {useDebouncedValue, useDisclosure, useNetwork} from "@mantine/hooks";

frontend/src/components/layouts/Checkout/index.tsx

@@ -1,4 +1,4 @@
-import {NavLink, Outlet, useNavigate, useParams} from "react-router-dom";
+import {NavLink, Outlet, useNavigate, useParams} from "react-router";
 import classes from './Checkout.module.scss';
 import {useGetOrderPublic} from "../../../queries/useGetOrderPublic.ts";
 import {t} from "@lingui/macro";

frontend/src/components/layouts/DefaultLayout/index.tsx

@@ -1,4 +1,4 @@
-import {Outlet} from "react-router-dom";
+import {Outlet} from "react-router";
 import {Header} from "../../common/Header";
 import {Container} from "@mantine/core";
 import {GlobalMenu} from "../../common/GlobalMenu";

frontend/src/components/layouts/Event/index.tsx

@@ -1,5 +1,5 @@
 import {Badge, Breadcrumbs, Burger, Button, UnstyledButton, VisuallyHidden} from '@mantine/core';
-import {NavLink, Outlet, useLocation, useParams} from "react-router-dom";
+import {NavLink, Outlet, useLocation, useParams} from "react-router";
 import {
     IconChartPie,
     IconChevronLeft,

frontend/src/components/layouts/ProductWidget/index.tsx

@@ -1,4 +1,4 @@
-import {useLocation, useParams} from "react-router-dom";
+import {useLocation, useParams} from "react-router";
 import '../../../styles/widget/default.scss';
 import {useGetEventPublic} from "../../../queries/useGetEventPublic.ts";
 import SelectProducts from "../../routes/product-widget/SelectProducts";

frontend/src/components/layouts/PublicEvent/index.tsx

@@ -1,4 +1,4 @@
-import {useLoaderData} from "react-router-dom";
+import {useLoaderData} from "react-router";
 import EventHomepage from "../EventHomepage";
 import {Event} from "../../../types";
 

frontend/src/components/modals/CancelOrderModal/index.tsx

@@ -1,5 +1,5 @@
 import {GenericModalProps, IdParam,} from "../../../types.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useGetOrder} from "../../../queries/useGetOrder.ts";
 import {Modal} from "../../common/Modal";

frontend/src/components/modals/CreateAttendeeModal/index.tsx

@@ -1,7 +1,7 @@
 import {Modal} from "../../common/Modal";
 import {GenericModalProps, ProductCategory, ProductType} from "../../../types.ts";
 import {Button} from "../../common/Button";
-import {useNavigate, useParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {useForm} from "@mantine/form";
 import {LoadingOverlay, NumberInput, Select, Switch, TextInput} from "@mantine/core";

frontend/src/components/modals/CreateCapacityAssignmentModal/index.tsx

@@ -6,7 +6,7 @@ import {useForm} from "@mantine/form";
 import {Button} from "@mantine/core";
 import {useCreateCapacityAssignment} from "../../../mutations/useCreateCapacityAssignment.ts";
 import {showSuccess} from "../../../utilites/notifications.tsx";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {NoResultsSplash} from "../../common/NoResultsSplash";

frontend/src/components/modals/CreateCheckInListModal/index.tsx

@@ -6,7 +6,7 @@ import {useForm} from "@mantine/form";
 import {Button} from "@mantine/core";
 import {useCreateCheckInList} from "../../../mutations/useCreateCheckInList.ts";
 import {showSuccess} from "../../../utilites/notifications.tsx";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {NoResultsSplash} from "../../common/NoResultsSplash";

frontend/src/components/modals/CreateEventModal/index.tsx

@@ -1,5 +1,5 @@
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
-import {useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router";
 import {useGetAccount} from "../../../queries/useGetAccount.ts";
 import {Event, GenericModalProps, IdParam, Organizer} from "../../../types.ts";
 import {useEffect, useState} from "react";

frontend/src/components/modals/CreateOrganizerModal/index.tsx

@@ -2,7 +2,7 @@ import {GenericModalProps, Organizer} from "../../../types.ts";
 import {OrganizerCreateForm} from "../../forms/OrganizerForm";
 import {t} from "@lingui/macro";
 import {Modal} from "../../common/Modal";
-import {useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router";
 
 interface CreateOrganizerModalProps extends GenericModalProps {
     onClose: () => void;

frontend/src/components/modals/CreateProductCategoryModal/index.tsx

@@ -6,7 +6,7 @@ import {useForm} from "@mantine/form";
 import {useCreateProductCategory} from "../../../mutations/useCreateProductCategory.ts";
 import {ProductCategoryForm} from "../../forms/ProductCategoryForm";
 import {showSuccess} from "../../../utilites/notifications.tsx";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {IconInfoCircle} from "@tabler/icons-react";
 

frontend/src/components/modals/CreateProductModal/index.tsx

@@ -3,7 +3,7 @@ import {GenericModalProps, IdParam, Product, ProductPriceType, ProductType, TaxA
 import {useForm} from "@mantine/form";
 import {useQueryClient} from "@tanstack/react-query";
 import {notifications} from "@mantine/notifications";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {Modal} from "../../common/Modal";
 import {ProductForm} from "../../forms/ProductForm";
 import {GET_PRODUCTS_QUERY_KEY} from "../../../queries/useGetProducts.ts";

frontend/src/components/modals/CreatePromoCodeModal/index.tsx

@@ -1,6 +1,6 @@
 import {GenericModalProps, PromoCode, PromoCodeDiscountType} from "../../../types.ts";
 import {hasLength, useForm} from "@mantine/form";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {PromoCodeForm} from "../../forms/PromoCodeForm";
 import {Modal} from "../../common/Modal";

frontend/src/components/modals/CreateQuestionModal/index.tsx

@@ -3,7 +3,7 @@ import {GenericModalProps, Question, QuestionRequestData, QuestionType} from "..
 import {useForm} from "@mantine/form";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {notifications} from "@mantine/notifications";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {questionClient} from "../../../api/question.client.ts";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {GET_EVENT_QUESTIONS_QUERY_KEY} from "../../../queries/useGetEventQuestions.ts";

frontend/src/components/modals/DuplicateEventModal/index.tsx

@@ -7,7 +7,7 @@ import {useDuplicateEvent} from "../../../mutations/useDuplicateEvent.ts";
 import {Editor} from "../../common/Editor";
 import {InputGroup} from "../../common/InputGroup";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
-import {useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router";
 import {useEffect} from "react";
 import {utcToTz} from "../../../utilites/dates.ts";
 import {showSuccess} from "../../../utilites/notifications.tsx";

frontend/src/components/modals/EditCapacityAssignmentModal/index.tsx

@@ -5,7 +5,7 @@ import {CapacityAssigmentForm} from "../../forms/CapaciyAssigmentForm";
 import {useForm} from "@mantine/form";
 import {Button} from "@mantine/core";
 import {showSuccess} from "../../../utilites/notifications.tsx";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useEditCapacityAssignment} from "../../../mutations/useEditCapacityAssignment.ts";

frontend/src/components/modals/EditCheckInListModal/index.tsx

@@ -5,7 +5,7 @@ import {CheckInListForm} from "../../forms/CheckInListForm";
 import {useForm} from "@mantine/form";
 import {Alert, Button, Center, Loader} from "@mantine/core";
 import {showSuccess} from "../../../utilites/notifications.tsx";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useEditCheckInList} from "../../../mutations/useEditCheckInList.ts";

frontend/src/components/modals/EditProductCategoryModal/index.tsx

@@ -4,7 +4,7 @@ import {t} from "@lingui/macro";
 import {LoadingMask} from "../../common/LoadingMask";
 import {Button} from "@mantine/core";
 import {useGetEventProductCategory} from "../../../queries/useGetProductCategory.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useEditProductCategory} from "../../../mutations/useEditProductCategory.ts";
 import {useForm} from "@mantine/form";
 import {useEffect} from "react";

frontend/src/components/modals/EditProductModal/index.tsx

@@ -1,7 +1,7 @@
 import {Button} from "@mantine/core";
 import {GenericModalProps, IdParam, Product, ProductPriceType, ProductType} from "../../../types.ts";
 import {useForm} from "@mantine/form";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useEffect} from "react";
 import {ProductForm} from "../../forms/ProductForm";
 import {Modal} from "../../common/Modal";

frontend/src/components/modals/EditPromoCodeModal/index.tsx

@@ -1,6 +1,6 @@
 import {GenericModalProps, PromoCode} from "../../../types.ts";
 import {hasLength, useForm} from "@mantine/form";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useFormErrorResponseHandler} from "../../../hooks/useFormErrorResponseHandler.tsx";
 import {PromoCodeForm} from "../../forms/PromoCodeForm";
 import {Modal} from "../../common/Modal";

frontend/src/components/modals/EditQuestionModal/index.tsx

@@ -3,7 +3,7 @@ import {GenericModalProps, IdParam, Question, QuestionRequestData, QuestionType}
 import {useForm} from "@mantine/form";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {notifications} from "@mantine/notifications";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {questionClient} from "../../../api/question.client.ts";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {GET_EVENT_QUESTIONS_QUERY_KEY} from "../../../queries/useGetEventQuestions.ts";

frontend/src/components/modals/EditUserModal/index.tsx

@@ -9,7 +9,7 @@ import {IconUser, IconUserShield} from "@tabler/icons-react";
 import {showSuccess} from "../../../utilites/notifications.tsx";
 import {UpdateUserRequest} from "../../../api/user.client.ts";
 import {useEditUser} from "../../../mutations/useEditUser.ts";
-import {NavLink} from "react-router-dom";
+import {NavLink} from "react-router";
 import {InputGroup} from "../../common/InputGroup";
 
 interface EditUserModalProps extends GenericModalProps {

frontend/src/components/modals/ManageAttendeeModal/index.tsx

@@ -1,4 +1,4 @@
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useGetAttendee} from "../../../queries/useGetAttendee.ts";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useGetOrder} from "../../../queries/useGetOrder.ts";

frontend/src/components/modals/ManageOrderModal/index.tsx

@@ -1,5 +1,5 @@
 import {GenericModalProps, IdParam, Product, QuestionAnswer} from "../../../types.ts";
-import {useParams} from "react-router-dom";
+import {useParams} from "react-router";
 import {useGetEvent} from "../../../queries/useGetEvent.ts";
 import {useGetOrder} from "../../../queries/useGetOrder.ts";
 import {OrderSummary} from "../../common/OrderSummary";