From a165d740459fa2f20b4ab1263efcddef4339d0f3 Mon Sep 17 00:00:00 2001 From: tbradsha <32492176+tbradsha@users.noreply.github.com> Date: Fri, 20 Dec 2024 11:47:44 -0700 Subject: [PATCH 1/5] Bump to react-router-dom v6.28.0 --- pnpm-lock.yaml | 35 +++++++++++++++++++++-- projects/packages/videopress/package.json | 2 +- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 480cdf0529f9e..1a6f00298b42f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2951,8 +2951,8 @@ importers: specifier: 18.3.1 version: 18.3.1(react@18.3.1) react-router-dom: - specifier: ^5.3.4 - version: 5.3.4(react@18.3.1) + specifier: 6.28.0 + version: 6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tus-js-client: specifier: 4.1.0 version: 4.1.0 @@ -6750,6 +6750,10 @@ packages: resolution: {integrity: sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==} engines: {node: '>=14'} + '@remix-run/router@1.21.0': + resolution: {integrity: sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==} + engines: {node: '>=14.0.0'} + '@remix-run/router@1.5.0': resolution: {integrity: sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==} engines: {node: '>=14'} @@ -12959,6 +12963,13 @@ packages: react: '>=16.8' react-dom: '>=16.8' + react-router-dom@6.28.0: + resolution: {integrity: sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + react-router-dom@6.6.2: resolution: {integrity: sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==} engines: {node: '>=14'} @@ -12994,6 +13005,12 @@ packages: peerDependencies: react: '>=16.8' + react-router@6.28.0: + resolution: {integrity: sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-router@6.6.2: resolution: {integrity: sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==} engines: {node: '>=14'} @@ -17026,6 +17043,8 @@ snapshots: '@remix-run/router@1.2.1': {} + '@remix-run/router@1.21.0': {} + '@remix-run/router@1.5.0': {} '@remix-run/router@1.7.1': {} @@ -26271,6 +26290,13 @@ snapshots: react-dom: 18.3.1(react@18.3.1) react-router: 6.21.0(react@18.3.1) + react-router-dom@6.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + '@remix-run/router': 1.21.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-router: 6.28.0(react@18.3.1) + react-router-dom@6.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@remix-run/router': 1.2.1 @@ -26311,6 +26337,11 @@ snapshots: '@remix-run/router': 1.14.0 react: 18.3.1 + react-router@6.28.0(react@18.3.1): + dependencies: + '@remix-run/router': 1.21.0 + react: 18.3.1 + react-router@6.6.2(react@18.3.1): dependencies: '@remix-run/router': 1.2.1 diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json index 0379e51d3947b..b18f709130bb6 100644 --- 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" } } From 2f73154afb1a7cb150a51f1f25f20c079173077a Mon Sep 17 00:00:00 2001 From: tbradsha <32492176+tbradsha@users.noreply.github.com> Date: Fri, 20 Dec 2024 12:00:04 -0700 Subject: [PATCH 2/5] =?UTF-8?q?=20=E2=86=92=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../packages/videopress/src/client/admin/index.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/projects/packages/videopress/src/client/admin/index.js b/projects/packages/videopress/src/client/admin/index.js index e6d5735744add..e8f02b0a7fd8c 100644 --- 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 = () => { - - - - - - - - + + } /> + } /> + ); From b90dc66e858497b20ce15cd93f437e821b869156 Mon Sep 17 00:00:00 2001 From: tbradsha <32492176+tbradsha@users.noreply.github.com> Date: Fri, 20 Dec 2024 12:10:33 -0700 Subject: [PATCH 3/5] Update useHistory usage --- .../admin/components/admin-page/libraries.tsx | 6 +++--- .../components/edit-video-details/index.tsx | 12 +++++------ .../edit-video-details/use-edit-details.ts | 6 +++--- .../admin/hooks/use-search-params/index.ts | 21 +++++++++++-------- 4 files changed, 24 insertions(+), 21 deletions(-) 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 index adfb95ad11e0a..a80bb2b3c40f6 100644 --- 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 index 4007752525353..9c3101e5b25d4 100644 --- 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, Prompt, 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 (
-
@@ -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; diff --git a/projects/packages/videopress/src/client/admin/components/edit-video-details/use-edit-details.ts b/projects/packages/videopress/src/client/admin/components/edit-video-details/use-edit-details.ts index aa148c4099be2..4e89a3f898d9a 100644 --- a/projects/packages/videopress/src/client/admin/components/edit-video-details/use-edit-details.ts +++ b/projects/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 index 346c4b81df69c..8a236ce353c58 100644 --- 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 } + ); } }; From 45d2eda6a002f599fec78e2ba0bacc40f4644d1f Mon Sep 17 00:00:00 2001 From: tbradsha <32492176+tbradsha@users.noreply.github.com> Date: Fri, 20 Dec 2024 12:39:35 -0700 Subject: [PATCH 4/5] Comment out now-unavailable --- .../client/admin/components/edit-video-details/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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 index 9c3101e5b25d4..10bca668b797a 100644 --- 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 { useNavigate, Prompt, Link } from 'react-router-dom'; +import { useNavigate, Link } from 'react-router-dom'; /** * Internal dependencies */ @@ -268,7 +268,9 @@ const EditVideoDetails = () => { return ( <> - + { /* This is no longer supported as of react-router-dom v6: https://github.com/remix-run/react-router/issues/8139 + + */ } { frameSelectorIsOpen && ( Date: Fri, 20 Dec 2024 12:40:48 -0700 Subject: [PATCH 5/5] Create update-videopress-pkg-react-dom-router_v5_to_v6 --- .../changelog/update-videopress-pkg-react-dom-router_v5_to_v6 | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/videopress/changelog/update-videopress-pkg-react-dom-router_v5_to_v6 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 new file mode 100644 index 0000000000000..13cbf3392f78d --- /dev/null +++ b/projects/packages/videopress/changelog/update-videopress-pkg-react-dom-router_v5_to_v6 @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Updated dependencies.