chore(deps): update dependency @types/react to v18 (#8)

renovate[bot] · mikan3rd · web-flow · commit 701a368779d8 · 2022-07-18T19:56:12.000+09:00
* chore(deps): update dependency @types/react to v18

* chore: yarn upgrade

* fix: type-check

Co-authored-by: renovate[bot] &lt;29139614+renovate[bot]@users.noreply.github.com&gt;
Co-authored-by: mikan3rd &lt;hiroki.ota@zenkigen.jp&gt;
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@types/crypto-js": "4.1.1",
     "@types/jsrsasign": "10.5.1",
     "@types/lodash": "4.14.182",
-    "@types/react": "17.0.47",
+    "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
     "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "5.30.6",
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,11 @@
 import { useCallback, useContext, useEffect, useMemo, useReducer, useState } from "react";
 
-import ZoomVideo, { ConnectionState } from "@zoom/videosdk";
+import ZoomVideo, {
+  ConnectionState,
+  event_connection_change,
+  event_dial_out_change,
+  event_media_sdk_change,
+} from "@zoom/videosdk";
 import { Modal, message } from "antd";
 import { produce } from "immer";
 import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
@@ -139,7 +144,7 @@ function App(props: AppProps) {
     };
   }, [signature, zmClient, topic, name, password, webEndpoint, galleryViewWithoutSAB]);
   const onConnectionChange = useCallback(
-    (payload) => {
+    (payload: Parameters<typeof event_connection_change>[0]) => {
       if (payload.state === ConnectionState.Reconnecting) {
         setIsLoading(true);
         setIsFailover(true);
@@ -153,7 +158,7 @@ function App(props: AppProps) {
         if (isFailover) {
           setIsLoading(false);
         }
-      } else if (payload.state === ConnectionState.Closed) {
+      } else {
         setStatus("closed");
         dispatch({ type: "reset-media" });
         if (payload.reason === "ended by host") {
@@ -166,19 +171,15 @@ function App(props: AppProps) {
     },
     [isFailover],
   );
-  const onMediaSDKChange = useCallback((payload) => {
+  const onMediaSDKChange = useCallback((payload: Parameters<typeof event_media_sdk_change>[0]) => {
     const { action, type, result } = payload;
     dispatch({ type: `${type}-${action}`, payload: result === "success" });
   }, []);
 
-  const onDialoutChange = useCallback((payload) => {
+  const onDialoutChange = useCallback((payload: Parameters<typeof event_dial_out_change>[0]) => {
     console.info("onDialoutChange", payload);
   }, []);
 
-  const onAudioMerged = useCallback((payload) => {
-    console.info("onAudioMerged", payload);
-  }, []);
-
   const onLeaveOrJoinSession = useCallback(async () => {
     if (status === "closed") {
       setIsLoading(true);
@@ -193,14 +194,13 @@ function App(props: AppProps) {
     zmClient.on("connection-change", onConnectionChange);
     zmClient.on("media-sdk-change", onMediaSDKChange);
     zmClient.on("dialout-state-change", onDialoutChange);
-    zmClient.on("merged-audio", onAudioMerged);
+
     return () => {
       zmClient.off("connection-change", onConnectionChange);
       zmClient.off("media-sdk-change", onMediaSDKChange);
       zmClient.off("dialout-state-change", onDialoutChange);
-      zmClient.off("merged-audio", onAudioMerged);
     };
-  }, [zmClient, onConnectionChange, onMediaSDKChange, onDialoutChange, onAudioMerged]);
+  }, [zmClient, onConnectionChange, onMediaSDKChange, onDialoutChange]);
   return (
     <div className="App">
       {loading && <LoadingLayer content={loadingText} />}
diff --git a/src/feature/chat/chat.tsx b/src/feature/chat/chat.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 
-import { ChatPrivilege } from "@zoom/videosdk";
+import { ChatPrivilege, event_chat_privilege_change } from "@zoom/videosdk";
 import { Input } from "antd";
 import { produce } from "immer";
 
@@ -60,7 +60,7 @@ const ChatContainer = () => {
     [chatWrapRef],
   );
   const onChatPrivilegeChange = useCallback(
-    (payload) => {
+    (payload: Parameters<typeof event_chat_privilege_change>[0]) => {
       setChatPrivilege(payload.chatPrivilege);
       if (chatClient !== null) {
         setChatReceivers(chatClient.getReceivers());
@@ -103,7 +103,7 @@ const ChatContainer = () => {
     }
   }, [chatReceivers, chatUser]);
   const setChatUserId = useCallback(
-    (userId) => {
+    (userId: number) => {
       const user = chatReceivers.find((u) => u.userId === userId);
       if (user !== undefined) {
         setChatUser(user);
diff --git a/src/feature/chat/component/chat-receiver.tsx b/src/feature/chat/component/chat-receiver.tsx
@@ -48,7 +48,7 @@ const ChatReceiverContainer = (props: ChatReceiverProps) => {
     </MenuItem>
   ));
   const onMenuItemClick = useCallback(
-    ({ key }) => {
+    ({ key }: { key: string }) => {
       const userId = Number(key);
       if (userId !== selectedChatUser?.userId) {
         setChatUser(userId);
@@ -57,7 +57,7 @@ const ChatReceiverContainer = (props: ChatReceiverProps) => {
     [selectedChatUser, setChatUser],
   );
   const onMenuItemPrivilegeClick = useCallback(
-    ({ key }) => {
+    ({ key }: { key: string }) => {
       const privilege = Number(key);
       if (chatPrivilege !== privilege) {
         chatClient?.setPrivilege(privilege);
diff --git a/src/feature/command/command.tsx b/src/feature/command/command.tsx
@@ -119,7 +119,7 @@ const CommandContainer = () => {
     }
   }, [commandReceivers, command]);
   const setCommandUserId = useCallback(
-    (userId) => {
+    (userId: number) => {
       const user = commandReceivers.find((u) => u.userId === userId);
       if (user !== undefined) {
         setCommandUser(user);
diff --git a/src/feature/command/component/cmd-receiver.tsx b/src/feature/command/component/cmd-receiver.tsx
@@ -33,7 +33,7 @@ const CommandReceiverContainer = (props: CommandReceiverProps) => {
   ));
 
   const onMenuItemClick = useCallback(
-    ({ key }) => {
+    ({ key }: { key: string }) => {
       const userId = Number(key);
       if (userId !== selectedChatUser?.userId) {
         setCommandUser(userId);
diff --git a/src/feature/video/components/audio-video-statistic.tsx b/src/feature/video/components/audio-video-statistic.tsx
@@ -1,11 +1,17 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
 
-import { AudioQosData, VideoQosData } from "@zoom/videosdk";
+import {
+  AudioQosData,
+  VideoQosData,
+  event_audio_statistic_data_change,
+  event_video_statistic_data_change,
+} from "@zoom/videosdk";
 import { Modal, Table, Tabs } from "antd";
 
 import MediaContext from "../../../context/media-context";
 import ZoomContext from "../../../context/zoom-context";
 import { useMount, useUnmount } from "../../../hooks";
+
 interface AudioVideoStatisticModelProps {
   visible: boolean;
   defaultTab?: string;
@@ -180,7 +186,7 @@ const AudioVideoStatisticModel = (props: AudioVideoStatisticModelProps) => {
     }
   };
 
-  const onAudioStatisticChange = useCallback((payload) => {
+  const onAudioStatisticChange = useCallback((payload: Parameters<typeof event_audio_statistic_data_change>[0]) => {
     const {
       data: { encoding, ...restProps },
     } = payload;
@@ -195,7 +201,8 @@ const AudioVideoStatisticModel = (props: AudioVideoStatisticModelProps) => {
       }, 2000);
     }
   }, []);
-  const onVideoStatisticChange = useCallback((payload) => {
+
+  const onVideoStatisticChange = useCallback((payload: Parameters<typeof event_video_statistic_data_change>[0]) => {
     const {
       data: { encoding, ...restProps },
     } = payload;
diff --git a/src/feature/video/components/video-footer.tsx b/src/feature/video/components/video-footer.tsx
@@ -8,6 +8,11 @@ import {
   PhoneCallCountry,
   RecordingStatus,
   VideoCapturingState,
+  event_current_audio_change,
+  event_dial_out_change,
+  event_passively_stop_share,
+  event_share_audio_change,
+  event_video_capturing_change,
 } from "@zoom/videosdk";
 import { message } from "antd";
 import classNames from "classnames";
@@ -158,21 +163,23 @@ const VideoFooter = (props: VideoFooterProps) => {
     }
     return Promise.resolve();
   };
-  const onHostAudioMuted = useCallback((payload) => {
+  const onHostAudioMuted = useCallback((payload: Parameters<typeof event_current_audio_change>[0]) => {
     const { action, source, type } = payload;
     if (action === AudioChangeAction.Join) {
       setIsStartedAudio(true);
-      setAudio(type);
+      if (type !== undefined) {
+        setAudio(type);
+      }
     } else if (action === AudioChangeAction.Leave) {
       setIsStartedAudio(false);
     } else if (action === AudioChangeAction.Muted) {
       setIsMuted(true);
       if (source === MutedSource.PassiveByMuteOne) {
         message.info("Host muted you");
       }
-    } else if (action === AudioChangeAction.Unmuted) {
+    } else {
       setIsMuted(false);
-      if (source === "passive") {
+      if (source === MutedSource.PassiveByMuteAll || source === MutedSource.PassiveByMuteOne) {
         message.info("Host unmuted you");
       }
     }
@@ -186,10 +193,12 @@ const VideoFooter = (props: VideoFooterProps) => {
       setIsStartedScreenShare(false);
     }
   }, [mediaStream, isStartedScreenShare, shareRef]);
-  const onPassivelyStopShare = useCallback(({ reason }) => {
+
+  const onPassivelyStopShare = useCallback((reason: Parameters<typeof event_passively_stop_share>[0]) => {
     console.info("passively stop reason:", reason);
     setIsStartedScreenShare(false);
   }, []);
+
   const onDeviceChange = useCallback(() => {
     if (mediaStream !== null) {
       setMicList(mediaStream.getMicList());
@@ -205,7 +214,7 @@ const VideoFooter = (props: VideoFooterProps) => {
     setRecordingStatus(recordingClient?.getCloudRecordingStatus() ?? "");
   }, [recordingClient]);
 
-  const onDialOutChange = useCallback((payload) => {
+  const onDialOutChange = useCallback((payload: Parameters<typeof event_dial_out_change>[0]) => {
     setPhoneCallStatus(payload.code);
   }, []);
 
@@ -235,18 +244,18 @@ const VideoFooter = (props: VideoFooterProps) => {
       }
     }
   };
-  const onVideoCaptureChange = useCallback((payload) => {
+  const onVideoCaptureChange = useCallback((payload: Parameters<typeof event_video_capturing_change>[0]) => {
     if (payload.state === VideoCapturingState.Started) {
       setIsStartedVideo(true);
     } else {
       setIsStartedVideo(false);
     }
   }, []);
-  const onShareAudioChange = useCallback((payload) => {
+  const onShareAudioChange = useCallback((payload: Parameters<typeof event_share_audio_change>[0]) => {
     const { state } = payload;
     if (state === "on") {
       setIsComputerAudioDisabled(true);
-    } else if (state === "off") {
+    } else {
       setIsComputerAudioDisabled(false);
     }
   }, []);
diff --git a/src/feature/video/hooks/useAvtiveVideo.ts b/src/feature/video/hooks/useAvtiveVideo.ts
@@ -1,23 +1,29 @@
 import { useCallback, useEffect, useState } from "react";
 
+import { event_audio_active_speaker, event_video_active_change } from "@zoom/videosdk";
+
 import { ZoomClient } from "../../../index-types.d";
+
 export function useActiveVideo(zmClient: ZoomClient) {
   const [activeVideo, setActiveVideo] = useState<number>(0);
   const [activeSpeaker, setActiveSpeaker] = useState<number>(0);
-  const onVideoActiveChange = useCallback((payload) => {
+
+  const onVideoActiveChange = useCallback((payload: Parameters<typeof event_video_active_change>[0]) => {
     const { state, userId } = payload;
     if (state === "Active") {
       setActiveVideo(userId);
-    } else if (state === "Inactive") {
+    } else {
       setActiveVideo(0);
     }
   }, []);
-  const onActiveSpeakerChange = useCallback((payload) => {
-    if (Array.isArray(payload) && payload.length > 0) {
-      const { userId } = payload[0];
-      setActiveSpeaker(userId);
+
+  const onActiveSpeakerChange = useCallback((payload: Parameters<typeof event_audio_active_speaker>[0]) => {
+    const activeSpeaker = payload[0];
+    if (activeSpeaker !== undefined) {
+      setActiveSpeaker(activeSpeaker.userId);
     }
   }, []);
+
   useEffect(() => {
     zmClient.on("video-active-change", onVideoActiveChange);
     zmClient.on("active-speaker", onActiveSpeakerChange);
diff --git a/src/feature/video/hooks/useCanvasDimension.ts b/src/feature/video/hooks/useCanvasDimension.ts
@@ -9,7 +9,7 @@ export function useCanvasDimension(
   videoRef: MutableRefObject<HTMLCanvasElement | null>,
 ) {
   const [dimension, setDimension] = useState({ width: 0, height: 0 });
-  const onCanvasResize = useCallback(({ width, height }) => {
+  const onCanvasResize = useCallback(({ width, height }: { width: number; height: number }) => {
     _.debounce((...args) => {
       setDimension({
         width: args[0],
diff --git a/src/feature/video/hooks/useShare.ts b/src/feature/video/hooks/useShare.ts
@@ -1,7 +1,10 @@
 import { MutableRefObject, useCallback, useEffect, useState } from "react";
 
+import { event_active_share_change, event_share_content_dimension_change, event_user_update } from "@zoom/videosdk";
+
 import { useMount, usePrevious, useUnmount } from "../../../hooks";
 import { MediaStream, ZoomClient } from "../../../index-types.d";
+
 export function useShare(
   zmClient: ZoomClient,
   mediaStream: MediaStream | null,
@@ -16,19 +19,22 @@ export function useShare(
   });
   const [currentUserId, setCurrentUserId] = useState(0);
   const onActiveShareChange = useCallback(
-    ({ state, userId }) => {
+    ({ state, userId }: Parameters<typeof event_active_share_change>[0]) => {
       if (!isStartedShare) {
         setActiveSharingId(userId);
         setIsReceiveSharing(state === "Active");
       }
     },
     [isStartedShare],
   );
-  const onSharedContentDimensionChange = useCallback(({ width, height }) => {
-    setSharedContentDimension({ width, height });
-  }, []);
+  const onSharedContentDimensionChange = useCallback(
+    ({ width, height }: Parameters<typeof event_share_content_dimension_change>[0]) => {
+      setSharedContentDimension({ width, height });
+    },
+    [],
+  );
   const onCurrentUserUpdate = useCallback(
-    (payload) => {
+    (payload: Parameters<typeof event_user_update>[0]) => {
       if (Array.isArray(payload) && payload.length > 0) {
         payload.forEach((item) => {
           if (item.userId === currentUserId && item.sharerOn !== undefined) {
diff --git a/src/feature/video/video-non-sab.tsx b/src/feature/video/video-non-sab.tsx
@@ -85,7 +85,7 @@ const VideoContainer: React.FunctionComponent<RouteComponentProps> = (props) =>
     }
   }, [isSharing, sharedContentDimension, containerDimension]);
 
-  const onShareContainerResize = useCallback(({ width, height }) => {
+  const onShareContainerResize = useCallback(({ width, height }: { width: number; height: number }) => {
     _.throttle(() => {
       setContainerDimension({ width, height });
     }, 50).call(this);
diff --git a/src/feature/video/video-single.tsx b/src/feature/video/video-single.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
-import { VideoQuality } from "@zoom/videosdk";
+import { VideoQuality, event_video_active_change } from "@zoom/videosdk";
 import classnames from "classnames";
 import _ from "lodash";
 import { RouteComponentProps } from "react-router-dom";
@@ -51,7 +51,7 @@ const VideoContainer: React.FunctionComponent<RouteComponentProps> = (props) =>
   useParticipantsChange(zmClient, (payload) => {
     setParticipants(payload);
   });
-  const onActiveVideoChange = useCallback((payload) => {
+  const onActiveVideoChange = useCallback((payload: Parameters<typeof event_video_active_change>[0]) => {
     const { userId } = payload;
     setActiveVideo(userId);
   }, []);
@@ -122,7 +122,7 @@ const VideoContainer: React.FunctionComponent<RouteComponentProps> = (props) =>
     }
   }, [isSharing, sharedContentDimension, containerDimension]);
 
-  const onShareContainerResize = useCallback(({ width, height }) => {
+  const onShareContainerResize = useCallback(({ width, height }: { width: number; height: number }) => {
     _.throttle(() => {
       setContainerDimension({ width, height });
     }, 50).call(this);
diff --git a/src/feature/video/video.tsx b/src/feature/video/video.tsx
@@ -69,7 +69,7 @@ const VideoContainer: React.FunctionComponent<RouteComponentProps> = (props) =>
     }
   }, [isSharing, sharedContentDimension, containerDimension]);
 
-  const onShareContainerResize = useCallback(({ width, height }) => {
+  const onShareContainerResize = useCallback(({ width, height }: { width: number; height: number }) => {
     _.throttle(() => {
       setContainerDimension({ width, height });
     }, 50).call(this);
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -119,7 +119,7 @@ const CommandContainer = () => {`
`119`	`119`	`}`
`120`	`120`	`}, [commandReceivers, command]);`
`121`	`121`	`const setCommandUserId = useCallback(`
`122`		`- (userId) => {`
	`122`	`+ (userId: number) => {`
`123`	`123`	`const user = commandReceivers.find((u) => u.userId === userId);`
`124`	`124`	`if (user !== undefined) {`
`125`	`125`	`setCommandUser(user);`