update to React 19

package.json

@@ -1,22 +1,22 @@
 {
   "name": "portfolio",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "homepage": "https://francoborrelli.github.io/portfolio/",
   "private": true,
   "dependencies": {
-    "antd": "^5.21.3",
-    "devicons-react": "^1.3.0",
-    "html-react-parser": "^5.1.18",
+    "antd": "^5.22.4",
+    "devicons-react": "^1.4.0",
+    "html-react-parser": "^5.2.0",
     "i18next": "^23.15.2",
     "lodash": "^4.17.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-full-screen": "^1.1.1",
     "react-i18next": "^15.0.2",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-player-controls": "^1.1.0",
-    "react-redux": "^9.1.2",
-    "react-router-dom": "^6.26.1",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.0.2",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",
     "tinycolor2": "^1.6.0"
@@ -48,19 +48,19 @@
     ]
   },
   "devDependencies": {
-    "@reduxjs/toolkit": "^2.2.8",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^29.5.13",
-    "@types/lodash": "^4.17.10",
-    "@types/node": "^22.7.5",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@reduxjs/toolkit": "^2.5.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@types/tinycolor2": "^1.4.6",
     "gh-pages": "^6.2.0",
-    "sass": "^1.79.5",
+    "sass": "^1.82.0",
     "typescript": "^4.4.2",
-    "web-vitals": "^4.2.3"
+    "web-vitals": "^4.2.4"
   }
 }

src/App.tsx

@@ -30,7 +30,7 @@ window.addEventListener('resize', () => {
 });
 
 const RootComponent = () => {
-  const container = useRef<HTMLDivElement>(null);
+  const container = useRef<HTMLDivElement | null>(null);
   const language = useAppSelector((state) => state.language.language);
 
   useEffect(() => {

src/components/Layout/components/Navbar/NavigationButton.tsx

@@ -4,7 +4,7 @@ import { Tooltip } from '../../../Tooltip';
 interface NavigationButtonProps {
   onClick: () => void;
   text: string;
-  icon: JSX.Element;
+  icon: React.ReactElement;
 }
 const NavigationButton: FC<NavigationButtonProps> = ({ onClick, text, icon }) => {
   return (

src/pages/Playlist/header.tsx

@@ -15,7 +15,7 @@ import { PlayCircleButton } from './playCircle';
 
 interface PlaylistHeaderProps {
   playlist: Playlist;
-  container: RefObject<HTMLDivElement>;
+  container: RefObject<HTMLDivElement | null>;
 }
 
 export const PlaylistHeader: FC<PlaylistHeaderProps> = ({ playlist, container }) => {

src/pages/Playlist/index.tsx

@@ -13,7 +13,7 @@ import { playlists } from '../../constants/cv';
 import { useAppDispatch } from '../../store/store';
 import { playlistActions } from '../../store/slices/playlist';
 
-const PlaylistView: FC<{ container: RefObject<HTMLDivElement> }> = (props) => {
+const PlaylistView: FC<{ container: RefObject<HTMLDivElement | null> }> = (props) => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const { playlistId } = useParams();