diff --git a/package.json b/package.json index d79905d06..a23077024 100644 --- a/package.json +++ b/package.json @@ -52,12 +52,12 @@ "marked": "^4.1.1", "payment": "^2.4.6", "planby": "^0.3.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-helmet": "^6.1.0", - "react-i18next": "^11.10.0", + "react-i18next": "^12.2.2", "react-infinite-scroller": "^1.2.6", - "react-query": "^3.13.10", + "react-query": "^3.39.0", "react-router-dom": "^6.4.0", "wicg-inert": "^3.1.1", "yup": "^0.32.9", @@ -78,8 +78,8 @@ "@types/marked": "^4.0.7", "@types/node": "^17.0.23", "@types/payment": "^2.1.4", - "@types/react": "^17.0.14", - "@types/react-dom": "^17.0.9", + "@types/react": "^18.2.6", + "@types/react-dom": "^18.2.4", "@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/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap index 98154ca18..56a44468f 100644 --- a/src/components/Account/__snapshots__/Account.test.tsx.snap +++ b/src/components/Account/__snapshots__/Account.test.tsx.snap @@ -156,7 +156,6 @@ exports[` > renders and matches snapshot 1`] = ` diff --git a/src/components/Animation/Animation.tsx b/src/components/Animation/Animation.tsx index eed1073fe..fc5ef5da9 100644 --- a/src/components/Animation/Animation.tsx +++ b/src/components/Animation/Animation.tsx @@ -6,6 +6,7 @@ type Props = { open?: boolean; duration?: number; delay?: number; + children?: React.ReactNode; keepMounted?: boolean; onOpenAnimationEnd?: () => void; onCloseAnimationEnd?: () => void; diff --git a/src/components/Animation/Fade/Fade.tsx b/src/components/Animation/Fade/Fade.tsx index c5b880c10..6a5d22db7 100644 --- a/src/components/Animation/Fade/Fade.tsx +++ b/src/components/Animation/Fade/Fade.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties } from 'react'; +import React, { CSSProperties, ReactNode } from 'react'; import Animation, { Status } from '#components/Animation/Animation'; @@ -7,6 +7,7 @@ type Props = { open?: boolean; duration?: number; delay?: number; + children?: ReactNode; keepMounted?: boolean; onOpenAnimationEnd?: () => void; onCloseAnimationEnd?: () => void; diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index cf6a0730b..182c7fba0 100644 --- a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -17,7 +17,6 @@ exports[` > renders and matches snapshot 1`] = ` diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx index a9909b796..834ff306e 100644 --- a/src/components/Shelf/Shelf.tsx +++ b/src/components/Shelf/Shelf.tsx @@ -93,7 +93,7 @@ const Shelf = ({ ); const renderRightControl = useCallback( - (doSlide) => ( + (doSlide: () => void) => (
( + (doSlide: () => void) => (
{ const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow); const onCardClick = useCallback( - (playlistItem, playlistId, type) => { + (playlistItem: PlaylistItem, playlistId: string | undefined, type: ContentType) => { navigate(mediaURL(playlistItem, playlistId, type === PersonalShelf.ContinueWatching)); }, [navigate], diff --git a/src/hooks/useOttAnalytics.ts b/src/hooks/useOttAnalytics.ts index 2b88c2030..381d2d97f 100644 --- a/src/hooks/useOttAnalytics.ts +++ b/src/hooks/useOttAnalytics.ts @@ -11,8 +11,8 @@ const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => { window.jwpltx.time(position, duration); }, []); - const seekHandler = useCallback(({ offset, duration }) => { - window.jwpltx.seek(offset, duration); + const seekHandler = useCallback(({ offset, position }: jwplayer.SeekParam) => { + window.jwpltx.seek(offset, position); }, []); const seekedHandler = useCallback(() => { diff --git a/src/index.tsx b/src/index.tsx index 6b5fc6d38..72970fb75 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,10 +1,18 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import 'wicg-inert'; import { registerSW } from 'virtual:pwa-register'; import App from './App'; -ReactDOM.render(, document.getElementById('root')); +const rootElement = document.getElementById('root'); + +// Use React 18's createRoot API for rendering the app and handle unavailable root element +if (rootElement) { + const root = createRoot(rootElement); + root.render(); +} else { + console.info('Application - rootElement not found'); +} registerSW(); diff --git a/src/pages/Home/Home.test.tsx b/src/pages/Home/Home.test.tsx index a5ce70dbc..ceab105f5 100644 --- a/src/pages/Home/Home.test.tsx +++ b/src/pages/Home/Home.test.tsx @@ -37,6 +37,7 @@ describe('Home Component tests', () => { dataUpdatedAt: 0, error: null, errorUpdatedAt: 0, + errorUpdateCount: 0, failureCount: 0, isError: false, isFetched: false, diff --git a/yarn.lock b/yarn.lock index f260c0330..ccd8b4a12 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1037,7 +1037,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": version "7.17.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941" integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw== @@ -1058,6 +1058,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.20.6": + version "7.21.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200" + integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/runtime@^7.9.2": version "7.17.9" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72" @@ -2114,10 +2121,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@^17.0.9": - version "17.0.13" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.13.tgz#a3323b974ee4280070982b3112351bb1952a7809" - integrity sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ== +"@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== dependencies: "@types/react" "*" @@ -2135,10 +2142,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^17.0.14": - version "17.0.39" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce" - integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug== +"@types/react@*", "@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== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -5034,7 +5041,7 @@ html-encoding-sniffer@^3.0.0: dependencies: whatwg-encoding "^2.0.0" -html-escaper@^2.0.0, html-escaper@^2.0.2: +html-escaper@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== @@ -7446,14 +7453,13 @@ react-app-polyfill@^3.0.0: regenerator-runtime "^0.13.9" whatwg-fetch "^3.6.2" -react-dom@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +react-dom@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.23.0" react-error-boundary@^3.1.0: version "3.1.4" @@ -7477,13 +7483,12 @@ react-helmet@^6.1.0: react-fast-compare "^3.1.1" react-side-effect "^2.1.0" -react-i18next@^11.10.0: - version "11.15.5" - resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.15.5.tgz#3de940a1c5a27956d8265663ca67494881f385e8" - integrity sha512-vBWuVEQgrhZrGKpyv8FmJ7Zs5jRQWl794Tte7yzJ0okZqqi3jd6j2pLYNg441WcREsbIOvWdiDXbY7W6E93p1A== +react-i18next@^12.2.2: + version "12.2.2" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.2.2.tgz#38a6fad11acf4f2abfc5611bdb6b1918d0f47578" + integrity sha512-KBB6buBmVKXUWNxXHdnthp+38gPyBT46hJCAIQ8rX19NFL/m2ahte2KARfIDf2tMnSAL7wwck6eDOd/9zn6aFg== dependencies: - "@babel/runtime" "^7.14.5" - html-escaper "^2.0.2" + "@babel/runtime" "^7.20.6" html-parse-stringify "^3.0.1" react-infinite-scroller@^1.2.6: @@ -7503,10 +7508,10 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-query@^3.13.10: - version "3.34.16" - resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.16.tgz#279ea180bcaeaec49c7864b29d1711ee9f152594" - integrity sha512-7FvBvjgEM4YQ8nPfmAr+lJfbW95uyW/TVjFoi2GwCkF33/S8ajx45tuPHPFGWs4qYwPy1mzwxD4IQfpUDrefNQ== +react-query@^3.39.0: + version "3.39.3" + resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.3.tgz#4cea7127c6c26bdea2de5fb63e51044330b03f35" + integrity sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g== dependencies: "@babel/runtime" "^7.5.5" broadcast-channel "^3.4.1" @@ -7536,13 +7541,12 @@ react-side-effect@^2.1.0: resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3" integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ== -react@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +react@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" read-cache@^1.0.0: version "1.0.0" @@ -7647,6 +7651,11 @@ regenerator-runtime@^0.13.10: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee" integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw== +regenerator-runtime@^0.13.11: + version "0.13.11" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" + integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== + regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9: version "0.13.9" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52" @@ -8003,13 +8012,12 @@ saxes@^5.0.1: dependencies: xmlchars "^2.2.0" -scheduler@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" scss-parser@^1.0.4: version "1.0.5"