feat(project): update React to 18.2.0

jwplayer · Jul 18, 2023 · c98512d · c98512d
1 parent 20318ef
commit c98512d
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -80,8 +80,8 @@
     "@types/marked": "^4.0.7",
     "@types/node": "^17.0.23",
     "@types/payment": "^2.1.4",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "18.2.7",
     "@types/react-helmet": "^6.1.2",
     "@types/react-infinite-scroller": "^1.2.3",
     "@typescript-eslint/eslint-plugin": "^5.17.0",

diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
@@ -189,9 +189,9 @@ function TileDock<T>({
       if (frameRef.current) frameRef.current.style.transition = 'none';
       setTransform(-100);
 
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         if (frameRef.current) frameRef.current.style.transition = transitionBasis;
-      }, 0);
+      });
       setDoAnimationReset(false);
     };
 

diff --git a/src/components/VideoLayout/VideoLayout.tsx b/src/components/VideoLayout/VideoLayout.tsx
@@ -51,11 +51,11 @@ type VideoListProps = {
 type Props = {
   inlineLayout: boolean;
   player: React.ReactNode;
-  // children?: React.ReactNode;
   isLoading: boolean;
   accessModel: AccessModel;
   isLoggedIn: boolean;
   hasSubscription: boolean;
+  children?: React.ReactNode;
   item?: PlaylistItem;
   playlist?: Playlist;
 } & FilterProps &

diff --git a/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx b/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
@@ -91,11 +91,13 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment
           holderNameRequired: true,
         },
       },
