Updated source code to react-router 6

src/short-urls/EditShortUrl.tsx

@@ -1,9 +1,9 @@
 import { FC, useEffect, useMemo } from 'react';
-import { RouteComponentProps } from 'react-router';
 import { Button, Card } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { ExternalLink } from 'react-external-link';
+import { useLocation, useParams } from 'react-router-dom';
 import { SelectedServer } from '../servers/data';
 import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
 import { OptionalString } from '../utils/utils';
@@ -11,13 +11,13 @@ import { parseQuery } from '../utils/helpers/query';
 import Message from '../utils/Message';
 import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
-import { useToggle } from '../utils/helpers/hooks';
+import { useGoBack, useToggle } from '../utils/helpers/hooks';
 import { ShortUrlFormProps } from './ShortUrlForm';
 import { ShortUrlDetail } from './reducers/shortUrlDetail';
 import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
 import { ShortUrlEdition } from './reducers/shortUrlEdition';
 
-interface EditShortUrlConnectProps extends RouteComponentProps<{ shortCode: string }> {
+interface EditShortUrlConnectProps {
   settings: Settings;
   selectedServer: SelectedServer;
   shortUrlDetail: ShortUrlDetail;
@@ -48,9 +48,6 @@ const getInitialState = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSetting
 };
 
 export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
-  history: { goBack },
-  match: { params },
-  location: { search },
   settings: { shortUrlCreation: shortUrlCreationSettings },
   selectedServer,
   shortUrlDetail,
@@ -58,6 +55,9 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
   shortUrlEdition,
   editShortUrl,
 }: EditShortUrlConnectProps) => {
+  const { search } = useLocation();
+  const params = useParams<{ shortCode: string }>();
+  const goBack = useGoBack();
   const { loading, error, errorData, shortUrl } = shortUrlDetail;
   const { saving, error: savingError, errorData: savingErrorData } = shortUrlEdition;
   const { domain } = parseQuery<{ domain?: string }>(search);
@@ -68,7 +68,7 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
   const [ savingSucceeded,, isSuccessful, isNotSuccessful ] = useToggle();
 
   useEffect(() => {
-    getShortUrlDetail(params.shortCode, domain);
+    params.shortCode && getShortUrlDetail(params.shortCode, domain);
   }, []);
 
   if (loading) {

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -2,22 +2,19 @@ import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, pipe } from 'ramda';
 import { parseISO } from 'date-fns';
-import { RouteChildrenProps } from 'react-router-dom';
 import SearchField from '../utils/SearchField';
 import Tag from '../tags/helpers/Tag';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
 import { formatIsoDate } from '../utils/helpers/date';
 import ColorGenerator from '../utils/services/ColorGenerator';
 import { DateRange } from '../utils/dates/types';
-import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
+import { useShortUrlsQuery } from './helpers/hooks';
 import './ShortUrlsFilteringBar.scss';
 
-export type ShortUrlsFilteringProps = RouteChildrenProps<ShortUrlListRouteParams>;
-
 const dateOrNull = (date?: string) => date ? parseISO(date) : null;
 
-const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => (props: ShortUrlsFilteringProps) => {
-  const [{ search, tags, startDate, endDate }, toFirstPage ] = useShortUrlsQuery(props);
+const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => () => {
+  const [{ search, tags, startDate, endDate }, toFirstPage ] = useShortUrlsQuery();
   const selectedTags = tags?.split(',') ?? [];
   const setDates = pipe(
     ({ startDate, endDate }: DateRange) => ({

src/short-urls/ShortUrlsList.tsx

@@ -1,7 +1,7 @@
 import { pipe } from 'ramda';
 import { FC, useEffect, useMemo, useState } from 'react';
-import { RouteComponentProps } from 'react-router';
 import { Card } from 'reactstrap';
+import { useParams } from 'react-router-dom';
 import { OrderingDropdown } from '../utils/OrderingDropdown';
 import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
 import { getServerId, SelectedServer } from '../servers/data';
@@ -13,10 +13,10 @@ import { DEFAULT_SHORT_URLS_ORDERING, Settings } from '../settings/reducers/sett
 import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsTableProps } from './ShortUrlsTable';
 import Paginator from './Paginator';
-import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
+import { useShortUrlsQuery } from './helpers/hooks';
 import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from './data';
 
-interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams> {
+interface ShortUrlsListProps {
   selectedServer: SelectedServer;
   shortUrlsList: ShortUrlsListState;
   listShortUrls: (params: ShlinkShortUrlsListParams) => void;
@@ -25,15 +25,13 @@ interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams
 
 const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, ShortUrlsFilteringBar: FC) => boundToMercureHub(({
   listShortUrls,
-  match,
-  location,
-  history,
   shortUrlsList,
   selectedServer,
   settings,
 }: ShortUrlsListProps) => {
   const serverId = getServerId(selectedServer);
-  const [{ tags, search, startDate, endDate, orderBy }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
+  const { page } = useParams();
+  const [{ tags, search, startDate, endDate, orderBy }, toFirstPage ] = useShortUrlsQuery();
   const [ actualOrderBy, setActualOrderBy ] = useState(
     // This separated state handling is needed to be able to fall back to settings value, but only once when loaded
     orderBy ?? settings.shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING,
@@ -55,14 +53,14 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, ShortUrlsFilteri
 
   useEffect(() => {
     listShortUrls({
-      page: match.params.page,
+      page,
       searchTerm: search,
       tags: selectedTags,
       startDate,
       endDate,
       orderBy: actualOrderBy,
     });
-  }, [ match.params.page, search, selectedTags, startDate, endDate, actualOrderBy ]);
+  }, [ page, search, selectedTags, startDate, endDate, actualOrderBy ]);
 
   return (
     <>

src/short-urls/helpers/hooks.ts

@@ -1,11 +1,10 @@
-import { RouteChildrenProps } from 'react-router-dom';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { useMemo } from 'react';
 import { isEmpty, pipe } from 'ramda';
 import { parseQuery, stringifyQuery } from '../../utils/helpers/query';
 import { ShortUrlsOrder, ShortUrlsOrderableFields } from '../data';
 import { orderToString, stringToOrder } from '../../utils/helpers/ordering';
 
-type ServerIdRouteProps = RouteChildrenProps<{ serverId: string }>;
 type ToFirstPage = (extra: Partial<ShortUrlsFiltering>) => void;
 
 export interface ShortUrlListRouteParams {
@@ -28,9 +27,11 @@ interface ShortUrlsFiltering extends ShortUrlsQueryCommon {
   orderBy?: ShortUrlsOrder;
 }
 
-export const useShortUrlsQuery = (
-  { history, location, match }: ServerIdRouteProps,
-): [ShortUrlsFiltering, ToFirstPage] => {
+export const useShortUrlsQuery = (): [ShortUrlsFiltering, ToFirstPage] => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const params = useParams<{ serverId: string }>();
+
   const query = useMemo(
     pipe(
       () => parseQuery<ShortUrlsQuery>(location.search),
@@ -47,7 +48,7 @@ export const useShortUrlsQuery = (
     const evolvedQuery = stringifyQuery(normalizedQuery);
     const queryString = isEmpty(evolvedQuery) ? '' : `?${evolvedQuery}`;
 
-    history.push(`/server/${match?.params.serverId}/list-short-urls/1${queryString}`);
+    navigate(`/server/${params.serverId}/list-short-urls/1${queryString}`);
   };
 
   return [ query, toFirstPageWithExtra ];

src/short-urls/services/provideServices.ts

@@ -1,4 +1,4 @@
-import Bottle, { Decorator } from 'bottlejs';
+import Bottle from 'bottlejs';
 import ShortUrlsFilteringBar from '../ShortUrlsFilteringBar';
 import ShortUrlsList from '../ShortUrlsList';
 import ShortUrlsRow from '../helpers/ShortUrlsRow';
@@ -17,7 +17,7 @@ import { ShortUrlForm } from '../ShortUrlForm';
 import { EditShortUrl } from '../EditShortUrl';
 import { getShortUrlDetail } from '../reducers/shortUrlDetail';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable', 'ShortUrlsFilteringBar');
   bottle.decorator('ShortUrlsList', connect(
@@ -49,9 +49,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('QrCodeModal', QrCodeModal, 'ImageDownloader', 'ForServerVersion');
   bottle.decorator('QrCodeModal', connect([ 'selectedServer' ]));
 
-  // Services
   bottle.serviceFactory('ShortUrlsFilteringBar', ShortUrlsFilteringBar, 'ColorGenerator');
-  bottle.decorator('ShortUrlsFilteringBar', withRouter);
 
   // Actions
   bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');