Fix typescript and bump redux

icpc · Apr 9, 2024 · efe9eb6 · efe9eb6
1 parent 7f7ce10
commit efe9eb6
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 56 deletions.
diff --git a/src/frontend/overlay/package.json b/src/frontend/overlay/package.json
@@ -3,8 +3,11 @@
   "version": "3.1.0",
   "private": true,
   "dependencies": {
+    "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "^1.9.7",
+    "@types/react-dom": "^18.2.24",
     "@vitejs/plugin-react": "^4.0.3",
+    "typescript": "^5.4.4",
     "hls.js": "^1.5.6",
     "lodash": "^4.17.21",
     "luxon": "^2.3.1",
@@ -13,12 +16,11 @@
     "react": "^18.2.0",
     "react-components": "^0.5.1",
     "react-dom": "^18.2.0",
-    "react-redux": "^7.2.6",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.3.0",
     "react-transition-group": "^4.4.2",
-    "redux": "^4.1.2",
+    "redux": "^5.0.1",
     "redux-deep-persist": "^1.0.6",
-    "@redux-devtools/extension": "^3.3.0",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.1",
     "sass": "^1.58.0",

diff --git a/src/frontend/overlay/src/components/organisms/holder/ContestantViewHolder.tsx b/src/frontend/overlay/src/components/organisms/holder/ContestantViewHolder.tsx
@@ -160,13 +160,12 @@ export const TeamWebRTCGrabberVideoWrapper = ({ media: { url, peerName, streamTy
         {...props}/>);
 };
 
-interface HlsPlayerProps
-    extends React.VideoHTMLAttributes<HTMLVideoElement> {
+type HlsPlayerProps = {
     src: string;
     jwtToken?: string;
     // onCanPlay: () => void;
     onError?: () => void;
-}
+} & React.VideoHTMLAttributes<HTMLVideoElement>
 
 function HlsPlayer({
     src,

diff --git a/src/frontend/overlay/src/redux/hooks.ts b/src/frontend/overlay/src/redux/hooks.ts
@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import type { RootState, AppDispatch } from "./store";
 
-// Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch;
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector =useSelector.withTypes<RootState>();