-      onAdditionalDetails: async (state: CoreOptions['additionalData']) => {
+      onAdditionalDetails: async (state: AdyenAdditionalEventData) => {
         try {
           setUpdatingOrder(true);
 
-          await finalizeAdyenPayment(orderId, state.data.details);
+          const data = state.data.details as number | undefined;
+
+          await finalizeAdyenPayment(orderId, data);
 
           navigate(paymentSuccessUrl, { replace: true });
         } catch (error: unknown) {

diff --git a/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx b/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
@@ -120,7 +120,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
           holderNameRequired: true,
         },
       },
-      onAdditionalDetails: async (state: CoreOptions['additionalData']) => {
+      onAdditionalDetails: async (state: AdyenAdditionalEventData) => {
         try {
           setProcessing(true);
 

diff --git a/src/containers/ShelfList/ShelfList.tsx b/src/containers/ShelfList/ShelfList.tsx
@@ -11,11 +11,12 @@ import { useAccountStore } from '#src/stores/AccountStore';
 import { PersonalShelf, useConfigStore } from '#src/stores/ConfigStore';
 import ShelfComponent from '#components/Shelf/Shelf';
 import { mediaURL, slugify } from '#src/utils/formatting';
-import type { Content } from '#types/Config';
+import type { Content, ContentType } from '#types/Config';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import { parseAspectRatio, parseTilesDelta } from '#src/utils/collection';
 import InfiniteScrollLoader from '#components/InfiniteScrollLoader/InfiniteScrollLoader';
 import { testId } from '#src/utils/common';
+import type { PlaylistItem } from '#types/playlist';
 
 const INITIAL_ROW_COUNT = 6;
 const LOAD_ROWS_COUNT = 4;
@@ -35,7 +36,7 @@ const ShelfList = ({ rows }: Props) => {
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
 
   const onCardClick = useCallback(
-    (playlistItem, playlistId, type) => {
+    (playlistItem: PlaylistItem, playlistId: string | undefined, type: ContentType) => {
       navigate(mediaURL({ media: playlistItem, playlistId, play: type === PersonalShelf.ContinueWatching }));
     },
     [navigate],

diff --git a/src/pages/LegacySeries/LegacySeries.tsx b/src/pages/LegacySeries/LegacySeries.tsx
@@ -146,31 +146,33 @@ const LegacySeries = () => {
   return (
     <React.Fragment>
       <Helmet>
-        <title>{pageTitle}</title>
-        <link rel="canonical" href={canonicalUrl} />
-        <meta name="description" content={pageDescription} />
-        <meta property="og:description" content={pageDescription} />
-        <meta property="og:title" content={pageTitle} />
-        <meta property="og:type" content={episode ? 'video.episode' : 'video.series'} />
-        {selectedItemImage && <meta property="og:image" content={selectedItemImage?.replace(/^https:/, 'http:')} />}
-        {selectedItemImage && <meta property="og:image:secure_url" content={selectedItemImage?.replace(/^http:/, 'https:')} />}
-        {selectedItemImage && <meta property="og:image:width" content={selectedItemImage ? '720' : ''} />}
-        {selectedItemImage && <meta property="og:image:height" content={selectedItemImage ? '406' : ''} />}
-        <meta name="twitter:title" content={pageTitle} />
-        <meta name="twitter:description" content={pageDescription} />
-        {selectedItemImage && <meta name="twitter:image" content={selectedItemImage} />}
-        <meta property="og:video" content={canonicalUrl.replace(/^https:/, 'http:')} />
-        <meta property="og:video:secure_url" content={canonicalUrl.replace(/^http:/, 'https:')} />
-        <meta property="og:video:type" content="text/html" />
-        <meta property="og:video:width" content="1280" />
-        <meta property="og:video:height" content="720" />
-        {selectedItem.tags &&
-          String(selectedItem.tags)
-            .split(',')
-            .map((tag: string) => <meta property="og:video:tag" content={tag} key={tag} />)}
-        {seriesPlaylist && selectedItem ? (
-          <script type="application/ld+json">{generateLegacyEpisodeJSONLD(seriesPlaylist, episode, episodeMetadata, seriesId)}</script>
-        ) : null}
+        <>
+          <title>{pageTitle}</title>
+          <link rel="canonical" href={canonicalUrl} />
+          <meta name="description" content={pageDescription} />
+          <meta property="og:description" content={pageDescription} />
+          <meta property="og:title" content={pageTitle} />
+          <meta property="og:type" content={episode ? 'video.episode' : 'video.series'} />
+          {selectedItemImage && <meta property="og:image" content={selectedItemImage?.replace(/^https:/, 'http:')} />}
+          {selectedItemImage && <meta property="og:image:secure_url" content={selectedItemImage?.replace(/^http:/, 'https:')} />}
+          {selectedItemImage && <meta property="og:image:width" content={selectedItemImage ? '720' : ''} />}
+          {selectedItemImage && <meta property="og:image:height" content={selectedItemImage ? '406' : ''} />}
+          <meta name="twitter:title" content={pageTitle} />
+          <meta name="twitter:description" content={pageDescription} />
+          {selectedItemImage && <meta name="twitter:image" content={selectedItemImage} />}
+          <meta property="og:video" content={canonicalUrl.replace(/^https:/, 'http:')} />
+          <meta property="og:video:secure_url" content={canonicalUrl.replace(/^http:/, 'https:')} />
+          <meta property="og:video:type" content="text/html" />
+          <meta property="og:video:width" content="1280" />
+          <meta property="og:video:height" content="720" />
+          {selectedItem.tags &&
+            String(selectedItem.tags)
+              .split(',')
+              .map((tag: string) => <meta property="og:video:tag" content={tag} key={tag} />)}
+          {seriesPlaylist && selectedItem ? (
+            <script type="application/ld+json">{generateLegacyEpisodeJSONLD(seriesPlaylist, episode, episodeMetadata, seriesId)}</script>
+          ) : null}
+        </>
       </Helmet>
       <VideoLayout
         item={episode}

diff --git a/src/pages/User/User.test.tsx b/src/pages/User/User.test.tsx
@@ -77,15 +77,15 @@ describe('User Component tests', () => {
   test('Account Page', () => {
     useAccountStore.setState(data);
 
-    mockWindowLocation('/my-account');
+    mockWindowLocation('my-account');
     const { container } = renderWithRouter(<User />);
 
     expect(container).toMatchSnapshot();
   });
 
   test('Payments Page', () => {
     useAccountStore.setState(data);
-    mockWindowLocation('/payments');
+    mockWindowLocation('payments');
     const { container } = renderWithRouter(<User />);
 
     expect(container).toMatchSnapshot();
@@ -128,9 +128,8 @@ describe('User Component tests', () => {
         };
       },
     });
-    //vi.fn().mockImplementation(() => window.location).mockReturnValue('/favorites');
-    // const windowMock = vi.fn().mockReturnValue(window.location).mockReturnValue('/favorites');
-    mockWindowLocation('/favorites');
+
+    mockWindowLocation('favorites');
 
     const { container } = renderWithRouter(<User />);
 

diff --git a/test/testUtils.tsx b/test/testUtils.tsx
@@ -34,10 +34,13 @@ export const wrapper = ({ children }: WrapperProps) => (
 const customRender = (ui: ReactElement, options?: RenderOptions) => render(ui, { wrapper, ...options });
 
 export const mockWindowLocation = (path: string) => {
-  vi.stubGlobal('location', {
-    pathname: path,
-    assign: vi.fn(),
-  });
+  const location = new URL(`https://www.jwplayer.com/${path}`) as unknown as Location;
+
+  if ('location' in globalThis) {
+    // @ts-ignore
+    delete globalThis.location;
+    globalThis.location = location;
+  }
 };
 
 export { customRender as renderWithRouter };
diff --git a/yarn.lock b/yarn.lock
@@ -2275,10 +2275,10 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/react-dom@^18.2.4":
-  version "18.2.4"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.4.tgz#13f25bfbf4e404d26f62ac6e406591451acba9e0"
-  integrity sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==
+"@types/react-dom@18.2.7":
+  version "18.2.7"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
+  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
   dependencies:
     "@types/react" "*"
 
@@ -2296,28 +2296,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
-  version "17.0.39"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
-  integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17":
-  version "17.0.59"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.59.tgz#5aa4e161a356fcb824d81f166e01bad9e82243bb"
-  integrity sha512-gSON5zWYIGyoBcycCE75E9+r6dCC2dHdsrVkOEiIYNU5+Q28HcBAuqvDuxHcCbMfHBHdeT5Tva/AFn3rnMKE4g==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^18.2.6":
-  version "18.2.6"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.6.tgz#5cd53ee0d30ffc193b159d3516c8c8ad2f19d571"
-  integrity sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==
+"@types/react@*", "@types/react@^18.2.15":
+  version "18.2.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.15.tgz#14792b35df676c20ec3cf595b262f8c615a73066"
+  integrity sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"