VideoPress package: update react-router-dom from v5 to v6 (#40709)

* Bump to react-router-dom v6.28.0 * <Switch> → <Routes> * Update useHistory usage * Comment out now-unavailable <Prompt> * Create update-videopress-pkg-react-dom-router_v5_to_v6
Automattic · Dec 30, 2024 · f66d303 · f66d303
1 parent 59b0e8d
commit f66d303
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 34 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/videopress/changelog/update-videopress-pkg-react-dom-router_v5_to_v6 b/projects/packages/videopress/changelog/update-videopress-pkg-react-dom-router_v5_to_v6
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated dependencies.
diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json
@@ -85,7 +85,7 @@
 		"filesize": "8.0.6",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
-		"react-router-dom": "^5.3.4",
+		"react-router-dom": "6.28.0",
 		"tus-js-client": "4.1.0"
 	}
 }
diff --git a/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx b/projects/packages/videopress/src/client/admin/components/admin-page/libraries.tsx
@@ -7,7 +7,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { grid, formatListBullets } from '@wordpress/icons';
 import clsx from 'clsx';
 import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 /**
  * Internal dependencies
  */
@@ -122,7 +122,7 @@ const VideoLibraryWrapper = ( {
 };
 
 export const VideoPressLibrary = ( { videos, totalVideos, loading }: VideoLibraryProps ) => {
-	const history = useHistory();
+	const navigate = useNavigate();
 	const { search } = useVideos();
 	const videosToDisplay = [
 		// First comes video upload errors
@@ -152,7 +152,7 @@ export const VideoPressLibrary = ( { videos, totalVideos, loading }: VideoLibrar
 	};
 
 	const handleClickEditDetails = video => {
-		history.push( `/video/${ video?.id }/edit` );
+		navigate( `/video/${ video?.id }/edit` );
 	};
 
 	const library =

diff --git a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx
@@ -22,7 +22,7 @@ import {
 } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useEffect } from 'react';
-import { useHistory, Prompt, Link } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 /**
  * Internal dependencies
  */
@@ -69,11 +69,11 @@ const Header = ( {
 	videoId: string | number;
 } ) => {
 	const [ isSm ] = useBreakpointMatch( 'sm' );
-	const history = useHistory();
+	const navigate = useNavigate();
 
 	return (
 		<div className={ clsx( styles[ 'header-wrapper' ], { [ styles.small ]: isSm } ) }>
-			<button onClick={ () => history.push( '/' ) } className={ styles[ 'logo-button' ] }>
+			<button onClick={ () => navigate( '/' ) } className={ styles[ 'logo-button' ] }>
 				<JetpackVideoPressLogo />
 			</button>
 			<div className={ styles[ 'header-content' ] }>
@@ -237,18 +237,18 @@ const EditVideoDetails = () => {
 		message: unsavedChangesMessage,
 	} );
 
-	const history = useHistory();
+	const navigate = useNavigate();
 	const { page } = useVideosQuery();
 
 	useEffect( () => {
 		if ( deleted === true ) {
 			const to = page > 1 ? `/?page=${ page }` : '/';
-			history.push( to );
+			navigate( to );
 		}
 	}, [ deleted ] );
 
 	if ( ! canPerformAction ) {
-		history.push( '/' );
+		navigate( '/' );
 	}
 
 	let thumbnail: string | React.JSX.Element = posterImage;
@@ -268,7 +268,9 @@ const EditVideoDetails = () => {
 
 	return (
 		<>
-			<Prompt when={ hasChanges && ! updated && ! deleted } message={ unsavedChangesMessage } />
+			{ /* This is no longer supported as of react-router-dom v6: https://github.com/remix-run/react-router/issues/8139
+				<Prompt when={ hasChanges && ! updated && ! deleted } message={ unsavedChangesMessage } />
+			*/ }
 
 			{ frameSelectorIsOpen && (
 				<VideoThumbnailSelectorModal

diff --git a/...ts/packages/videopress/src/client/admin/components/edit-video-details/use-edit-details.ts b/...ts/packages/videopress/src/client/admin/components/edit-video-details/use-edit-details.ts
@@ -6,7 +6,7 @@ import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 import { useState, useEffect } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 /**
  * Internal dependencies
  */
@@ -103,12 +103,12 @@ const useMetaEdit = ( { videoId, formData, video, updateData } ) => {
 };
 
 export default () => {
-	const history = useHistory();
+	const navigate = useNavigate();
 	const dispatch = useDispatch( STORE_ID );
 	const { isRegistered } = useConnection();
 
 	if ( ! isRegistered ) {
-		history.push( '/' );
+		navigate( '/' );
 	}
 
 	const { videoId: videoIdFromParams } = useParams();

diff --git a/projects/packages/videopress/src/client/admin/hooks/use-search-params/index.ts b/projects/packages/videopress/src/client/admin/hooks/use-search-params/index.ts
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 type SearchParamNameProp = 'page' | 'q';
 
 export const useSearchParams = () => {
 	const location = useLocation();
-	const history = useHistory();
+	const navigate = useNavigate();
 	const searchParams = new URLSearchParams( location.search );
 
 	/**
@@ -46,8 +46,8 @@ export const useSearchParams = () => {
 	 */
 	const update = () => {
 		const searchFragment = '?' + searchParams.toString();
-		if ( searchFragment !== history.location.search ) {
-			history.push( {
+		if ( searchFragment !== location.search ) {
+			navigate( {
 				search: searchFragment,
 			} );
 		}
@@ -57,11 +57,14 @@ export const useSearchParams = () => {
 	 * Force an empty query string.
 	 */
 	const reset = () => {
-		if ( '' !== history.location.search ) {
-			history.replace( {
-				pathname: history.location.pathname,
-				search: '',
-			} );
+		if ( '' !== location.search ) {
+			navigate(
+				{
+					pathname: location.pathname,
+					search: '',
+				},
+				{ replace: true }
+			);
 		}
 	};
 

diff --git a/projects/packages/videopress/src/client/admin/index.js b/projects/packages/videopress/src/client/admin/index.js
@@ -5,7 +5,7 @@ import { ThemeProvider } from '@automattic/jetpack-components';
 import * as WPElement from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from 'react';
-import { HashRouter, Switch, Route, useLocation } from 'react-router-dom';
+import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
 /**
  * Internal dependencies
  */
@@ -50,14 +50,10 @@ const VideoPress = () => {
 		<ThemeProvider>
 			<HashRouter>
 				<ScrollToTop />
-				<Switch>
-					<Route exact path="/">
-						<AdminPage />
-					</Route>
-					<Route path="/video/:videoId/edit">
-						<EditVideoDetails />
-					</Route>
-				</Switch>
+				<Routes>
+					<Route path="/" element={ <AdminPage /> } />
+					<Route path="/video/:videoId/edit" element={ <EditVideoDetails /> } />
+				</Routes>
 			</HashRouter>
 		</ThemeProvider>
 	);